feat(monkey): optimize copymanga detail layout and split storage modules

Author: Arylo

etc/build/monkey.const.ts

@@ -12,7 +12,7 @@ export const bannerOrderMap = {
     'icon64',
     'icon64URL',
     'version',
-    'author'
+    'author',
   ],
   tail: [
     'homepage',
@@ -23,7 +23,7 @@ export const bannerOrderMap = {
     'downloadURL',
     'updateURL',
     'run-at',
-    'grant'
+    'grant',
   ],
 }
 

src/monkey/copymanga-enhance/scripts/detail/newPage/component/App/style.css

@@ -1,6 +1,7 @@
 :root {
   --header-height: 30px;
   --body-height: calc(100dvh - var(--header-height));
+  --image-group-padding: calc(var(--body-height) / 6 * 5);
 }
 
 #app {

src/monkey/copymanga-enhance/scripts/detail/newPage/component/AppBody/index.ts

@@ -1,168 +1,50 @@
 import GM_addStyle from "../../../../../../polyfill/GM_addStyle";
 import cc from 'classcat'
-import { ACTION_GRID_MAP, DirectionMode, PageType } from "../../constant";
+import { ACTION_GRID_MAP, DirectionMode } from "../../constant";
 import useDirectionMode from "../../hooks/useDirectionMode";
-import useImageInfoMap from "../../hooks/useImageInfoMap";
-import useImageList from "../../hooks/useImageList";
-import useWhitePage from "../../hooks/useWhitePage";
-import { defineComponent, onMounted, unref, h, watch, ref, computed } from "../../vue";
-import Image from "../Image";
+import { defineComponent, onMounted, unref, h, ref, watch } from "../../vue";
 import css from './style.css'
-import WhitePage from '../WhitePage';
-import flow from "../../../../../../utils/flow";
 import useMouseGrid from "../../hooks/useMouseGrid";
-import ImageGroup, { ImageItem } from "../ImageGroup";
+import ImageGroup from "../ImageGroup";
 import useTtbColumn from "../../hooks/useTtbColumn";
