feat(desktop): 添加字体设置

aooiuu · Sep 22, 2024 · 099596c · 099596c
1 parent bc60824
commit 099596c
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 49 deletions.
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -139,17 +139,14 @@
     "@any-reader/core": "workspace:^",
     "@any-reader/shared": "workspace:^",
     "@types/fs-extra": "^11.0.4",
-    "@types/glob": "^8.1.0",
     "@types/vscode": "^1.93.0",
     "@vscode/test-electron": "^2.4.1",
     "easy-post-message": "^0.1.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "execa": "^8.0.1",
     "explorer-opener": "^1.0.1",
     "fs-extra": "^11.2.0",
-    "glob": "^8.1.0",
     "prettier": "^2.8.8",
     "qs": "^6.13.0",
     "sql.js": "^1.11.0",

diff --git a/packages/web/src/components/Setting/components/ReadPage/index.vue b/packages/web/src/components/Setting/components/ReadPage/index.vue
@@ -1,5 +1,21 @@
 <template>
   <div class="h-full overflow-auto">
+    <SettingRow title="字体">
+      <a-select
+        v-model:value="settingStore.data.readStyle.font"
+        :options="fontList"
+        show-search
+        allow-clear
+        :filter-option="true"
+        class="!w-180px"
+        option-filter-prop="fullName"
+        :field-names="{
+          label: 'fullName',
+          value: 'family'
+        }"
+      >
+      </a-select>
+    </SettingRow>
     <SettingRow title="字体大小">
       <a-input-number v-model:value="settingStore.data.readStyle.fontSize" class="!w-120px" mode="button" />
     </SettingRow>
@@ -43,14 +59,22 @@
 import { THEME } from '@/constants/theme';
 import { useSettingStore } from '@/stores/setting';
 import SettingRow from '../SettingRow/index.vue';
+import { getFontList } from '@/utils/font';
 
 const setTheme = inject('setTheme');
 const settingStore = useSettingStore();
+const fontList = ref([]);
 
 // 设置颜色
 function changeTheme(color) {
   settingStore.data.readStyle.backgroundColor = color.color;
   settingStore.data.readStyle.textColor = color.textColor;
   setTheme(color.theme);
 }
+
+onMounted(() => {
+  getFontList().then((e) => {
+    fontList.value = e;
+  });
+});
 </script>
diff --git a/packages/web/src/global.d.ts b/packages/web/src/global.d.ts
@@ -1,13 +1,23 @@
+// https://developer.mozilla.org/zh-CN/docs/Web/API/Window/queryLocalFonts
+type FontData = {
+  family: string;
+  fullName: string;
+  postscriptName: string;
+  style: string;
+};
+
 declare global {
   interface Window {
+    // vscode
     vscode: any;
     acquireVsCodeApi: any;
     _acquireVsCodeApi: any;
-
     __vscode$initialize_page: string;
 
     // utools
     $AnyReader: any;
+
+    queryLocalFonts: () => Promise<FontData[]>;
   }
 }
 

diff --git a/packages/web/src/pages/common/content.ts b/packages/web/src/pages/common/content.ts
@@ -1,13 +1,13 @@
 import type { Ref } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import PQueue from 'p-queue';
-import { debounce } from 'lodash-es';
+import { debounce, kebabCase } from 'lodash-es';
 import { ContentType } from '@any-reader/rule-utils';
 import { getContent } from '@/api';
 import { saveChapterHistory } from '@/api/modules/chapter-history';
 import { contentDecoder } from '@/api/modules/rule-manager';
 import { useChaptersStore } from '@/stores/chapters';
-import { useSettingStore } from '@/stores/setting';
+import { useSettingStore, type ReadStyle } from '@/stores/setting';
 import { useReadStore } from '@/stores/read';
 import { useKeyboardShortcuts } from '@/hooks/useMagicKeys';
 import { TTS } from '@/utils/tts';
