fix(mangacopy): fixed logic of displaying white page and landscape image

Author: Arylo

src/monkey/copymanga-enhance/scripts/new-vue-mixin/image.ts

@@ -30,14 +30,19 @@ const ImageMixin = (info: PageInfo) => ({
       const that = (this as any)
       const rawImageList: string[] = that.images || []
       const curList = rawImageList.map((imageUrl, index) => ({ index, url: imageUrl, type: that.imageInfos[index]?.type ?? PageType.LOADING }))
-      const hasWhitePage = that.canWhitePage
+      const hasWhitePage = that.hasWhitePage
       let useWhitePage = !hasWhitePage
       const groups: any[][] = []
       function addImage (obj: any) {
         if (
+          // First image group
           groups.length === 0 ||
+          // Last image group is full
           groups[groups.length - 1].length === 2 ||
-          groups[groups.length - 1][0].type === PageType.LANDSCAPE
+          // Last image group has a landscape image
+          groups[groups.length - 1][0].type === PageType.LANDSCAPE ||
+          // Last image group has a some site but the current image is landscape
+          groups[groups.length - 1].length === 1 && obj.type === PageType.LANDSCAPE
         ) groups.push([])
         groups[groups.length - 1].push(obj)
       }

src/monkey/copymanga-enhance/style.css

@@ -51,12 +51,27 @@
 #app .images {
   width: 100vw;
   justify-content: space-evenly;
+  column-gap: 10px;
+}
+
+#app .images > div {
+  min-width: calc((100% - 10px) / 4);
+}
+
+#app .images > div:has(.landscape),
+#app .images > div:has(.portrait + .portrait),
+#app .images > div:has(.white_page + .portrait) {
+  min-width: calc((100% - 10px) / 2);
 }
 
 #app .images.rtl > div {
   flex-direction: row-reverse;
 }
 
+#app .images.rtl img, #app .images.ltr img {
+  height: 100%;
+}
+
 #app .images div > div {
   height: var(--image-max-height);
 }