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/assets/index-a2df5179.css

@@ -1 +1 @@
-.el-link[data-v-aee57c78]{padding:4px}.el-text[data-v-aee57c78]{padding-top:20px}[data-v-830cee5a] .el-checkbox__label{flex:1;display:flex;justify-content:space-between;align-items:center}.error[data-v-830cee5a]{border-color:var(--el-color-error)!important;color:var(--el-color-error)!important;--el-checkbox-checked-text-color: var(--el-color-error);--el-checkbox-checked-bg-color: var(--el-color-error);--el-checkbox-checked-input-border-color: var(--el-color-error)}.edit[data-v-830cee5a]{border-color:var(--el-color-dark)!important}.tool[data-v-cd1572ca]{display:flex;margin:4px 0;justify-content:center}#source-list[data-v-cd1572ca]{margin-top:6px;height:calc(100vh - 119px)}#source-list[data-v-cd1572ca] .el-checkbox{margin-bottom:4px;width:100%}[data-v-f7a4e94b] #debug-text{height:calc(100vh - 86px)}[data-v-7e91a802] .el-input{width:100%}[data-v-7e91a802] #source-json{height:calc(100vh - 50px)}[data-v-dcce2457] .el-tabs__header{margin-bottom:5px}.flex-space-between[data-v-9fd45dad]{display:flex;justify-content:space-between;align-items:baseline}.flex-column-center[data-v-9fd45dad]{display:flex;flex-direction:column;justify-content:center}.menu>.el-button[data-v-9fd45dad]{margin:4px;padding:1em;width:6em}.hotkeys-item .title[data-v-9fd45dad]{width:5em;display:flex;justify-content:flex-end;margin-right:1em}.hotkeys-item__content[data-v-9fd45dad]{display:flex;flex-wrap:wrap;flex:1}.hotkeys-item__content div[data-v-9fd45dad]{margin-bottom:1em}.hotkeys-item__content span[data-v-9fd45dad]{margin:.5em}[data-v-2cfb5302] .el-tab-pane{height:calc(100vh - 55px);padding-top:15px;padding-right:5px;overflow-y:auto}[data-v-2cfb5302] .el-tabs__header{margin:0}kbd{background-color:#fcfcfc;border-radius:3px;border:1px solid hsl(0deg,0%,80%);padding:4px 5px;font-weight:700}code{background-color:#f2f1f1;padding:.125rem .25rem;border-radius:.25rem;font-size:.835rem}body{padding:0;margin:0}.el-tabs__header{position:sticky;top:0px;z-index:2;background-color:#fff}.editor[data-v-5fe2b79d]{display:flex;height:100vh;overflow:hidden}.editor .left[data-v-5fe2b79d]{flex:1;margin-left:20px}.editor .right[data-v-5fe2b79d]{flex:1;width:360px;margin-right:20px}
+.el-link[data-v-aee57c78]{padding:4px}.el-text[data-v-aee57c78]{padding-top:20px}[data-v-830cee5a] .el-checkbox__label{flex:1;display:flex;justify-content:space-between;align-items:center}.error[data-v-830cee5a]{border-color:var(--el-color-error)!important;color:var(--el-color-error)!important;--el-checkbox-checked-text-color: var(--el-color-error);--el-checkbox-checked-bg-color: var(--el-color-error);--el-checkbox-checked-input-border-color: var(--el-color-error)}.edit[data-v-830cee5a]{border-color:var(--el-color-dark)!important}.tool[data-v-cd1572ca]{display:flex;margin:4px 0;justify-content:center}#source-list[data-v-cd1572ca]{margin-top:6px;height:calc(100vh - 119px)}#source-list[data-v-cd1572ca] .el-checkbox{margin-bottom:4px;width:100%}[data-v-f7a4e94b] #debug-text{height:calc(100vh - 86px)}[data-v-7e91a802] .el-input{width:100%}[data-v-7e91a802] #source-json{height:calc(100vh - 50px)}[data-v-dcce2457] .el-tabs__header{margin-bottom:5px}.flex-space-between[data-v-9fd45dad]{display:flex;justify-content:space-between;align-items:baseline}.flex-column-center[data-v-9fd45dad]{display:flex;flex-direction:column;justify-content:center}.menu>.el-button[data-v-9fd45dad]{margin:4px;padding:1em;width:6em}.hotkeys-item .title[data-v-9fd45dad]{width:5em;display:flex;justify-content:flex-end;margin-right:1em}.hotkeys-item__content[data-v-9fd45dad]{display:flex;flex-wrap:wrap;flex:1}.hotkeys-item__content div[data-v-9fd45dad]{margin-bottom:1em}.hotkeys-item__content span[data-v-9fd45dad]{margin:.5em}[data-v-2cfb5302] .el-tab-pane{height:calc(100vh - 55px);padding-top:15px;padding-right:5px;overflow-y:auto}[data-v-2cfb5302] .el-tabs__header{margin:0}kbd{background-color:#fcfcfc;border-radius:3px;border:1px solid hsl(0deg,0%,80%);padding:4px 5px;font-weight:700}code{background-color:#f2f1f1;padding:.125rem .25rem;border-radius:.25rem;font-size:.835rem}body{padding:0;margin:0}.el-tabs__header{position:sticky;top:0;z-index:2;background-color:#fff}.editor[data-v-5fe2b79d]{display:flex;height:100vh;overflow:hidden}.editor .left[data-v-5fe2b79d]{flex:1;margin-left:20px}.editor .right[data-v-5fe2b79d]{flex:1;width:360px;margin-right:20px}

