fix: 🐛 修复 bug

hymbz · Jun 25, 2024 · 9422b03 · 9422b03
1 parent 926419d
commit 9422b03
Showing 11 changed files with 18 additions and 17 deletions.
diff --git a/docs/.other/Dev.md b/docs/.other/Dev.md
@@ -1,7 +1,5 @@
 ## TODO
 
-- 卷轴模式优化
-  <!-- https://sleazyfork.org/zh-CN/scripts/374903-comicread/discussions/237728 -->
 
 ## 调试
 

diff --git a/src/components/Manga/actions/abreastScroll.ts b/src/components/Manga/actions/abreastScroll.ts
@@ -18,9 +18,9 @@ interface Area {
 }
 
 /** 并排卷轴模式下的每列布局 */
-export const abreastArea = createThrottleMemo<Area>(
+export const abreastArea = createRootMemo<Area>(
   (prev): Area => {
-    if (!store.option.scrollMode.enabled) return prev!;
+    if (!store.option.scrollMode.enabled) return prev;
 
     const columns: number[][] = [[]];
     const position: Area['position'] = {};
@@ -91,7 +91,6 @@ export const abreastArea = createThrottleMemo<Area>(
 
     return { columns, position, length };
   },
-  100,
   { columns: [], position: {}, length: 0 },
 );
 

diff --git a/src/components/Manga/actions/imageLoad.ts b/src/components/Manga/actions/imageLoad.ts
@@ -80,7 +80,7 @@ const loadImg = (index: number) => {
  */
 const loadPageImg = (target = 0, loadNum = 2) => {
   const load = (i: number) => {
-    loadImg(i);
+    for (const index of store.pageList[i]) loadImg(index);
     if (loadImgList.size >= loadNum) {
       setLoadLock(true);
       return true;
@@ -146,6 +146,7 @@ createEffectOn(
     () => store.imgList,
     () => store.activePageIndex,
     () => store.option.alwaysLoadAllImg,
+    () => store.showRange,
   ],
   updateImgLoadType,
 );
diff --git a/src/components/Manga/actions/imageSize.ts b/src/components/Manga/actions/imageSize.ts
@@ -56,7 +56,8 @@ createEffectOn(
     () => store.option.scrollMode.fitToWidth,
     () => store.option.scrollMode.imgScale,
     () => store.imgList,
-    () => store.rootSize,
+    () => store.rootSize.width,
+    () => store.rootSize.height,
     placeholderSize,
   ],
   ([isScrollMode]) => {

diff --git a/src/components/Manga/actions/imageType.ts b/src/components/Manga/actions/imageType.ts
@@ -99,8 +99,8 @@ export const updateImgType = (state: State, i: number) => {
 
 // 处理显示窗口的长宽变化
 createEffectOn(
-  () => store.rootSize,
-  ({ width, height }) =>
+  [() => store.rootSize.width, () => store.rootSize.height],
+  ([width, height]) =>
     setState((state) => {
       state.proportion.单页比例 = Math.min(width / 2 / height, 1);
       state.proportion.横幅比例 = width / height;

diff --git a/src/components/Manga/actions/memo/observer.ts b/src/components/Manga/actions/memo/observer.ts
@@ -32,6 +32,6 @@ export const bindScrollTop = (dom: HTMLElement) => {
 
 // 窗口宽度小于800像素时，标记为移动端
 createEffectOn(
-  () => store.rootSize,
-  ({ width }) => _setState('isMobile', inRange(1, width, 800)),
+  () => store.rootSize.width,
+  (width) => _setState('isMobile', inRange(1, width, 800)),
 );
diff --git a/src/components/Manga/actions/renderPage.ts b/src/components/Manga/actions/renderPage.ts
@@ -19,6 +19,7 @@ const findTopImg = (top: number, initIndex = 0) => {
   return imgTopList().length - 1;
 };
 
+/** 获取并排卷轴模式下指定列的指定图片 */
 const getAbreastColumnImg = (column: number, img: number) => {
   const { columns } = abreastArea();
   return columns[clamp(0, column, columns.length - 1)]?.at(img) ?? 0;
@@ -77,7 +78,8 @@ createEffectOn(
     () => store.option.scrollMode.enabled,
     () => store.activePageIndex,
     () => store.option.scrollMode.abreastMode,
-    () => store.rootSize,
+    () => store.rootSize.width,
+    () => store.rootSize.height,
     abreastShowColumn,
     scrollTop,
   ],

diff --git a/src/components/Manga/defaultButtonList.tsx b/src/components/Manga/defaultButtonList.tsx
@@ -60,7 +60,7 @@ export const defaultButtonList: ToolbarButtonList = [
           ? t('button.page_mode_single')
           : t('button.page_mode_double')
       }
-      hidden={isOnePageMode()}
+      hidden={store.isMobile || store.option.scrollMode.enabled}
       onClick={switchOnePageMode}
       children={store.option.onePageMode ? <MdLooksOne /> : <MdLooksTwo />}
     />

diff --git a/src/components/Manga/display.tsx b/src/components/Manga/display.tsx
@@ -149,7 +149,7 @@ export default function DisplayManga() {
       ...Array.from<string[]>({ length: count }).fill(arr),
     );
 
-  const _imgList = duplicateArray(imgList[2], 1);
+  const _imgList = duplicateArray(imgList[0], 1);
   log.warn('个数', _imgList.length);
 
   return <Manga imgList={_imgList} onExit={onExit} option={option} />;

diff --git a/src/components/Manga/store/index.ts b/src/components/Manga/store/index.ts
@@ -14,7 +14,8 @@ export const { store, setState, _state, _setState } = useStore({
   ...OtherState,
 });
 
-// unsafeWindow.store = store;
+// (window?.unsafeWindow ?? window).store = store;
+// (window?.unsafeWindow ?? window)._setState = _setState;
 
 export type State = typeof _state;
 

diff --git a/src/helper/useSiteOptions.ts b/src/helper/useSiteOptions.ts
@@ -45,7 +45,6 @@ export const useSiteOptions = async <T = Record<string, any>>(
 
   const setOptions = async (newValue: Partial<SaveOptions>) => {
     Object.assign(options, newValue);
-
     // 只保存和默认设置不同的部分
     return GM.setValue(name, difference(options, _defaultOptions));
   };
@@ -54,7 +53,7 @@ export const useSiteOptions = async <T = Record<string, any>>(
 
   const isStored = saveOptions !== undefined;
   // 如果当前站点没有存储配置，就补充上去
-  if (!isStored) await GM.setValue(name, options);
+  if (!isStored) await GM.setValue(name, {});
 
   return {
     /** 站点配置 */