From 18ca44441455439d8d6478673c897d0171c842b8 Mon Sep 17 00:00:00 2001 From: kevinchen Date: Sat, 15 Jan 2022 19:15:34 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E9=96=B1=E8=AE=80?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=A8=AD=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/style/read.scss | 2 +- src/components/read/EbookMenu.vue | 11 +++- src/components/read/menu/BgSetting.vue | 79 +++++++++++++++++++++++ src/composables/readMenu.ts | 3 + src/plugins/naive-ui/components/export.ts | 5 +- src/shims-vue.d.ts | 6 +- src/store/read.ts | 50 +++++++++++++- 7 files changed, 149 insertions(+), 7 deletions(-) create mode 100644 src/components/read/menu/BgSetting.vue diff --git a/src/assets/style/read.scss b/src/assets/style/read.scss index e9f91c7..8abc975 100644 --- a/src/assets/style/read.scss +++ b/src/assets/style/read.scss @@ -14,7 +14,7 @@ img { } body { - //color: var(--color); + color: var(--color); //padding-top: var(--read-padding) !important; } diff --git a/src/components/read/EbookMenu.vue b/src/components/read/EbookMenu.vue index be2d77c..e8753cb 100644 --- a/src/components/read/EbookMenu.vue +++ b/src/components/read/EbookMenu.vue @@ -47,6 +47,7 @@ + @@ -60,6 +61,7 @@ import { throttle } from 'lodash-es' import Slider from '@/components/read/menu/Slider.vue' import { useRouter } from 'vue-router' import FontSetting from '@/components/read/menu/FontSetting.vue' +import BgSetting from '@/components/read/menu/BgSetting.vue' const themeOverrides: GlobalThemeOverrides = { Layout: { @@ -69,9 +71,9 @@ const themeOverrides: GlobalThemeOverrides = { export default defineComponent({ name: 'EbookMenu', - components: { FontSetting, Slider }, + components: { FontSetting, Slider, BgSetting }, setup() { - const { menuShow, sliderShow, fontSettingShow, $reset } = useMenu() + const { menuShow, sliderShow, fontSettingShow, bgSettingShow, $reset } = useMenu() $reset() const router = useRouter() const bookStore = useReadStore() @@ -88,7 +90,10 @@ export default defineComponent({ }, { icon: icon.mdiWhiteBalanceSunny, - action: () => {} + action: () => { + menuShow.value = false + bgSettingShow.value = true + } }, { icon: icon.mdiFormatSize, diff --git a/src/components/read/menu/BgSetting.vue b/src/components/read/menu/BgSetting.vue new file mode 100644 index 0000000..71eb472 --- /dev/null +++ b/src/components/read/menu/BgSetting.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/src/composables/readMenu.ts b/src/composables/readMenu.ts index f06ac64..e62c950 100644 --- a/src/composables/readMenu.ts +++ b/src/composables/readMenu.ts @@ -3,11 +3,13 @@ import { ref } from 'vue' const menuShow = ref(false) const sliderShow = ref(false) const fontSettingShow = ref(false) +const bgSettingShow = ref(false) const $reset = () => { menuShow.value = false sliderShow.value = false fontSettingShow.value = false + bgSettingShow.value = false } export function useMenu() { @@ -15,6 +17,7 @@ export function useMenu() { menuShow, sliderShow, fontSettingShow, + bgSettingShow, $reset } } diff --git a/src/plugins/naive-ui/components/export.ts b/src/plugins/naive-ui/components/export.ts index 9c4d175..ceb3242 100644 --- a/src/plugins/naive-ui/components/export.ts +++ b/src/plugins/naive-ui/components/export.ts @@ -40,5 +40,8 @@ export { NDrawerContent, NModal, NScrollbar, - NSlider + NSlider, + NRadioGroup, + NRadio, + NColorPicker } from 'naive-ui' diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts index f847dc6..50b8c14 100644 --- a/src/shims-vue.d.ts +++ b/src/shims-vue.d.ts @@ -20,5 +20,9 @@ declare module '*/read.scss' { export default value } -declare module 'v-hotkey' +declare module '*.jpg' { + const value: any + export default value +} +declare module 'v-hotkey' diff --git a/src/store/read.ts b/src/store/read.ts index 24633dd..edb6e9c 100644 --- a/src/store/read.ts +++ b/src/store/read.ts @@ -9,7 +9,11 @@ import { Book, Rendition, RenditionOptions, PackagingMetadataObject, NavItem, Co import localforage from 'localforage' import { getCache, setCache } from '@/utils/localforage' +import bg_paper from '@/assets/img/bg-paper.jpg' + const FontSizeKey = 'app.read.setting.fontSize' +const BackgroundTypeKey = 'app.read.setting.backgroundType' +const BackgroundKey = 'app.read.setting.background' export const useReadStore = defineStore('app.read', { state: () => ({ @@ -29,7 +33,9 @@ export const useReadStore = defineStore('app.read', { pageIndex: 0 }, setting: { - fontSize: ~~localStorage.getItem(FontSizeKey) || 16 + fontSize: ~~localStorage.getItem(FontSizeKey) || 16, + backgroundType: localStorage.getItem(BackgroundTypeKey) || 'none', + background: localStorage.getItem(BackgroundKey) || 'rgba(255, 255, 255, 1)' }, changeSection: false }), @@ -141,6 +147,7 @@ font-size: ${this.setting.fontSize}px; await setCache(this.bookId, 'toc', toRaw(this.toc)) } }) + setBg(this) return this.rendition }, display(cfi?: string) { @@ -222,6 +229,47 @@ font-size: ${this.setting.fontSize}px; this.setting.fontSize = size this.rendition?.themes.fontSize(size + 'px') localStorage.setItem(FontSizeKey, String(size)) + }, + setBackgroundType(setting: string) { + this.setting.backgroundType = setting + setBg(this) + localStorage.setItem(BackgroundTypeKey, setting) + }, + setBackground(bg: string) { + this.setting.background = bg + setBg(this) + localStorage.setItem(BackgroundKey, bg) } } }) + +function computeFontColor(r: number, g: number, b: number) { + const contrast = (r * 299 + g * 587 + b * 114) / 1000 + if (contrast >= 125) { + return 'black' // 'dark' + } + return 'rgba(255,255,255,0.7)' // 'light' +} + +function setBg(this_) { + const { backgroundType, background } = this_.setting + switch (backgroundType) { + case 'custom': { + const regex = /rgba\((\d+), (\d+), (\d+), (1|0\.\d+)\)/ + if (!regex.test(background)) return + const [, r, g, b] = regex.exec(background) + const color = computeFontColor(+r, +g, +b) + this_.rendition.themes.override('--color', color) + document.documentElement.style.setProperty('--background', background) + break + } + case 'paper': { + this_.rendition.themes.override('--color', 'black') + document.documentElement.style.setProperty('--background', `url(${bg_paper}) repeat`) + break + } + default: + this_.rendition.themes.override('--color', 'black') + document.documentElement.style.setProperty('--background', 'unset') + } +} From db29964d9fd249f00c828816c010c4e99379519d Mon Sep 17 00:00:00 2001 From: kevinchen Date: Sat, 15 Jan 2022 19:49:00 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E8=83=8C=E6=99=AF=E8=A8=AD=E5=AE=9A?= =?UTF-8?q?=E6=9C=AA=E5=A5=97=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/read/EbookReader.vue | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/read/EbookReader.vue b/src/components/read/EbookReader.vue index 1e33633..51c3842 100644 --- a/src/components/read/EbookReader.vue +++ b/src/components/read/EbookReader.vue @@ -12,7 +12,7 @@