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 { /** 站点配置 */