+import useImageList from "../../hooks/useImageList";
+import useImageWidth from "../../hooks/useImageWidth";
+import debounce from "../../../../utils/debounce";
+import { useWindowSize } from "../../hooks/useWindowSize";
 
 export default defineComponent({
   setup () {
-    const [whitePageRef] = useWhitePage()
-    const [directionModeRef] = useDirectionMode()
-    const imageListRef = useImageList()
-    const infoMapRef = useImageInfoMap()
     onMounted(() => {
       GM_addStyle(css)
-      refresh()
     })
-    watch(whitePageRef, () => refresh())
-    watch(directionModeRef, () => refresh())
-    watch(imageListRef, () => refresh())
-    watch(infoMapRef, () => refresh())
-    const onLoaded = () => {
-      refresh()
-    }
-    const parseImages = (urls: readonly string[] = []): ImageItem[] => {
-      const infoMap = unref(infoMapRef)
-      return urls
-        .map((src, index) => {
-          const info = infoMap[index]
-          const pageType: PageType = info && info.type === PageType.LANDSCAPE ? PageType.LANDSCAPE : PageType.PORTRAIT
-          return {
-            component: Image,
-            props: {
-              src,
-              onLoaded,
-              key: `image-${index}`,
-              pageType,
-            },
-          }
-        })
-    }
-    const addFirstWhitePage = (list: ImageItem[]): ImageItem[] => {
-      if (list.length === 0) return list
-      if (!unref(whitePageRef)) return list
-      if (![DirectionMode.RTL, DirectionMode.LTR].includes(unref(directionModeRef))) return list
-
-      let anchorIndex = -1
-      for (let index = 0; index < list.length; index++) {
-        const { props } = list[index]
-        if (props.pageType === PageType.LANDSCAPE) {
-          anchorIndex = -1
-          continue
-        }
-        if (anchorIndex === -1) {
-          anchorIndex = index
-          continue
-        }
-        if (index - anchorIndex > 2) {
-          list.splice(anchorIndex, 0, {
-            component: WhitePage,
-            props: { key: `white-page-${anchorIndex}`, class: 'manual', pageType: PageType.PORTRAIT },
-          })
-          break
-        }
-      }
-      return list
-    }
-    const injectWhitePages = (list: ImageItem[]): ImageItem[] => {
-      if (list.length === 0) return list
-      if (![DirectionMode.RTL, DirectionMode.LTR].includes(unref(directionModeRef))) return list
+    const [imagesRef] = useImageList()
+    const [directionModeRef] = useDirectionMode()
+    const [mouseGridRef] = useMouseGrid()
+    const [imageWidthRef] = useImageWidth()
+    const [ttbColumnRef] = useTtbColumn()
+    const { width: windowWidthRef } = useWindowSize()
 
-      const tempList: ImageItem[][] = []
-      for (let index = 0; index < list.length; index++) {
-        const { props: { pageType } } = list[index]
-        let lastGroupPageType = tempList.length > 0 ? tempList[tempList.length - 1][0].props.pageType : null
-        if (pageType !== lastGroupPageType) {
-          tempList.push([])
-        }
-        tempList[tempList.length - 1].push(list[index])
-      }
-      for (let groupIndex = 0; groupIndex < tempList.length; groupIndex++) {
-        const group = tempList[groupIndex]
-        if (group[0].props.pageType === PageType.LANDSCAPE) continue
-        if (group.length % 2 === 0) continue
-        group.push({
-          component: WhitePage,
-          props: { key: `white-page-group-${groupIndex}`, class: 'auto', pageType: PageType.PORTRAIT },
-        })
-      }
-      if (
-        tempList[tempList.length - 1][0].props.pageType === PageType.PORTRAIT &&
-        tempList[tempList.length - 1].length % 4 !== 0
-      ) {
-        const groupIndex = tempList.length - 1
-        const group = tempList[groupIndex]
-        Array.from({ length: 4 - (group.length % 4) }).forEach((_, index) => {
-          group.push({
-            component: WhitePage,
-            props: { key: `white-page-group-${groupIndex + index}-end`, class: 'auto end', pageType: PageType.PORTRAIT },
-          })
-        })
+    const imageGroupHeightRef = ref(0)
+    const imageGroupRef = ref<InstanceType<typeof ImageGroup> | null>(null)
+    const refreshImageGroupHeight = debounce(() => {
+      const list = Array.from<HTMLElement>(unref(imageGroupRef)?.$el.children ?? [])
+      const height = list.reduce((acc, child) => acc + child.clientHeight, 0)
+      imageGroupHeightRef.value = height
+    }, 50)
+    watch(
+      [
+        imagesRef,
+        directionModeRef,
+        ttbColumnRef,
+        imageGroupRef,
+        imageWidthRef,
+        windowWidthRef,
+      ], () => {
+        if (DirectionMode.TTB !== unref(directionModeRef)) return
+        refreshImageGroupHeight()
       }
-      return tempList.flat();
-    }
-    const injectDataIndex = (list: ImageItem[]): ImageItem[] => {
-      let portraitCount = 0
-      return list.map((item, index) => {
-        let targetIndex = index + 1
-        let side = 'A'
-        if (item.props.pageType === PageType.LANDSCAPE) {
-          portraitCount = 0
-          side = 'A'
-        } else {
-          portraitCount++
-          if (DirectionMode.RTL === unref(directionModeRef)) {
-            if (portraitCount % 2 === 0) {
-              targetIndex -= 1
-            } else {
-              targetIndex += 1
-            }
-            side = portraitCount % 2 === 1 ? 'R' : 'L'
-          }
-          if (DirectionMode.LTR === unref(directionModeRef)) {
-            side = portraitCount % 2 === 1 ? 'L' : 'R'
-          }
-        }
-        return ({
-          ...item,
-          props: {
-            ...item.props,
-            'data-index': targetIndex,
-            'data-side': side,
-          },
-        })
-      })
-    }
-    const imagesRef = ref<ImageItem[]>([])
-    const refresh = () => {
-      const list = flow(
-        unref(imageListRef),
-        parseImages,
-        addFirstWhitePage,
-        injectWhitePages,
-        injectDataIndex
-      )
-      imagesRef.value = list
-    }
+    )
 
-    const [mouseGridRef] = useMouseGrid()
-    const [ttbColumnRef] = useTtbColumn()
-    const avgImageHalfHeightRef = computed(() => {
-      const totalHeight = infoMapRef.value.map((info) => info ? info.height : 0)
-        .reduce((a, b) => a + b, 0)
-      const total = unref(imageListRef).length
-      return Math.ceil((total > 0 ? totalHeight / total : 0) / 2)
-    })
     return () => h(
       'div',
       {
@@ -178,50 +60,56 @@ export default defineComponent({
           {
             class: cc([
               'direction-wrapper',
+              'max-h-(--body-height)',
               'flex flex-row flex-wrap',
+              'overflow-x-hidden overflow-y-auto',
             ]),
           },
           [
             h(
               ImageGroup,
               {
                 class: cc([
+                  'ltr:hidden rtl:hidden',
+                  'overflow-hidden',
                   {
-                    'w-dvw': DirectionMode.TTB !== unref(directionModeRef),
-                    'basic-[50%]': DirectionMode.TTB === unref(directionModeRef) && unref(ttbColumnRef) === 2,
-                    'basic-[33%]': DirectionMode.TTB === unref(directionModeRef) && unref(ttbColumnRef) === 3,
-                  },
+                    'hidden': unref(ttbColumnRef) === 1 || unref(ttbColumnRef) === 2,
+                    'basic-[33%]': unref(ttbColumnRef) === 3,
+                  }
                 ]),
                 images: unref(imagesRef),
+                style: `height: ${unref(imageGroupHeightRef)}px`,
               },
             ),
             h(
               ImageGroup,
               {
                 class: cc([
                   'ltr:hidden rtl:hidden',
+                  'overflow-hidden',
                   {
                     'hidden': unref(ttbColumnRef) === 1,
                     'basic-[50%]': unref(ttbColumnRef) === 2,
                     'basic-[33%]': unref(ttbColumnRef) === 3,
                   },
                 ]),
-                style: `margin-top: -${avgImageHalfHeightRef.value}px;`,
                 images: unref(imagesRef),
+                style: `height: ${unref(imageGroupHeightRef)}px`,
               },
             ),
             h(
               ImageGroup,
               {
                 class: cc([
-                  'ltr:hidden rtl:hidden',
                   {
-                    'hidden': unref(ttbColumnRef) === 1 || unref(ttbColumnRef) === 2,
-                    'basic-[33%]': unref(ttbColumnRef) === 3,
-                  }
+                    'w-dvw': DirectionMode.TTB !== unref(directionModeRef),
+                    'flex': unref(ttbColumnRef) === 1,
+                    'basic-[50%]': DirectionMode.TTB === unref(directionModeRef) && unref(ttbColumnRef) === 2,
+                    'basic-[33%]': DirectionMode.TTB === unref(directionModeRef) && unref(ttbColumnRef) === 3,
+                  },
                 ]),
-                style: `margin-top: -${avgImageHalfHeightRef.value * 2}px;`,
                 images: unref(imagesRef),
+                ref: imageGroupRef,
               },
             ),
           ],

src/monkey/copymanga-enhance/scripts/detail/newPage/component/AppBody/style.css

@@ -1,11 +1,11 @@
-.direction-wrapper {
-  max-height: var(--body-height);
-  overflow-y: scroll;
+.direction-wrapper > *:nth-child(1) {
+  --image-group-padding-1: calc(var(--image-group-padding) * 2);
+  padding-top: var(--image-group-padding-1);
 }
 
-.wrapper {
-  flex-basis: 100%;
-  justify-content: center;
+.direction-wrapper > *:nth-child(2) {
+  --image-group-padding-2: calc(var(--image-group-padding) * 1);
+  padding-top: var(--image-group-padding-2);
 }
 
 /* #region 单列时 */

src/monkey/copymanga-enhance/scripts/detail/newPage/component/AppHeader/index.ts

@@ -3,7 +3,7 @@ import GM_addStyle from "../../../../../../polyfill/GM_addStyle";
 import { DirectionMode } from "../../constant";
 import useDirectionMode from "../../hooks/useDirectionMode";
 import useImageInfoMap from "../../hooks/useImageInfoMap";
-import useImageList from "../../hooks/useImageList";
+import useRawImageList from "../../hooks/useRawImageList";
 import usePageInfo from "../../hooks/usePageInfo";
 import useWhitePage from "../../hooks/useWhitePage";
 import { defineComponent, onMounted, unref, computed, h, Fragment } from "../../vue";
@@ -22,10 +22,10 @@ export default defineComponent({
     const titleUrlRef = computed(() => unref(pageInfoRef).menuUrl)
     const prevUrlRef = computed(() => unref(pageInfoRef).prevUrl)
     const nextUrlRef = computed(() => unref(pageInfoRef).nextUrl)
-    const imageListRef = useImageList()
+    const rawImageListRef = useRawImageList()
     const imageInfoMapRef = useImageInfoMap()
     const loadingStatusRef = computed(() => {
-      const total = unref(imageListRef).length
+      const total = unref(rawImageListRef).length
       const loaded = unref(imageInfoMapRef).filter(info => info).length
       return {
         total,

src/monkey/copymanga-enhance/scripts/detail/newPage/component/Image/index.ts

@@ -1,7 +1,7 @@
 import { DirectionMode, PageType } from "../../constant";
 import useDirectionMode from "../../hooks/useDirectionMode";
 import useImageInfoMap from "../../hooks/useImageInfoMap";
-import useImageList from "../../hooks/useImageList";
+import useRawImageList from "../../hooks/useRawImageList";
 import useImageWidth from "../../hooks/useImageWidth";
 import { defineComponent, h, ref, unref } from "../../vue";
 
@@ -14,12 +14,12 @@ export default defineComponent({
   },
   setup (props, { emit }) {
     const pageType = ref(PageType.PORTRAIT)
-    const imageListRef = useImageList()
+    const rawImageListRef = useRawImageList()
     const imageInfoMapRef = useImageInfoMap()
     const [directionModeRef] = useDirectionMode()
     const [imageWidthRef] = useImageWidth()
     const onLoad = (e: Event) => {
-      const index = unref(imageListRef).indexOf(props.src)
+      const index = unref(rawImageListRef).indexOf(props.src)
       const element = e.target as HTMLImageElement
       const [width, height] = [element.naturalWidth, element.naturalHeight]
       const type = width > height ? PageType.LANDSCAPE : PageType.PORTRAIT