@@ -41,23 +41,21 @@ export function useTheme(contentRef: Ref<HTMLElement>) {
   watchEffect(
     () => {
       if (!contentRef.value) return;
-      if (settingStore.data.readStyle.textColor) {
-        contentRef.value.style.color = settingStore.data.readStyle.textColor;
-      }
-
-      if (settingStore.data.readStyle.backgroundColor) {
-        contentRef.value.style.backgroundColor = settingStore.data.readStyle.backgroundColor;
-      }
 
-      if (settingStore.data.readStyle.textOpacity) {
-        contentRef.value.style.setProperty('--text-opacity', String(settingStore.data.readStyle.textOpacity));
-      }
-
-      if (settingStore.data.readStyle.sectionSpacing) {
-        contentRef.value.style.setProperty('--section-spacing', String(settingStore.data.readStyle.sectionSpacing));
-      }
-      if (settingStore.data.readStyle.fontWeight) {
-        contentRef.value.style.setProperty('--font-weight', String(settingStore.data.readStyle.fontWeight));
+      const cssVars: (keyof ReadStyle)[] = [
+        'textOpacity',
+        'sectionSpacing',
+        'fontWeight',
+        'font',
+        'textColor',
+        'backgroundColor',
+        'fontSize',
+        'lineHeight',
+        'letterSpacing'
+      ];
+      for (const vssVar of cssVars) {
+        const val = settingStore.data.readStyle[vssVar];
+        typeof val !== 'undefined' && contentRef.value.parentElement!.style.setProperty('--' + kebabCase(vssVar), String(val));
       }
     },
     {

diff --git a/packages/web/src/pages/pc/content/index.vue b/packages/web/src/pages/pc/content/index.vue
@@ -5,10 +5,7 @@
       class="flex flex-1 flex-col overflow-hidden whitespace-pre-wrap break-words p-10 text-[#b3b3b3] lh-1.5em"
       :style="{
         fontSize: settingStore.data.readStyle.fontSize + 'px',
-        lineHeight: settingStore.data.readStyle.lineHeight,
-        letterSpacing: settingStore.data.readStyle.letterSpacing + 'px',
-        color: settingStore.data.readStyle.textColor,
-        backgroundColor: settingStore.data.readStyle.backgroundColor
+        letterSpacing: settingStore.data.readStyle.letterSpacing + 'px'
       }"
     >
       <!-- 加载 -->
@@ -127,6 +124,13 @@ useBus(EVENT_CHAPTERS_BOX).on(showChapters);
   display: block;
 }
 
+#text-container {
+  font-family: var(--font);
+  background-color: var(--background-color);
+  color: var(--text-color);
+  line-height: var(--line-height);
+}
+
 .center-row {
   margin-bottom: var(--section-spacing);
   font-weight: var(--font-weight);

diff --git a/packages/web/src/pages/vscode/content/index.vue b/packages/web/src/pages/vscode/content/index.vue
@@ -4,11 +4,11 @@
       <vscode-progress-ring></vscode-progress-ring>
     </div>
     <div
+      id="text-container"
       ref="contentRef"
       class="flex-1 overflow-y-auto whitespace-pre-wrap break-words p-10 indent-2em lh-1.5em"
       :style="{
         fontSize: settingStore.data.readStyle.fontSize + 'px',
-        lineHeight: settingStore.data.readStyle.lineHeight,
         letterSpacing: settingStore.data.readStyle.letterSpacing + 'px'
       }"
     >
@@ -73,6 +73,13 @@ useTheme(contentRef);
   }
 }
 
+#text-container {
+  /* font-family: var(--font); */
+  background-color: var(--background-color);
+  color: var(--text-color);
+  line-height: var(--line-height);
+}
+
 .center-row {
   margin-bottom: var(--section-spacing);
   font-weight: var(--font-weight);

diff --git a/packages/web/src/stores/setting.pc.ts b/packages/web/src/stores/setting.pc.ts
@@ -1,7 +1,10 @@
 import { merge } from 'lodash-es';
 import { readConfig, updateConfig } from '@/api';
+import type { FontData } from '@/utils/font';
 
 export type ReadStyle = {
+  // 字体
+  font: FontData;
   // 字体大小
   fontSize: number;
   // 字体粗细

diff --git a/packages/web/src/utils/font.ts b/packages/web/src/utils/font.ts
@@ -0,0 +1,16 @@
+import { uniqBy } from 'lodash-es';
+
+export type FontData = {
+  family: string;
+  fullName: string;
+  postscriptName: string;
+  style: string;
+};
+
+export async function getFontList() {
+  const list = await window.queryLocalFonts();
+  return uniqBy(
+    list.filter((e) => e.style === 'Regular'),
+    (e) => e.family
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml