加入閱讀背景設定

src/assets/style/read.scss

@@ -14,7 +14,7 @@ img {
 }
 
 body {
-  //color: var(--color);
+  color: var(--color);
   //padding-top: var(--read-padding) !important;
 }
 

src/components/read/EbookMenu.vue

@@ -47,6 +47,7 @@
 
     <slider />
     <font-setting />
+    <bg-setting />
   </n-config-provider>
 </template>
 
@@ -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,

src/components/read/EbookReader.vue

@@ -1,7 +1,13 @@
 <template>
   <v-resize-observer :on-resize="handleResize">
     <n-spin :show="loading">
-      <div id="read" ref="readDom" v-hotkey="keymap" :style="{ width: width + 'px' }"> </div>
+      <div
+        id="read"
+        ref="readDom"
+        v-hotkey="keymap"
+        :style="{ width: width + 'px', paddingRight: `calc(100% - ${width}px)`, background: 'var(--background)' }"
+      >
+      </div>
       <div ref="viewer" v-viewer v-show="false">
         <img :src="img.src" :alt="img.alt" />
       </div>
@@ -12,7 +18,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, reactive, onUnmounted } from 'vue'
 import { useReadStore } from '@/store/read'
-import { throttle } from 'lodash-es'
+import { throttle, find } from 'lodash-es'
 import { VResizeObserver } from 'vueuc'
 import { Contents } from '@/types/epubjs'
 import { useMenu } from '@/composables/readMenu'
@@ -32,13 +38,9 @@ function getWidth(width?: number) {
   return screenWidth - remainder
 }
 
-function getIframe(ele: any) {
-  while (ele.parentNode) {
-    ele = ele.parentNode
-  }
-  for (let iframe of window.document.querySelectorAll('iframe')) {
-    if (iframe.contentDocument === ele) return iframe
-  }
+function getIframe(ele: Node) {
+  const contentDocument = ele.ownerDocument
+  return find(document.querySelectorAll('iframe'), { contentDocument })
 }
 
 declare interface DomViewer {
@@ -244,7 +246,6 @@ export default defineComponent({
 
 <style scoped lang="scss">
 #read {
-  margin: 0 auto;
   height: 100vh;
 }
 </style>

src/components/read/menu/BgSetting.vue

@@ -0,0 +1,79 @@
+<template>
+  <n-modal
+    size="medium"
+    preset="card"
+    title="阅读背景选项"
+    v-model:show="bgSettingShow"
+    :style="{ width: 'fit-content' }"
+    :bordered="false"
+  >
+    <div class="bg-setting">
+      <n-radio-group v-model:value="bgType">
+        <n-space>
+          <n-radio value="none">无</n-radio>
+          <n-radio value="paper">纸质</n-radio>
+          <n-radio value="custom">自定义颜色</n-radio>
+        </n-space>
+      </n-radio-group>
+      <div class="color-picker">
+        <n-color-picker
+          v-show="false"
+          show-preview
+          :to="picker"
+          :show="true"
+          :modes="['rgb']"
+          :theme-overrides="{ boxShadow: 'none' }"
+          v-model:value="background"
+        />
+        <div ref="picker" v-show="bgType === 'custom'"></div>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+import { useMenu } from '@/composables/readMenu'
+import { useReadStore } from '@/store/read'
+
+export default defineComponent({
+  name: 'BgSetting',
+  setup() {
+    const picker = ref(null)
+    const { bgSettingShow } = useMenu()
+    const readStore = useReadStore()
+    const bgType = computed({
+      get: () => readStore.setting.backgroundType,
+      set: (setting: string) => readStore.setBackgroundType(setting)
+    })
+    const background = computed({
+      get: () => readStore.setting.background,
+      set: (color: string) => readStore.setBackground(color)
+    })
+
+    return {
+      bgSettingShow,
+      bgType,
+      background,
+      picker
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.bg-setting {
+  .v-binder-follower-container,
+  .v-binder-follower-content {
+    position: static;
+    height: auto;
+    transform: none !important;
+  }
+  .n-color-picker-pallete {
+    height: 120px;
+  }
+  .n-color-picker-control {
+    padding: 10px 0;
+  }
+}
+</style>

src/composables/readMenu.ts

@@ -3,18 +3,21 @@ 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() {
   return {
     menuShow,
     sliderShow,
     fontSettingShow,
+    bgSettingShow,
     $reset
   }
 }

src/plugins/naive-ui/components/export.ts

@@ -40,5 +40,8 @@ export {
   NDrawerContent,
   NModal,
   NScrollbar,
-  NSlider
+  NSlider,
+  NRadioGroup,
+  NRadio,
+  NColorPicker
 } from 'naive-ui'

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'

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')
+  }
+}