feat(vscode): 字体颜色设置 (#44)

aooiuu · Jul 29, 2024 · 7315b1b · 7315b1b
1 parent d028c3f
commit 7315b1b
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 31 deletions.
diff --git a/packages/web/src/components/Setting/components/ReadPage/index.vue b/packages/web/src/components/Setting/components/ReadPage/index.vue
@@ -15,7 +15,7 @@
     <SettingRow title="段落间距">
       <a-input-number v-model:value="settingStore.data.readStyle.sectionSpacing" class="!w-120px" mode="button" />
     </SettingRow>
-    <SettingRow title="字体颜色">
+    <SettingRow title="文字颜色">
       <input v-model="settingStore.data.readStyle.textColor" type="color" style="border: solid 1px rgba(0, 0, 0, 0.1)" />
     </SettingRow>
     <SettingRow title="背景颜色">

diff --git a/packages/web/src/pages/common/content.ts b/packages/web/src/pages/common/content.ts
@@ -33,6 +33,37 @@ function useSaveHistory(contentRef: Ref<HTMLElement>, options: Ref<any>) {
   });
 }
 
+export function useTheme(contentRef: Ref<HTMLElement>) {
+  const settingStore = useSettingStore();
+
+  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));
+      }
+    },
+    {
+      flush: 'post'
+    }
+  );
+}
+
 export function useContent(contentRef: Ref<HTMLElement>) {
   const content = ref<string[]>([]);
   const contentType = ref<ContentType>(ContentType.NOVEL);
@@ -184,9 +215,6 @@ export function useContent(contentRef: Ref<HTMLElement>) {
     }
   );
 
-  const sectionSpacing = computed(() => settingStore.data.readStyle.sectionSpacing + 'px');
-  const fontWeight = computed(() => settingStore.data.readStyle.fontWeight);
-
   return {
     settingStore,
     content,
@@ -198,9 +226,7 @@ export function useContent(contentRef: Ref<HTMLElement>) {
     onPageDown,
     onPrevChapter,
     onNextChapter,
-    loading,
-    sectionSpacing,
-    fontWeight
+    loading
   };
 }
 

diff --git a/packages/web/src/pages/pc/content/index.vue b/packages/web/src/pages/pc/content/index.vue
@@ -85,7 +85,7 @@ import { onClickOutside } from '@vueuse/core';
 import { useChaptersStore } from '@/stores/chapters';
 import { useReadStore } from '@/stores/read';
 import { useBus, EVENT_CHAPTERS_BOX } from '@/utils/bus';
-import { useContent } from '@/pages/common/content';
+import { useContent, useTheme } from '@/pages/common/content';
 
 const chaptersStore = useChaptersStore();
 const readStore = useReadStore();
@@ -98,8 +98,8 @@ const topTarget = () => contentRef.value as HTMLElement;
 
 onClickOutside(chaptersRef, () => (chaptersVisible.value = false));
 
-const { settingStore, content, contentType, toChapter, lastChapter, nextChapter, onPrevChapter, onNextChapter, loading, sectionSpacing, fontWeight } =
-  useContent(contentRef);
+const { settingStore, content, contentType, toChapter, lastChapter, nextChapter, onPrevChapter, onNextChapter, loading } = useContent(contentRef);
+useTheme(contentRef);
 
 function scrollIntoViewChapter() {
   const el = chaptersRef.value.querySelector(`[title="${readStore.title}"]`);
@@ -126,7 +126,8 @@ useBus(EVENT_CHAPTERS_BOX).on(showChapters);
 }
 
 .center-row {
-  margin-bottom: v-bind(sectionSpacing);
-  font-weight: v-bind(fontWeight);
+  margin-bottom: var(--section-spacing);
+  font-weight: var(--font-weight);
+  opacity: var(--text-opacity);
 }
 </style>
diff --git a/packages/web/src/pages/vscode/content/index.vue b/packages/web/src/pages/vscode/content/index.vue
@@ -38,24 +38,14 @@
 
 <script setup lang="ts">
 import { ContentType } from '@any-reader/rule-utils';
