修改配置结构

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ComicRead",
-  "version": "8.10.5",
+  "version": "9.0.0",
   "description": "",
   "author": "hymbz",
   "license": "AGPL-3.0-or-later",

rollup.config.ts

@@ -177,9 +177,11 @@ shell.rm('-rf', resolve(__dirname, 'dist/*'));
           if (id.includes('node_modules')) return null;
           let newCode = code;
           newCode = newCode.replace('isDevMode', 'true');
-          // 将 vite 不支持的 rollup-plugin-styles 相关 css 导出代码删除
-          newCode = newCode.replace(', { css as style }', '');
-          newCode = newCode.replace(/\n.+?Style = style;\n/, '');
+          // 将 rollup-plugin-styles 格式转换成 vite 支持的格式
+          newCode = newCode.replace(
+            /, { css as style }( from '(.+?)';)/,
+            `$1\nimport style from '$2?inline';`,
+          );
           return newCode;
         },
       },

src/components/Manga/actions/image.ts

@@ -63,8 +63,8 @@ export const zoomScrollModeImg = (zoomLevel: number, set = false) => {
   setOption((draftOption) => {
     const newVal = set
       ? zoomLevel
-      : store.option.scrollModeImgScale + zoomLevel;
-    draftOption.scrollModeImgScale = clamp(0.1, Number(newVal.toFixed(2)), 3);
+      : store.option.scrollMode.imgScale + zoomLevel;
+    draftOption.scrollMode.imgScale = clamp(0.1, Number(newVal.toFixed(2)), 3);
   });
 
   // 在卷轴模式下缩放时保持滚动进度不变

src/components/Manga/actions/imageSize.ts

@@ -94,7 +94,7 @@ export const updateImgSize = (i: number, width: number, height: number) => {
           if (comicImg.loadType === 'wait' && comicImg.type === '')
             state.imgList[index].type = 'vertical';
         });
-        state.option.scrollMode = true;
+        state.option.scrollMode.enabled = true;
         state.flag.autoScrollMode = true;
         isEdited = true;
         break;

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

@@ -9,7 +9,7 @@ import { rootSize } from './observer';
 export const isOnePageMode = createRootMemo(
   () =>
     store.option.onePageMode ||
-    store.option.scrollMode ||
+    store.option.scrollMode.enabled ||
     store.isMobile ||
     store.imgList.length <= 1,
 );
@@ -63,27 +63,27 @@ export const placeholderSize = createThrottleMemo(
 
 /** 每张图片的高度 */
 export const imgHeightList = createRootMemo(() =>
-  store.option.scrollMode
+  store.option.scrollMode.enabled
     ? store.imgList.map((img) => {
         let height = img.height ?? placeholderSize().height;
         const width = img.width ?? placeholderSize().width;
-        if (store.option.scrollModeFitToWidth)
+        if (store.option.scrollMode.fitToWidth)
           return height * (rootSize().width / width);
         if (width > rootSize().width) height *= rootSize().width / width;
-        return height * store.option.scrollModeImgScale;
+        return height * store.option.scrollMode.imgScale;
       })
     : [],
 );
 
 /** 卷轴模式下每张图片的位置 */
 export const imgTopList = createRootMemo(() => {
-  if (!store.option.scrollMode) return [];
+  if (!store.option.scrollMode.enabled) return [];
 
   const list = Array.from<number>({ length: imgHeightList().length });
   let top = 0;
   for (let i = 0; i < imgHeightList().length; i++) {
     list[i] = top;
-    top += imgHeightList()[i] + store.option.scrollModeSpacing * 7;
+    top += imgHeightList()[i] + store.option.scrollMode.spacing * 7;
   }
 
   return list;

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

@@ -87,7 +87,7 @@ export const bindScrollTop = (dom: HTMLElement) => {
 createRoot(() => {
   // 卷轴模式下，将当前显示的第一页作为当前页
   createEffectOn(showPageList, ([firstPage]) => {
-    if (!store.gridMode && store.option.scrollMode)
+    if (!store.gridMode && store.option.scrollMode.enabled)
       _setState('activePageIndex', firstPage ?? 0);
   });
 

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

@@ -24,7 +24,7 @@ export const updateRenderRange = (state: State) => {
   let startPage: number | undefined;
   let endPage: number | undefined;
 
-  if (state.option.scrollMode) {
+  if (state.option.scrollMode.enabled) {
     if (contentHeight() === 0) {
       startPage = 0;
       endPage = 1;
@@ -50,7 +50,7 @@ export const updateRenderRange = (state: State) => {
 
 createRoot(() => {
   createEffectOn(
-    () => store.option.scrollModeImgScale,
+    () => store.option.scrollMode.imgScale,
     () => setState(updateRenderRange),
   );
 

src/components/Manga/actions/operate.ts

@@ -27,7 +27,7 @@ export const focus = () =>
   });
 
 export const handleMouseDown: EventHandler['on:mousedown'] = (e) => {
-  if (e.button !== 1 || store.option.scrollMode) return;
+  if (e.button !== 1 || store.option.scrollMode.enabled) return;
   e.stopPropagation();
   e.preventDefault();
   switchFillEffect();
@@ -87,7 +87,10 @@ export const handleKeyDown = (e: KeyboardEvent) => {
   }
 
   // 卷轴、网格模式下跳过用于移动的按键
-  if ((store.option.scrollMode || store.gridMode) && !store.show.endPage) {
+  if (
+    (store.option.scrollMode.enabled || store.gridMode) &&
+    !store.show.endPage
+  ) {
     switch (e.key) {
       case 'Home':
       case 'End':
@@ -117,12 +120,12 @@ export const handleKeyDown = (e: KeyboardEvent) => {
 
   switch (hotkeysMap()[code]) {
     case 'turn_page_up': {
-      if (store.option.scrollMode) scrollModeScroll('prev');
+      if (store.option.scrollMode.enabled) scrollModeScroll('prev');
       return turnPage('prev');
     }
 
     case 'turn_page_down': {
-      if (store.option.scrollMode) scrollModeScroll('next');
+      if (store.option.scrollMode.enabled) scrollModeScroll('next');
       return turnPage('next');
     }
 
@@ -184,11 +187,11 @@ export const handleWheel = (e: WheelEvent) => {
   // 卷轴模式下的图片缩放
   if (
     (e.ctrlKey || e.altKey) &&
-    store.option.scrollMode &&
+    store.option.scrollMode.enabled &&
     store.zoom.scale === 100
   ) {
     e.preventDefault();
-    if (store.option.scrollModeFitToWidth) return;
+    if (store.option.scrollMode.fitToWidth) return;
     return zoomScrollModeImg(isWheelDown ? -0.1 : 0.1);
   }
 

src/components/Manga/actions/pointer.ts

@@ -59,7 +59,7 @@ export const handleGridClick = (e: MouseEvent) => {
     state.activePageIndex = pageNum;
     state.gridMode = false;
   });
-  if (store.option.scrollMode) scrollTo(imgTopList()[pageNum]);
+  if (store.option.scrollMode.enabled) scrollTo(imgTopList()[pageNum]);
 };
 
 /** 双击放大 */
@@ -198,7 +198,7 @@ export const handleTrackpadWheel = (e: WheelEvent) => {
     lastWheel = now;
   }
 
-  if (store.option.scrollMode) {
+  if (store.option.scrollMode.enabled) {
     if (
       time > 200 &&
       ((isTop(store) && e.deltaY < 0) || (isBottom(store) && e.deltaY > 0))

src/components/Manga/actions/scrollbar.ts

@@ -14,14 +14,14 @@ export const scrollLength = _scrollLength;
 
 /** 滚动条滑块长度 */
 export const sliderHeight = createRootMemo(() =>
-  store.option.scrollMode
+  store.option.scrollMode.enabled
     ? rootSize().height / contentHeight()
     : 1 / store.pageList.length,
 );
 
 /** 滚动条滑块高度 */
 export const sliderTop = createRootMemo(() =>
-  store.option.scrollMode
+  store.option.scrollMode.enabled
     ? scrollTop() / contentHeight()
     : (1 / store.pageList.length) * store.activePageIndex,
 );
@@ -90,7 +90,7 @@ export const handlescrollbarSlider: UseDrag = ({ type, xy, initial }, e) => {
   /** 点击位置在滚动条上的位置比率 */
   const clickTop = getClickTop(x, y, e.target as HTMLElement);
 
-  if (store.option.scrollMode) {
+  if (store.option.scrollMode.enabled) {
     if (type === 'move') {
       scrollTo(
         clamp(0, startTop + getSliderDist(xy, initial, scrollbarDom), 1) *

src/components/Manga/actions/show.ts

@@ -15,7 +15,7 @@ export const resetPage = (state: State, animation = false) => {
   state.page.offset.x.pct = 0;
   state.page.offset.y.pct = 0;
 
-  if (state.option.scrollMode) {
+  if (state.option.scrollMode.enabled) {
     state.page.anima = '';
     return;
   }
@@ -56,7 +56,7 @@ export const getPageTip = (pageIndex: number): string => {
     | [string]
     | [string, string];
   if (store.option.dir === 'rtl') pageIndexText.reverse();
-  return pageIndexText.join(store.option.scrollMode ? '\n' : ' | ');
+  return pageIndexText.join(store.option.scrollMode.enabled ? '\n' : ' | ');
 };
 
 createRoot(() => {
@@ -103,7 +103,7 @@ createRoot(() => {
   );
 
   createEffectOn(
-    () => store.option.scrollModeImgScale,
+    () => store.option.scrollMode.imgScale,
     () => setState(updateRenderRange),
   );
 });

src/components/Manga/actions/switch.ts

@@ -32,12 +32,13 @@ export const switchFillEffect = () => {
 export const switchScrollMode = () => {
   zoom(100);
   setOption((draftOption, state) => {
-    draftOption.scrollMode = !draftOption.scrollMode;
-    draftOption.onePageMode = draftOption.scrollMode;
+    draftOption.scrollMode.enabled = !draftOption.scrollMode.enabled;
+    draftOption.onePageMode = draftOption.scrollMode.enabled;
     updatePageData(state);
   });
   // 切换到卷轴模式后自动定位到对应页
-  if (store.option.scrollMode) scrollTo(imgTopList()[store.activePageIndex]);
+  if (store.option.scrollMode.enabled)
+    scrollTo(imgTopList()[store.activePageIndex]);
 };
 
 /** 切换单双页模式 */
@@ -79,7 +80,7 @@ export const switchFitToWidth = () => {
   const height = contentHeight();
 
   setOption((draftOption) => {
-    draftOption.scrollModeFitToWidth = !draftOption.scrollModeFitToWidth;
+    draftOption.scrollMode.fitToWidth = !draftOption.scrollMode.fitToWidth;
   });
 
   // 滚回之前的位置

src/components/Manga/components/ComicImgFlow.tsx

@@ -44,7 +44,7 @@ export const ComicImgFlow: Component = () => {
     if (store.gridMode) return;
     if (touches.size > 1) return handlePinchZoom(state, e);
     if (store.zoom.scale !== 100) return handleZoomDrag(state, e);
-    if (store.option.scrollMode) return handleScrollModeDrag(state, e);
+    if (store.option.scrollMode.enabled) return handleScrollModeDrag(state, e);
     return handleMangaFlowDrag(state, e);
   };
 
@@ -96,7 +96,7 @@ export const ComicImgFlow: Component = () => {
       return areaList.map((line) => `"${line.join(' ')}"`).join('\n');
     }
 
-    if (store.option.scrollMode) return '';
+    if (store.option.scrollMode.enabled) return '';
 
     return store.page.vertical
       ? store.pageList
@@ -114,7 +114,7 @@ export const ComicImgFlow: Component = () => {
     '--zoom-x': () => `${store.zoom.offset.x}px`,
     '--zoom-y': () => `${store.zoom.offset.y}px`,
     '--page-x'() {
-      if (store.option.scrollMode) return '0px';
+      if (store.option.scrollMode.enabled) return '0px';
       const x = `${store.page.offset.x.pct * rootSize().width + store.page.offset.x.px}px`;
       return store.option.dir === 'rtl' ? x : `calc(${x} * -1)`;
     },
@@ -123,15 +123,15 @@ export const ComicImgFlow: Component = () => {
     'touch-action'() {
       if (store.gridMode) return 'auto';
       if (store.zoom.scale !== 100) {
-        if (!store.option.scrollMode) return 'none';
+        if (!store.option.scrollMode.enabled) return 'none';
         if (store.zoom.offset.y === 0) return 'pan-up';
         if (store.zoom.offset.y === bound.y()) return 'pan-down';
       }
 
-      if (store.option.scrollMode) return 'pan-y';
+      if (store.option.scrollMode.enabled) return 'pan-y';
     },
     height: () =>
-      !store.gridMode && store.option.scrollMode
+      !store.gridMode && store.option.scrollMode.enabled
         ? `${contentHeight()}px`
         : undefined,
     'grid-template-areas': gridAreas,
@@ -156,18 +156,18 @@ export const ComicImgFlow: Component = () => {
         class={`${classes.mangaFlow} ${classes.beautifyScrollbar}`}
         data-disable-zoom={boolDataVal(
           store.option.disableZoom ||
-            (!store.gridMode && store.option.scrollMode),
+            (!store.gridMode && store.option.scrollMode.enabled),
         )}
         data-scale-mode={boolDataVal(store.zoom.scale !== 100)}
         data-vertical={boolDataVal(store.page.vertical)}
         data-animation={store.page.anima}
         data-hidden-mouse={!store.gridMode && hiddenMouse()}
-        data-fit-width={boolDataVal(store.option.scrollModeFitToWidth)}
+        data-fit-width={boolDataVal(store.option.scrollMode.fitToWidth)}
         on:mousemove={onMouseMove}
         onTransitionEnd={handleTransitionEnd}
         style={style()}
       >
-        <Show when={store.option.scrollMode}>
+        <Show when={store.option.scrollMode.enabled}>
           <span style={{ height: `${scrollModeFill()}px`, 'flex-shrink': 0 }} />
         </Show>
         <For each={store.imgList} fallback={<EmptyTip />}>

src/components/Manga/components/CssVar.tsx

@@ -81,8 +81,8 @@ export const CssVar: Component = () => {
         store.option.customBackground ??
         (store.option.darkMode ? '#000' : '#fff')
       };
-      --scroll-mode-img-scale: ${store.option.scrollModeImgScale};
-      --scroll-mode-spacing: ${store.option.scrollModeSpacing};
+      --scroll-mode-img-scale: ${store.option.scrollMode.imgScale};
+      --scroll-mode-spacing: ${store.option.scrollMode.spacing};
 
       ${svg()}
       ${i18n()}

src/components/Manga/components/Scrollbar.tsx

@@ -33,7 +33,7 @@ export const Scrollbar: Component = () => {
       ref: refs.scrollbar,
       handleDrag: handlescrollbarSlider,
       easyMode: () =>
-        store.option.scrollMode && store.option.scrollbar.easyScroll,
+        store.option.scrollMode.enabled && store.option.scrollbar.easyScroll,
     });
   });
 
@@ -60,7 +60,7 @@ export const Scrollbar: Component = () => {
     }
 
     const tipList = showPageList().map((i) => getPageTip(i));
-    if (store.option.scrollMode || store.page.vertical)
+    if (store.option.scrollMode.enabled || store.page.vertical)
       return tipList.join('\n');
     if (store.option.dir === 'rtl') tipList.reverse();
     return tipList.join('   ');

src/components/Manga/components/ScrollbarPageStatus.tsx

@@ -20,7 +20,7 @@ const getScrollbarPage = (
   double = false,
 ): ScrollbarPageItem => {
   let num: number;
-  if (store.option.scrollMode) num = imgHeightList()[i];
+  if (store.option.scrollMode.enabled) num = imgHeightList()[i];
   else num = double ? 2 : 1;
 
   return {
@@ -35,7 +35,9 @@ const ScrollbarPage: Component<ScrollbarPageItem> = (props) => {
   const flexBasis = createMemo(
     () =>
       props.num /
-      (store.option.scrollMode ? contentHeight() : store.imgList.length),
+      (store.option.scrollMode.enabled
+        ? contentHeight()
+        : store.imgList.length),
   );
 
   return (
@@ -71,7 +73,7 @@ export const ScrollbarPageStatus = () => {
         !img.src === item.isNull &&
         img.translationType === item.translationType
       ) {
-        if (store.option.scrollMode) item.num += imgHeightList()[i];
+        if (store.option.scrollMode.enabled) item.num += imgHeightList()[i];
         else item.num += double ? 2 : 1;
       } else {
         list.push(item);

src/components/Manga/components/TouchArea.tsx

@@ -53,7 +53,7 @@ export const TouchArea: Component = () => (
     data-show={boolDataVal(store.show.touchArea)}
     data-area={areaType()}
     data-turn-page={boolDataVal(
-      store.option.clickPageTurn.enabled && !store.option.scrollMode,
+      store.option.clickPageTurn.enabled && !store.option.scrollMode.enabled,
     )}
   >
     <For each={areaArrayMap[areaType()]}>