diff --git a/docs/.other/Dev.md b/docs/.other/Dev.md
index 05cf6c8a..987eb3e4 100644
--- a/docs/.other/Dev.md
+++ b/docs/.other/Dev.md
@@ -1,7 +1,5 @@
## TODO
-- 卷轴模式优化
-
## 调试
diff --git a/src/components/Manga/actions/abreastScroll.ts b/src/components/Manga/actions/abreastScroll.ts
index 0ff19a44..d0152412 100644
--- a/src/components/Manga/actions/abreastScroll.ts
+++ b/src/components/Manga/actions/abreastScroll.ts
@@ -18,9 +18,9 @@ interface Area {
}
/** 并排卷轴模式下的每列布局 */
-export const abreastArea = createThrottleMemo(
+export const abreastArea = createRootMemo(
(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(
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
index 5ffc1858..1e4a2861 100644
--- 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
index 93e72505..479bfd1d 100644
--- 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
index eb94cf82..86aa9e06 100644
--- 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
index b9df60db..aa6110f4 100644
--- 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
index a72509f1..6576aa5e 100644
--- 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
index 33a900af..a674edd8 100644
--- 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 ? : }
/>
diff --git a/src/components/Manga/display.tsx b/src/components/Manga/display.tsx
index 389c3842..d58e13e3 100644
--- a/src/components/Manga/display.tsx
+++ b/src/components/Manga/display.tsx
@@ -149,7 +149,7 @@ export default function DisplayManga() {
...Array.from({ length: count }).fill(arr),
);
- const _imgList = duplicateArray(imgList[2], 1);
+ const _imgList = duplicateArray(imgList[0], 1);
log.warn('个数', _imgList.length);
return ;
diff --git a/src/components/Manga/store/index.ts b/src/components/Manga/store/index.ts
index 9e37b8ad..41ebfdff 100644
--- 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
index f8352197..98b4122a 100644
--- a/src/helper/useSiteOptions.ts
+++ b/src/helper/useSiteOptions.ts
@@ -45,7 +45,6 @@ export const useSiteOptions = async >(
const setOptions = async (newValue: Partial) => {
Object.assign(options, newValue);
-
// 只保存和默认设置不同的部分
return GM.setValue(name, difference(options, _defaultOptions));
};
@@ -54,7 +53,7 @@ export const useSiteOptions = async >(
const isStored = saveOptions !== undefined;
// 如果当前站点没有存储配置,就补充上去
- if (!isStored) await GM.setValue(name, options);
+ if (!isStored) await GM.setValue(name, {});
return {
/** 站点配置 */