feat: ✨ 增加卷轴模式下的「自适应宽度」设置，替代删除「图片适合宽度」设置

hymbz · hymbz · commit 952a01673c1c · 2025-09-18T16:08:21.000+08:00
#285
diff --git a/locales/en.json b/locales/en.json
@@ -72,6 +72,7 @@
   },
   "other": {
     "auto": "Auto",
+    "custom": "Custom",
     "disable": "Disable",
     "distance": "distance",
     "download": "Download",
@@ -129,10 +130,12 @@
     "option": {
       "abreast_duplicate": "Column duplicates ratio",
       "abreast_mode": "Abreast scroll mode",
+      "adjust_to_width": "Adaptive Width",
       "align_edge": "Align to edge when turning page",
       "always_load_all_img": "Always load all images",
       "autoFullscreen": "Auto fullscreen",
       "autoHiddenMouse": "Auto hide mouse",
+      "auto_scale": "Auto Scale",
       "auto_scroll_trigger_end": "Continue scrolling on the end page",
       "auto_switch_page_mode": "Auto switch single/double page mode by aspect ratio",
       "background_color": "Background Color",
@@ -145,7 +148,7 @@
       "dir_rtl": "RTL (Japanese manga)",
       "disable_auto_enlarge": "Disable automatic image enlarge",
       "first_page_fill": "Enable first page fill by default",
-      "fit_to_width": "Fit to width",
+      "full_width": "Viewport Width",
       "img_recognition": "Image Recognition",
       "img_recognition_background": "Recognition background color",
       "img_recognition_pageFill": "Auto switch page fill",
diff --git a/locales/hu.json b/locales/hu.json
@@ -72,6 +72,7 @@
   },
   "other": {
     "auto": "自动",
+    "custom": "Egyedi",
     "disable": "Letiltás",
     "distance": "távolság",
     "download": "Letöltés",
@@ -129,10 +130,12 @@
     "option": {
       "abreast_duplicate": "每列重复比例",
       "abreast_mode": "并排卷轴模式",
+      "adjust_to_width": "Adaptív Szélesség",
       "align_edge": "Lapozáskor élhez igazítás",
       "always_load_all_img": "始终加载所有图片",
       "autoFullscreen": "Automatikus teljes képernyő",
       "autoHiddenMouse": "自动隐藏鼠标",
+      "auto_scale": "தானியங்கு அளவு",
       "auto_scroll_trigger_end": "Görgetés folytatása a végoldalon",
       "auto_switch_page_mode": "按屏幕比例切换单双页",
       "background_color": "背景颜色",
@@ -145,7 +148,7 @@
       "dir_rtl": "从右到左（日漫）",
       "disable_auto_enlarge": "禁止图片自动放大",
       "first_page_fill": "默认启用首页填充",
-      "fit_to_width": "图片适合宽度",
+      "full_width": "Nézetablak Szélesség",
       "img_recognition": "图像识别",
       "img_recognition_background": "识别背景色",
       "img_recognition_pageFill": "自动调整页面填充",
diff --git a/locales/ru.json b/locales/ru.json
@@ -72,6 +72,7 @@
   },
   "other": {
     "auto": "Авто",
+    "custom": "Custom",
     "disable": "Отключить",
     "distance": "расстояние",
     "download": "Скачать",
@@ -129,10 +130,12 @@
     "option": {
       "abreast_duplicate": "Коэффициент дублирования столбцов",
       "abreast_mode": "Режим прокрутки в ряд",
+      "adjust_to_width": "Адаптивная ширина",
       "align_edge": "Выравнивание по краю при перелистывании страницы",
       "always_load_all_img": "Всегда загружать все изображения",
       "autoFullscreen": "Авто полный экран",
       "autoHiddenMouse": "Автоматически скрывать курсор мыши",
+      "auto_scale": "Авто масштаб",
       "auto_scroll_trigger_end": "Продолжить прокрутку на конечной странице",
       "auto_switch_page_mode": "Автоматическое переключение режима одной/двойной страницы в зависимости от соотношения сторон",
       "background_color": "Цвет фона",
@@ -145,7 +148,7 @@
       "dir_rtl": "Чтение справа налево (Японская манга)",
       "disable_auto_enlarge": "Отключить автоматическое масштабирование изображений",
       "first_page_fill": "Включить заполнение первой страницы по умолчанию",
-      "fit_to_width": "По ширине",
+      "full_width": "Ширина окна просмотра",
       "img_recognition": "распознавание изображений",
       "img_recognition_background": "Определить цвет фона",
       "img_recognition_pageFill": "Автоматическое переключение заполнения страницы",
diff --git a/locales/ta.json b/locales/ta.json
@@ -72,6 +72,7 @@
   },
   "other": {
     "auto": "தானியங்கி",
+    "custom": "தனிப்பயனாக்க",
     "disable": "முடக்கவும்",
     "distance": "தூரம்",
     "download": "பதிவிறக்குங்கள்",
@@ -129,10 +130,12 @@
     "option": {
       "abreast_duplicate": "ஒவ்வொரு நெடுவரிசை நகல் விகிதம்",
       "abreast_mode": "இணை சுருள் பயன்முறை",
+      "adjust_to_width": "தகவமைப்பு அகலம்",
       "align_edge": "பக்கத்தைத் திருப்பும்போது விளிம்பில் சீரமை",
       "always_load_all_img": "எப்போதும் எல்லா படங்களையும் ஏற்றவும்",
       "autoFullscreen": "தானியங்கி முழுத்திரை",
       "autoHiddenMouse": "தானியங்கி மறைக்கும் சுட்டி",
+      "auto_scale": "தானியங்கு அளவு",
       "auto_scroll_trigger_end": "இறுதிப் பக்கத்தில் உருட்டலைத் தொடரவும்",
       "auto_switch_page_mode": "விகிதத்தின் அடிப்படையில் ஒற்றை/இரட்டை பக்க பயன்முறையை தானாக மாற்றவும்",
       "background_color": "பின்னணி நிறம்",
@@ -145,7 +148,7 @@
       "dir_rtl": "வலமிருந்து இடமாக (ரிமான்)",
       "disable_auto_enlarge": "தடைசெய்யப்பட்ட படங்கள் தானாக விரிவாக்கப்படுகின்றன",
       "first_page_fill": "இயல்பாக, முகப்புப்பக்க நிரப்புதலை இயக்கவும்",
-      "fit_to_width": "அகலத்திற்கு ஏற்ற படம்",
+      "full_width": "காட்சிச் சாளர அகலம்",
       "img_recognition": "பட ஏற்பு",
       "img_recognition_background": "அடையாள பின்னணி நிறம்",
       "img_recognition_pageFill": "தானியங்கி சரிசெய்தல் பக்கம் நிரப்புதல்",
diff --git a/locales/zh.json b/locales/zh.json
@@ -72,6 +72,7 @@
   },
   "other": {
     "auto": "自动",
+    "custom": "自定义",
     "disable": "禁用",
     "distance": "距离",
     "download": "下载",
@@ -129,10 +130,12 @@
     "option": {
       "abreast_duplicate": "每列重复比例",
       "abreast_mode": "并排卷轴模式",
+      "adjust_to_width": "自适应宽度",
       "align_edge": "滚动翻页时对齐边缘",
       "always_load_all_img": "始终加载所有图片",
       "autoFullscreen": "自动全屏",
       "autoHiddenMouse": "自动隐藏鼠标",
+      "auto_scale": "自动缩放",
       "auto_scroll_trigger_end": "在结束页上继续滚动",
       "auto_switch_page_mode": "按屏幕比例切换单双页",
       "background_color": "背景颜色",
@@ -145,7 +148,7 @@
       "dir_rtl": "从右到左（日漫）",
       "disable_auto_enlarge": "禁止图片自动放大",
       "first_page_fill": "默认启用首页填充",
-      "fit_to_width": "图片适合宽度",
+      "full_width": "视窗宽度",
       "img_recognition": "图像识别",
       "img_recognition_background": "识别背景色",
       "img_recognition_pageFill": "自动调整页面填充",
diff --git a/src/components/Manga/actions/imageSize.ts b/src/components/Manga/actions/imageSize.ts
@@ -9,6 +9,7 @@ import {
   imgList,
   isAbreastMode,
   placeholderSize,
+  scrollModeScale,
 } from './memo';
 
 /** 获取指定图片的显示尺寸 */
@@ -28,10 +29,11 @@ export const getImgDisplaySize = (
   };
 
   if (isAbreastMode()) return setWidth(abreastColumnWidth());
-  if (state.option.scrollMode.fitToWidth) return setWidth(state.rootSize.width);
+  if (state.option.scrollMode.adjustToWidth === 'full')
+    return setWidth(state.rootSize.width);
 
-  height *= state.option.scrollMode.imgScale;
-  width *= state.option.scrollMode.imgScale;
+  height *= scrollModeScale();
+  width *= scrollModeScale();
 
   if (width > state.rootSize.width) return setWidth(state.rootSize.width);
 
@@ -54,8 +56,8 @@ createEffectOn(
     imgList,
     () => store.option.scrollMode.enabled,
     () => store.option.scrollMode.abreastMode,
-    () => store.option.scrollMode.fitToWidth,
-    () => store.option.scrollMode.imgScale,
+    () => store.option.scrollMode.adjustToWidth,
+    scrollModeScale,
     () => store.rootSize,
     placeholderSize,
   ],
diff --git a/src/components/Manga/actions/index.ts b/src/components/Manga/actions/index.ts
@@ -13,6 +13,7 @@ export * from './readProgress';
 export * from './renderPage';
 export * from './scroll';
 export * from './scrollbar';
+export * from './scrollMode';
 export * from './scrollModeDrag';
 export * from './show';
 export * from './switch';
diff --git a/src/components/Manga/actions/memo/img.ts b/src/components/Manga/actions/memo/img.ts
@@ -4,6 +4,7 @@ import type { ComicImg } from '../../store/image';
 
 import { store } from '../../store';
 import { findFillIndex } from '../helper';
+import { isUseAutoScale } from './options';
 
 export const imgList = createRootMemo(() =>
   store.imgList.map((url) => store.imgMap[url]),
@@ -50,6 +51,16 @@ export const placeholderSize = createThrottleMemo(
   500,
 );
 
+/** 卷轴模式下的图片缩放比例 */
+export const scrollModeScale = createRootMemo(() => {
+  if (!isUseAutoScale()) return store.option.scrollMode.imgScale;
+
+  // 能让大多数图片的宽度接近指定值的图片缩放比例
+  return (
+    (store.option.scrollMode.adjustToWidth as number) / placeholderSize().width
+  );
+});
+
 if (isDevMode)
   Object.assign((window as any).unsafeWindow ?? window, {
     _imgList: imgList,
diff --git a/src/components/Manga/actions/memo/options.ts b/src/components/Manga/actions/memo/options.ts
@@ -9,14 +9,31 @@ export const isAbreastMode = createRootMemo(
 
 /** 当前是否为双页卷轴模式 */
 export const isDoubleMode = createRootMemo(
-  () => store.option.scrollMode.enabled && store.option.scrollMode.doubleMode,
+  () =>
+    store.option.scrollMode.enabled &&
+    store.option.scrollMode.doubleMode &&
+    !store.option.scrollMode.abreastMode,
+);
+
+/** 当前是否为单页卷轴模式 */
+export const isSingleMode = createRootMemo(
+  () =>
+    store.option.scrollMode.enabled &&
+    !store.option.scrollMode.doubleMode &&
+    !store.option.scrollMode.abreastMode,
 );
 
 /** 当前是否为普通卷轴模式（包含了双页卷轴模式） */
 export const isScrollMode = createRootMemo(
   () => store.option.scrollMode.enabled && !store.option.scrollMode.abreastMode,
 );
 
+/** 当前是否正在卷轴模式下使用自动缩放值 */
+export const isUseAutoScale = createRootMemo(
+  () =>
+    isScrollMode() && typeof store.option.scrollMode.adjustToWidth === 'number',
+);
+
 /** 当前是否开启了识别背景色 */
 export const isEnableBg = createRootMemo(
   () =>
diff --git a/src/components/Manga/actions/memo/scrollMode.ts b/src/components/Manga/actions/memo/scrollMode.ts
@@ -27,7 +27,7 @@ export const pageHeightList = createRootMemo(() => {
     if (!targetImg) throw new Error('找不到图片');
     if (
       targetImg.size.width < doubleWidth &&
-      !store.option.scrollMode.fitToWidth
+      store.option.scrollMode.adjustToWidth === 'disable'
     )
       return targetImg.size.height;
     return targetImg.size.height * (doubleWidth / targetImg.size.width);
diff --git a/src/components/Manga/actions/operate.ts b/src/components/Manga/actions/operate.ts
@@ -16,12 +16,8 @@ import {
   setAbreastScrollFill,
 } from './memo';
 import { handleTrackpadWheel } from './pointer';
-import {
-  constantScroll,
-  scrollBy,
-  scrollTo,
-  zoomScrollModeImg,
-} from './scroll';
+import { constantScroll, scrollBy, scrollTo } from './scroll';
+import { handleScrollModeZoom } from './scrollMode';
 import {
   switchAutoScroll,
   switchDir,
@@ -354,8 +350,7 @@ export const handleWheel = (e: WheelEvent) => {
     store.option.zoom.ratio === 100
   ) {
     e.preventDefault();
-    if (store.option.scrollMode.fitToWidth) return;
-    return zoomScrollModeImg(isWheelDown ? -0.05 : 0.05);
+    return handleScrollModeZoom(isWheelDown ? 'sub' : 'add');
   }
 
   if (e.ctrlKey || e.altKey) {
diff --git a/src/components/Manga/actions/scroll.ts b/src/components/Manga/actions/scroll.ts
@@ -1,7 +1,7 @@
 import { AnimationFrame, clamp, inRange } from 'helper';
 
 import { refs, setState, store } from '../store';
-import { openScrollLock, setOption } from './helper';
+import { openScrollLock } from './helper';
 import {
   abreastArea,
   abreastColumnWidth,
@@ -152,19 +152,3 @@ export const jumpToImg = (index: number) => {
     state.gridMode = false;
   });
 };
-
-/** 在卷轴模式下进行缩放，并且保持滚动进度不变 */
-export const zoomScrollModeImg = (zoomLevel: number, set = false) => {
-  const jump = saveScrollProgress();
-  setOption((draftOption) => {
-    const newVal = set
-      ? zoomLevel
-      : store.option.scrollMode.imgScale + zoomLevel;
-    draftOption.scrollMode.imgScale = clamp(0.1, Number(newVal.toFixed(2)), 3);
-  });
-  jump();
-
-  // 并排卷轴模式下并没有一个明确直观的滚动进度，
-  // 也想不出有什么实现效果能和普通卷轴模式的效果一致,
-  // 所以就摆烂不管了，反正现在这样也已经能避免乱跳了
-};
diff --git a/src/components/Manga/actions/scrollMode.ts b/src/components/Manga/actions/scrollMode.ts
@@ -0,0 +1,48 @@
+import { clamp } from 'helper';
+
+import { store } from '../store';
+import { setOption } from './helper';
+import { isAbreastMode } from './memo';
+import { saveScrollProgress } from './scroll';
+
+/** 修改卷轴模式下图片的目标宽度 */
+export const setAdjustToWidth = (
+  val: number | ((oldVal: number) => number),
+) => {
+  if (typeof store.option.scrollMode.adjustToWidth !== 'number') return;
+
+  if (typeof val === 'function')
+    val = val(store.option.scrollMode.adjustToWidth);
+  if (Number.isNaN(val)) return;
+
+  setOption((draftOption) => {
+    const max = Math.ceil(store.rootSize.width);
+    draftOption.scrollMode.adjustToWidth = clamp(200, val, max);
+  });
+};
+
+/** 在卷轴模式下进行缩放，并且保持滚动进度不变 */
+export const setImgScale = (val: number | ((oldVal: number) => number)) => {
+  if (typeof val === 'function') val = val(store.option.scrollMode.imgScale);
+  if (Number.isNaN(val)) return;
+
+  const jump = saveScrollProgress();
+  setOption((draftOption) => {
+    draftOption.scrollMode.imgScale = clamp(0.1, Number(val.toFixed(2)), 3);
+  });
+  jump();
+
+  // 并排卷轴模式下并没有一个明确直观的滚动进度，
+  // 也想不出有什么实现效果能和普通卷轴模式的效果一致,
+  // 所以就摆烂不管了，反正现在这样也已经能避免乱跳了
+};
+
+/** 处理卷轴模式下的放大/缩小操作 */
+export const handleScrollModeZoom = (dir: 'add' | 'sub') => {
+  if (!store.option.scrollMode.enabled) return;
+  if (store.option.scrollMode.adjustToWidth === 'full') return;
+
+  if (store.option.scrollMode.adjustToWidth === 'disable' || isAbreastMode())
+    setImgScale(0.05 * (dir === 'add' ? 1 : -1));
+  else setAdjustToWidth((val) => val + 100 * (dir === 'add' ? 1 : -1));
+};
diff --git a/src/components/Manga/actions/switch.ts b/src/components/Manga/actions/switch.ts
@@ -4,7 +4,7 @@ import { updatePageData } from './image';
 import { updateImgLoadType } from './imageLoad';
 import { handleImgRecognition } from './imageRecognition';
 import { activeImgIndex, autoPageNum, nowFillIndex, pageNum } from './memo';
-import { jumpToImg, saveScrollProgress } from './scroll';
+import { jumpToImg } from './scroll';
 import { zoom } from './zoom';
 
 /** 切换页面填充 */
@@ -78,15 +78,6 @@ export const switchGridMode = () => {
     });
 };
 
-/** 切换卷轴模式下图片适应宽度 */
-export const switchFitToWidth = () => {
-  const jump = saveScrollProgress();
-  setOption((draftOption) => {
-    draftOption.scrollMode.fitToWidth = !draftOption.scrollMode.fitToWidth;
-  });
-  jump();
-};
-
 /** 切换全屏 */
 export const switchFullscreen = () => {
   if (document.fullscreenElement) document.exitFullscreen();
diff --git a/src/components/Manga/components/ComicImgFlow.tsx b/src/components/Manga/components/ComicImgFlow.tsx
@@ -209,7 +209,6 @@ export const ComicImgFlow: Component = () => {
         data-hidden-mouse={
           !store.gridMode && store.option.autoHiddenMouse && hiddenMouse()
         }
-        data-fit-width={boolDataVal(store.option.scrollMode.fitToWidth)}
         on:mousemove={onMouseMove}
         onTransitionEnd={handleTransitionEnd}
         tabIndex={-1}
diff --git a/src/components/Manga/defaultButtonList.tsx b/src/components/Manga/defaultButtonList.tsx
diff --git a/src/components/Manga/defaultSettingList.tsx b/src/components/Manga/defaultSettingList.tsx
diff --git a/src/components/Manga/hooks/useCssVar.ts b/src/components/Manga/hooks/useCssVar.ts
diff --git a/src/components/Manga/store/option.ts b/src/components/Manga/store/option.ts

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export const pageHeightList = createRootMemo(() => {`
`27`	`27`	`if (!targetImg) throw new Error('找不到图片');`
`28`	`28`	`if (`
`29`	`29`	`targetImg.size.width < doubleWidth &&`
`30`		`- !store.option.scrollMode.fitToWidth`
	`30`	`+ store.option.scrollMode.adjustToWidth === 'disable'`
`31`	`31`	`)`
`32`	`32`	`return targetImg.size.height;`
`33`	`33`	`return targetImg.size.height * (doubleWidth / targetImg.size.width);`