fix: 🐛 修复根据屏幕比例自动切换单双页模式功能失效的 bug

locales/en.json

@@ -109,6 +109,7 @@
       "abreast_duplicate": "Column duplicates ratio",
       "abreast_mode": "Abreast scroll mode",
       "always_load_all_img": "Always load all images",
+      "auto_switch_page_mode": "Auto switch single/double page mode",
       "background_color": "Background Color",
       "click_page_turn_area": "Touch area",
       "click_page_turn_enabled": "Click to turn page",

locales/ru.json

@@ -109,6 +109,7 @@
       "abreast_duplicate": "Коэффициент дублирования столбцов",
       "abreast_mode": "Режим прокрутки в ряд",
       "always_load_all_img": "Всегда загружать все изображения",
+      "auto_switch_page_mode": "Автоматическое переключение режима одиночной/двойной страницы",
       "background_color": "Цвет фона",
       "click_page_turn_area": "Область нажатия",
       "click_page_turn_enabled": "Перелистывать по клику",

locales/zh.json

@@ -109,6 +109,7 @@
       "abreast_duplicate": "每列重复比例",
       "abreast_mode": "并排卷轴模式",
       "always_load_all_img": "始终加载所有图片",
+      "auto_switch_page_mode": "自动切换单双页模式",
       "background_color": "背景颜色",
       "click_page_turn_area": "点击区域",
       "click_page_turn_enabled": "点击翻页",

src/components/Manga/actions/image.ts

@@ -1,9 +1,10 @@
 import { isEqual, throttle } from 'helper';
+import { createEffectOn } from 'helper/solidJs';
 
 import { autoCloseFill, handleComicData } from '../handleComicData';
 import { setState, type State } from '../store';
 
