Эх сурвалжийг харах

feat(web): 阅读界面新增自动翻页功能(滚动模式)

- 设置面板底部新增自动翻页开关与速度调节(1-120 秒/页),未改动原有布局
- 开启后按设定速度匀速自动滚动,行为对齐 App 端滚动模式
- 用户滚轮/触摸/方向键交互、打开目录/设置弹窗、切后台时暂停,可自动恢复
- 翻到书末保持开启,配合无限加载自动续章
- 进度沿用现有 60s 节流 + Beacon 保存机制,自动滚动期间正常记录
- 仅 Web 端生效,App 端 Kotlin 零改动
rinnki 1 сар өмнө
parent
commit
1d8031a582

+ 51 - 0
modules/web/src/components/ReadSettings.vue

@@ -166,6 +166,38 @@
             >开启</span
             >开启</span
           >
           >
         </li>
         </li>
+        <li class="infinite-loading">
+          <i>自动翻页</i>
+          <span
+            class="infinite-loading-item"
+            :key="0"
+            :class="{ selected: autoPage == false }"
+            @click="setAutoPage(false)"
+            >关闭</span
+          >
+          <span
+            class="infinite-loading-item"
+            :key="1"
+            :class="{ selected: autoPage == true }"
+            @click="setAutoPage(true)"
+            >开启</span
+          >
+        </li>
+        <li class="paragraph-spacing">
+          <i>自动翻页速度(秒/页)</i>
+          <div class="resize">
+            <div class="resize">
+              <span class="less" @click="lessAutoPageSpeed">
+                <em class="iconfont">&#xe625;</em>
+              </span>
+              <b></b> <span class="lang">{{ autoPageSpeed }}</span
+              ><b></b>
+              <span class="more" @click="moreAutoPageSpeed"
+                ><em class="iconfont">&#xe626;</em></span
+              >
+            </div>
+          </div>
+        </li>
       </ul>
       </ul>
     </div>
     </div>
   </div>
   </div>
@@ -354,6 +386,25 @@ const infiniteLoading = computed(() => {
 const setInfiniteLoading = (loading: boolean) => {
 const setInfiniteLoading = (loading: boolean) => {
   store.config.infiniteLoading = loading
   store.config.infiniteLoading = loading
 }
 }
+
+//自动翻页
+const autoPage = computed(() => {
+  return store.config.autoPage
+})
+const setAutoPage = (on: boolean) => {
+  store.config.autoPage = on
+}
+
+//自动翻页速度(秒/页,1-120)
+const autoPageSpeed = computed(() => {
+  return store.config.autoPageSpeed
+})
+const moreAutoPageSpeed = () => {
+  if (store.config.autoPageSpeed < 120) store.config.autoPageSpeed += 1
+}
+const lessAutoPageSpeed = () => {
+  if (store.config.autoPageSpeed > 1) store.config.autoPageSpeed -= 1
+}
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

+ 2 - 0
modules/web/src/store/bookStore.ts

@@ -18,6 +18,8 @@ const default_config: webReadConfig = {
   infiniteLoading: false,
   infiniteLoading: false,
   customFontName: '',
   customFontName: '',
   jumpDuration: 1000,
   jumpDuration: 1000,
+  autoPage: false,
+  autoPageSpeed: 10,
   spacing: {
   spacing: {
     paragraph: 1,
     paragraph: 1,
     line: 0.8,
     line: 0.8,

+ 2 - 0
modules/web/src/web.d.ts

@@ -6,6 +6,8 @@ export type webReadConfig = {
   infiniteLoading: boolean
   infiniteLoading: boolean
   customFontName: string
   customFontName: string
   jumpDuration: number
   jumpDuration: number
+  autoPage: boolean
+  autoPageSpeed: number
   spacing: {
   spacing: {
     paragraph: number
     paragraph: number
     line: number
     line: number