-import { useContent } from '@/pages/common/content';
+import { useContent, useTheme } from '@/pages/common/content';
 
 const contentRef = ref();
 
-const {
-  content,
-  contentType,
-  settingStore,
-  lastChapter,
-  nextChapter,
-  onPageUp,
-  onPageDown,
-  onPrevChapter,
-  onNextChapter,
-  loading,
-  sectionSpacing,
-  fontWeight
-} = useContent(contentRef);
+const { content, contentType, settingStore, lastChapter, nextChapter, onPageUp, onPageDown, onPrevChapter, onNextChapter, loading } =
+  useContent(contentRef);
+
+useTheme(contentRef);
 </script>
 
 <style scoped>
@@ -83,7 +73,8 @@ const {
 }
 
 .center-row {
-  margin-bottom: v-bind(sectionSpacing);
-  font-weight: v-bind(fontWeight);
+  margin-bottom: var(--section-spacing);
+  font-weight: var(--font-weight);
+  opacity: var(--text-opacity);
 }
 </style>
diff --git a/packages/web/src/pages/vscode/settings/ReadPage/index.vue b/packages/web/src/pages/vscode/settings/ReadPage/index.vue
@@ -40,6 +40,29 @@
         @input="(event) => (settingStore.data.readStyle.sectionSpacing = +event.target.value)"
       />
     </SettingRow>
+    <SettingRow title="文字颜色">
+      <div class="flex items-center">
+        <input v-model="settingStore.data.readStyle.textColor" type="color" style="border: solid 1px rgba(0, 0, 0, 0.1)" />
+        <vscode-button class="ml-5" @click="settingStore.data.readStyle.textColor = ''">重置</vscode-button>
+      </div>
+    </SettingRow>
+    <SettingRow title="背景颜色">
+      <div class="flex items-center">
+        <input v-model="settingStore.data.readStyle.backgroundColor" type="color" style="border: solid 1px rgba(0, 0, 0, 0.1)" />
+        <vscode-button class="ml-5" @click="settingStore.data.readStyle.backgroundColor = ''">重置</vscode-button>
+      </div>
+    </SettingRow>
+    <SettingRow title="文字透明度 (0~1)">
+      <div class="flex items-center">
+        <vscode-text-field
+          :value="settingStore.data.readStyle.textOpacity"
+          class="flex-1"
+          mode="button"
+          @input="(event) => (settingStore.data.readStyle.textOpacity = +event.target.value)"
+        />
+        <vscode-button class="ml-5" @click="settingStore.data.readStyle.textOpacity = 1">重置</vscode-button>
+      </div>
+    </SettingRow>
   </div>
 </template>
 

diff --git a/packages/web/src/stores/setting.pc.ts b/packages/web/src/stores/setting.pc.ts
@@ -17,6 +17,8 @@ export type ReadStyle = {
   textColor: string;
   // 背景颜色
   backgroundColor: string;
+  // 文字透明度
+  textOpacity: number;
 };
 
 // 快捷键
@@ -48,7 +50,8 @@ export const useSettingStore = defineStore('setting', () => {
       textColor: '#ffffffb3',
       backgroundColor: '#1f1f1f',
       fontWeight: 400,
-      sectionSpacing: 12
+      sectionSpacing: 12,
+      textOpacity: 1
     },
     keyboardShortcuts: {
       prevChapter: '←',

diff --git a/packages/web/src/stores/setting.vsc.ts b/packages/web/src/stores/setting.vsc.ts
@@ -12,6 +12,12 @@ export type ReadStyle = {
   letterSpacing: number;
   // 段落间距
   sectionSpacing: number;
+  // 文字颜色
+  textColor: string;
+  // 背景颜色
+  backgroundColor: string;
+  // 文字透明度
+  textOpacity: 1;
 };
 
 // 快捷键
@@ -36,7 +42,10 @@ export const useSettingStore = defineStore('setting', () => {
       lineHeight: 1.5,
       letterSpacing: 1,
       fontWeight: 400,
-      sectionSpacing: 12
+      sectionSpacing: 12,
+      textColor: '',
+      backgroundColor: '',
+      textOpacity: 1
     },
     keyboardShortcuts: {
       prevChapter: '←',