Merge pull request #3372 from StanHustler/master

web阅读优化

app/src/main/assets/web/vue/assets/config-56304acd.js

@@ -1 +0,0 @@
-import{A as f,u as i}from"./index-0af0d34a.js";import"./vendor-b9134af1.js";f.getReadConfig().then(e=>{var t=e.data.data;if(t){const a=i();let o=JSON.parse(t),s=a.config;o=Object.assign(s,o),a.setConfig(o)}});

app/src/main/assets/web/vue/assets/config-ccc7fe24.js

@@ -0,0 +1 @@
+import{A as f,u as i}from"./index-6758c83f.js";import"./vendor-260e64da.js";f.getReadConfig().then(e=>{var t=e.data.data;if(t){const a=i();let o=JSON.parse(t),s=a.config;o=Object.assign(s,o),a.setConfig(o)}});

app/src/main/assets/web/vue/index.html

@@ -4,10 +4,10 @@
         <meta charset="UTF-8" />
         <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-      <script type="module" crossorigin src="./assets/index-0af0d34a.js"></script>
-      <link rel="modulepreload" crossorigin href="./assets/vendor-b9134af1.js">
-      <link rel="stylesheet" href="./assets/vendor-5578283d.css">
-      <link rel="stylesheet" href="./assets/index-bd50a38f.css">
+      <script type="module" crossorigin src="./assets/index-6758c83f.js"></script>
+      <link rel="modulepreload" crossorigin href="./assets/vendor-260e64da.js">
+      <link rel="stylesheet" href="./assets/vendor-31f92e7c.css">
+      <link rel="stylesheet" href="./assets/index-a2df5179.css">
     </head>
 
     <body>

modules/web/.eslintrc-auto-import.json

@@ -79,6 +79,7 @@
     "watchEffect": true,
     "watchPostEffect": true,
     "watchSyncEffect": true,
-    "toValue": true
+    "toValue": true,
+    "WritableComputedRef": true
   }
 }

modules/web/src/auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {
@@ -81,5 +82,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }

modules/web/src/components.d.ts

@@ -3,11 +3,9 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     BookItems: typeof import('./components/BookItems.vue')['default']
     CatalogItem: typeof import('./components/CatalogItem.vue')['default']

modules/web/src/components/ReadSettings.vue

@@ -138,6 +138,21 @@
             >
           </div>
         </li>
+        <li class="paragraph-spacing">
+          <i>翻页速度</i>
+          <div class="resize">
+            <div class="resize">
+              <span class="less" @click="lessJumpDuration">
+                <em class="iconfont">&#xe625;</em>
+              </span>
+              <b></b> <span class="lang">{{ jumpDuration }}</span
+              ><b></b>
+              <span class="more" @click="moreJumpDuration"
+                ><em class="iconfont">&#xe626;</em></span
+              >
+            </div>
+          </div>
+        </li>
         <li class="infinite-loading">
           <i>无限加载</i>
           <span
@@ -304,6 +319,18 @@ const lessReadWidth = () => {
   if (config.value.readWidth > 640) config.value.readWidth -= 160;
   saveConfig(config.value);
 };
+const jumpDuration = computed(() => {
+  return store.config.jumpDuration;
+});
+const moreJumpDuration = () => {
+  store.config.jumpDuration += 100;
+  saveConfig(config.value);
+};
+const lessJumpDuration = () => {
+  if (store.config.jumpDuration === 0) return;
+  store.config.jumpDuration -= 100;
+  saveConfig(config.value);
+};
 const infiniteLoading = computed(() => {
   return store.config.infiniteLoading;
 });

modules/web/src/store/bookStore.js

@@ -22,6 +22,7 @@ export const useBookStore = defineStore("book", {
         readWidth: 800,
         infiniteLoading: false,
         customFontName: "",
+        jumpDuration: 1000,
         spacing: {
           paragraph: 1,
           line: 0.8,

modules/web/src/views/BookChapter.vue

@@ -403,8 +403,10 @@ const onReachBottom = (entries) => {
   }
 };
 
+let canJump = true;
 // 监听方向键
 const handleKeyPress = (event) => {
+  if (!canJump) return;
   switch (event.key) {
     case "ArrowLeft":
       event.stopPropagation();
@@ -425,7 +427,11 @@ const handleKeyPress = (event) => {
           type: "warn",
         });
       } else {
-        jump(0 - document.documentElement.clientHeight + 100);
+        canJump = false;
+        jump(0 - document.documentElement.clientHeight + 100, {
+          duration: store.config.jumpDuration,
+          callback: () => (canJump = true),
+        });
       }
       break;
     case "ArrowDown":
@@ -441,11 +447,24 @@ const handleKeyPress = (event) => {
           type: "warn",
         });
       } else {
-        jump(document.documentElement.clientHeight - 100);
+        canJump = false;
+        jump(document.documentElement.clientHeight - 100, {
+          duration: store.config.jumpDuration,
+          callback: () => (canJump = true),
+        });
       }
       break;
   }
 };
+
+// 阻止默认滚动事件
+const ignoreKeyPress = (event) => {
+  if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+};
+
 onMounted(() => {
   //获取书籍数据
   let bookUrl = sessionStorage.getItem("bookUrl");
@@ -484,6 +503,7 @@ onMounted(() => {
 
         getContent(chapterIndex, true, chapterPos);
         window.addEventListener("keyup", handleKeyPress);
+        window.addEventListener("keydown", ignoreKeyPress);
         // 兼容Safari < 14
         document.addEventListener("visibilitychange", onVisibilityChange);
         //监听底部加载
@@ -505,6 +525,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener("keyup", handleKeyPress);
+  window.removeEventListener("keydown", ignoreKeyPress);
   window.removeEventListener("resize", onResize);
   // 兼容Safari < 14
   document.removeEventListener("visibilitychange", onVisibilityChange);