-import { activeImgIndex, isOnePageMode } from './memo/common';
+import { activeImgIndex, isOnePageMode, pageNum } from './memo/common';
 
 /** 重新计算图片排列 */
 export const updatePageData = (state: State) => {
@@ -41,3 +42,5 @@ export const resetImgState = (state: State) => {
     state.fillEffect['-1'] =
       state.option.firstPageFill && state.imgList.length > 3;
 };
+
+createEffectOn([pageNum, isOnePageMode], () => setState(updatePageData));

src/components/Manga/actions/imageType.ts

@@ -56,7 +56,6 @@ createRootEffect((prevIsWide) => {
     ) {
       state.option.scrollMode.enabled = true;
       autoScrollMode = true;
-      updatePageData(state);
       return;
     }
 

src/components/Manga/actions/memo/common.ts

@@ -1,4 +1,5 @@
 import { createRootMemo, createThrottleMemo } from 'helper/solidJs';
+import { createMemo } from 'solid-js';
 
 import { store } from '../../store';
 import { findFillIndex } from '../../handleComicData';
@@ -13,15 +14,6 @@ export const isScrollMode = createRootMemo(
   () => store.option.scrollMode.enabled && !store.option.scrollMode.abreastMode,
 );
 
-/** 是否为单页模式 */
-export const isOnePageMode = createRootMemo(
-  () =>
-    store.option.onePageMode ||
-    store.option.scrollMode.enabled ||
-    store.isMobile ||
-    store.imgList.length <= 1,
-);
-
 /** 当前显示页面 */
 export const activePage = createRootMemo(
   () => store.pageList[store.activePageIndex] ?? [],
@@ -69,3 +61,18 @@ export const abreastColumnWidth = createRootMemo(() =>
     ? placeholderSize().width * store.option.scrollMode.imgScale
     : 0,
 );
+
+export const autoPageNum = createThrottleMemo(() =>
+  store.rootSize.width >= store.rootSize.height ? 2 : 1,
+);
+
+export const pageNum = createMemo(() => store.option.pageNum || autoPageNum());
+
+/** 是否为单页模式 */
+export const isOnePageMode = createRootMemo(
+  () =>
+    pageNum() === 1 ||
+    store.option.scrollMode.enabled ||
+    store.isMobile ||
+    store.imgList.length <= 1,
+);

src/components/Manga/actions/switch.ts

@@ -6,7 +6,13 @@ import { zoom } from './zoom';
 import { setOption } from './helper';
 import { updatePageData } from './image';
 import { setImgTranslationEnbale } from './translation';
-import { activeImgIndex, nowFillIndex, activePage } from './memo';
+import {
+  activeImgIndex,
+  nowFillIndex,
+  activePage,
+  pageNum,
+  autoPageNum,
+} from './memo';
 import { saveScrollProgress, scrollViewImg } from './scroll';
 
 /** 切换页面填充 */
@@ -27,10 +33,8 @@ export const switchScrollMode = () => {
   zoom(100);
   setOption((draftOption, state) => {
     draftOption.scrollMode.enabled = !draftOption.scrollMode.enabled;
-    draftOption.onePageMode = draftOption.scrollMode.enabled;
     state.page.offset.x.px = 0;
     state.page.offset.y.px = 0;
-    updatePageData(state);
   });
   // 切换到卷轴模式后自动定位到对应页
   scrollViewImg(store.activePageIndex);
@@ -39,8 +43,11 @@ export const switchScrollMode = () => {
 /** 切换单双页模式 */
 export const switchOnePageMode = () => {
   setOption((draftOption, state) => {
-    draftOption.onePageMode = !draftOption.onePageMode;
-    updatePageData(state);
+    const newPageNum = pageNum() === 1 ? 2 : 1;
+    draftOption.pageNum =
+      state.option.autoSwitchPageMode && newPageNum === autoPageNum()
+        ? 0
+        : newPageNum;
   });
 };
 

src/components/Manga/components/ScrollbarPageStatus.tsx

@@ -3,7 +3,7 @@ import { boolDataVal } from 'helper';
 import { createThrottleMemo } from 'helper/solidJs';
 
 import { store } from '../store';
-import { contentHeight } from '../actions';
+import { contentHeight, isOnePageMode } from '../actions';
 import classes from '../index.module.css';
 
 interface ScrollbarPageItem {
@@ -85,7 +85,7 @@ export const ScrollbarPageStatus = () => {
     for (let i = 0; i < store.pageList.length; i++) {
       const [a, b] = store.pageList[i];
 
-      if (b === undefined) handleImg(a, !store.option.onePageMode);
+      if (b === undefined) handleImg(a, !isOnePageMode());
       else if (a === -1) {
         handleImg(b);
         handleImg(b);

src/components/Manga/defaultButtonList.tsx

@@ -57,13 +57,13 @@ export const defaultButtonList: ToolbarButtonList = [
   () => (
     <IconButton
       tip={
-        store.option.onePageMode
+        isOnePageMode()
           ? t('button.page_mode_single')
           : t('button.page_mode_double')
       }
       hidden={store.isMobile || store.option.scrollMode.enabled}
       onClick={switchOnePageMode}
-      children={store.option.onePageMode ? <MdLooksOne /> : <MdLooksTwo />}
+      children={isOnePageMode() ? <MdLooksOne /> : <MdLooksTwo />}
     />
   ),
   // 卷轴模式

src/components/Manga/defaultSettingList.tsx

@@ -11,6 +11,7 @@ import { SettingTranslation } from './components/SettingTranslation';
 import { SettingsShowItem } from './components/SettingsShowItem';
 import { SettingsItemSelect } from './components/SettingsItemSelect';
 import {
+  autoPageNum,
   createStateSetFn,
   saveScrollProgress,
   setOption,
@@ -150,6 +151,17 @@ export const defaultSettingList: () => SettingList = () => [
           />
         </Show>
 
+        <SettingsItemSwitch
+          name={t('setting.option.auto_switch_page_mode')}
+          value={store.option.autoSwitchPageMode}
+          onChange={(val) => {
+            setOption((draftOption, state) => {
+              draftOption.autoSwitchPageMode = val;
+              state.option.pageNum = val ? 0 : autoPageNum();
+            });
+          }}
+        />
+
         <Show when={store.option.scrollMode.enabled}>
           <SettingsItemSwitch
             name={t('setting.option.abreast_mode')}

src/components/Manga/store/option.ts

@@ -5,8 +5,6 @@ import type { areaArrayMap } from '../components/TouchArea';
 export interface Option {
   /** 漫画方向 */
   dir: 'ltr' | 'rtl';
-  /** 单页模式 */
-  onePageMode: boolean;
   /** 默认启用首页填充 */
   firstPageFill: boolean;
   /** 自定义背景色 */
@@ -25,6 +23,10 @@ export interface Option {
   showComment: boolean;
   /** 预加载页数 */
   preloadPageNum: number;
+  /** 显示页数。0 表示 auto */
+  pageNum: 1 | 2 | 0;
+  /** 自动切换单双页模式 */
+  autoSwitchPageMode: boolean;
 
   /** 滚动条 */
   scrollbar: {
@@ -94,7 +96,6 @@ const _defaultOption: Readonly<Option> = {
     showImgStatus: true,
     easyScroll: false,
   },
-  onePageMode: false,
   clickPageTurn: {
     enabled: 'ontouchstart' in document.documentElement,
     reverse: false,
@@ -108,6 +109,8 @@ const _defaultOption: Readonly<Option> = {
   alwaysLoadAllImg: false,
   showComment: true,
   preloadPageNum: 20,
+  pageNum: 0,
+  autoSwitchPageMode: true,
 
   scrollMode: {
     enabled: false,

src/index.ts

@@ -694,7 +694,7 @@ try {
           main
             .querySelectorAll<HTMLAnchorElement>('.fileThumb')
             .map((e) => e.getAttribute('href')!),
-        initOptions: { autoShow: false, defaultOption: { onePageMode: true } },
+        initOptions: { autoShow: false, defaultOption: { pageNum: 1 } },
       };
       break;
     }

src/site/kemono.tsx

@@ -3,7 +3,7 @@ import { createEffectOn, querySelectorAll, useInit } from 'main';
 (async () => {
   const { init, options, setManga } = await useInit('kemono', {
     autoShow: false,
-    defaultOption: { onePageMode: true },
+    defaultOption: { pageNum: 1 },
     /** 加载原图 */
     load_original_image: true,
   });