app/src/main/assets/web/vue/assets/loading-6856b75b.js

@@ -0,0 +1 @@
+import{u as L}from"./index-6758c83f.js";import{z as p,K as w,a5 as D,ae as v,u as Y}from"./vendor-260e64da.js";const y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|SSS/g;function z(t,i,e,a){let o=t<12?"AM":"PM";return a&&(o=o.split("").reduce((n,l)=>n+=`${l}.`,"")),e?o.toLowerCase():o}function $(t,i,e={}){var a;const o=t.getFullYear(),n=t.getMonth(),l=t.getDate(),s=t.getHours(),r=t.getMinutes(),g=t.getSeconds(),M=t.getMilliseconds(),S=t.getDay(),c=(a=e.customMeridiem)!=null?a:z,d={YY:()=>String(o).slice(-2),YYYY:()=>o,M:()=>n+1,MM:()=>`${n+1}`.padStart(2,"0"),MMM:()=>t.toLocaleDateString(e.locales,{month:"short"}),MMMM:()=>t.toLocaleDateString(e.locales,{month:"long"}),D:()=>String(l),DD:()=>`${l}`.padStart(2,"0"),H:()=>String(s),HH:()=>`${s}`.padStart(2,"0"),h:()=>`${s%12||12}`.padStart(1,"0"),hh:()=>`${s%12||12}`.padStart(2,"0"),m:()=>String(r),mm:()=>`${r}`.padStart(2,"0"),s:()=>String(g),ss:()=>`${g}`.padStart(2,"0"),SSS:()=>`${M}`.padStart(3,"0"),d:()=>S,dd:()=>t.toLocaleDateString(e.locales,{weekday:"narrow"}),ddd:()=>t.toLocaleDateString(e.locales,{weekday:"short"}),dddd:()=>t.toLocaleDateString(e.locales,{weekday:"long"}),A:()=>c(s,r),AA:()=>c(s,r,!1,!0),a:()=>c(s,r,!0),aa:()=>c(s,r,!0,!0)};return i.replace(y,(u,m)=>{var f,h;return(h=m??((f=d[u])==null?void 0:f.call(d)))!=null?h:u})}const A=t=>/,\s*\{/.test(t)||!(t.startsWith("http")||t.startsWith("data:")||t.startsWith("blob:"));function W(t){return location.origin+"/image?path="+encodeURIComponent(t)+"&url="+encodeURIComponent(sessionStorage.getItem("bookUrl"))+"&width="+L().config.readWidth}const U=t=>{let i=new Date().getTime(),e=Math.floor((i-t)/1e3),a="";return e<=30?a="刚刚":e<60?a=e+"秒前":e<3600?a=Math.floor(e/60)+"分钟前":e<86400?a=Math.floor(e/3600)+"小时前":e<2592e3?a=Math.floor(e/86400)+"天前":a=$(new Date(t),"YYYY-MM-DD"),a},b='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"/></svg>';const x=(t,i,e=b)=>{const a=p(!1);let o=null;const n=()=>a.value=!1,l=()=>a.value=!0;w(a,r=>{if(!r)return o==null?void 0:o.close();o=v.service({target:Y(t),spinner:e,text:i,lock:!0,background:"rgba(0, 0, 0, 0)"})});const s=r=>{if(!(r instanceof Promise))throw TypeError("loadingWrapper argument must be Promise");return l(),r.finally(n)};return D(()=>{n()}),{isLoading:a,showLoading:l,closeLoading:n,loadingWrapper:s}};export{U as d,W as g,A as i,x as u};

app/src/main/assets/web/vue/assets/loading-db04d821.js

@@ -1 +0,0 @@
-import{u as S}from"./index-0af0d34a.js";import{z as L,K as p,a5 as w,ae as D,u as v}from"./vendor-b9134af1.js";const Y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|SSS/g;function y(t,i,e,a){let o=t<12?"AM":"PM";return a&&(o=o.split("").reduce((n,l)=>n+=`${l}.`,"")),e?o.toLowerCase():o}function z(t,i,e={}){var a;const o=t.getFullYear(),n=t.getMonth(),l=t.getDate(),s=t.getHours(),r=t.getMinutes(),g=t.getSeconds(),f=t.getMilliseconds(),h=t.getDay(),c=(a=e.customMeridiem)!=null?a:y,d={YY:()=>String(o).slice(-2),YYYY:()=>o,M:()=>n+1,MM:()=>`${n+1}`.padStart(2,"0"),MMM:()=>t.toLocaleDateString(e.locales,{month:"short"}),MMMM:()=>t.toLocaleDateString(e.locales,{month:"long"}),D:()=>String(l),DD:()=>`${l}`.padStart(2,"0"),H:()=>String(s),HH:()=>`${s}`.padStart(2,"0"),h:()=>`${s%12||12}`.padStart(1,"0"),hh:()=>`${s%12||12}`.padStart(2,"0"),m:()=>String(r),mm:()=>`${r}`.padStart(2,"0"),s:()=>String(g),ss:()=>`${g}`.padStart(2,"0"),SSS:()=>`${f}`.padStart(3,"0"),d:()=>h,dd:()=>t.toLocaleDateString(e.locales,{weekday:"narrow"}),ddd:()=>t.toLocaleDateString(e.locales,{weekday:"short"}),dddd:()=>t.toLocaleDateString(e.locales,{weekday:"long"}),A:()=>c(s,r),AA:()=>c(s,r,!1,!0),a:()=>c(s,r,!0),aa:()=>c(s,r,!0,!0)};return i.replace(Y,(m,M)=>{var u;return M||((u=d[m])==null?void 0:u.call(d))||m})}const b=t=>/,\s*\{/.test(t)||!(t.startsWith("http")||t.startsWith("data:")||t.startsWith("blob:"));function A(t){return location.origin+"/image?path="+encodeURIComponent(t)+"&url="+encodeURIComponent(sessionStorage.getItem("bookUrl"))+"&width="+S().config.readWidth}const W=t=>{let i=new Date().getTime(),e=Math.floor((i-t)/1e3),a="";return e<=30?a="刚刚":e<60?a=e+"秒前":e<3600?a=Math.floor(e/60)+"分钟前":e<86400?a=Math.floor(e/3600)+"小时前":e<2592e3?a=Math.floor(e/86400)+"天前":a=z(new Date(t),"YYYY-MM-DD"),a},$='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"/></svg>';const U=(t,i,e=$)=>{const a=L(!1);let o=null;const n=()=>a.value=!1,l=()=>a.value=!0;p(a,r=>{if(!r)return o==null?void 0:o.close();o=D.service({target:v(t),spinner:e,text:i,lock:!0,background:"rgba(0, 0, 0, 0)"})});const s=r=>{if(!(r instanceof Promise))throw TypeError("loadingWrapper argument must be Promise");return l(),r.finally(n)};return w(()=>{n()}),{isLoading:a,showLoading:l,closeLoading:n,loadingWrapper:s}};export{W as d,A as g,b as i,U as u};

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);