feat(monkey): pad trailing white pages and refine column layout

Author: Arylo

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

@@ -97,6 +97,19 @@ export default defineComponent({
           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 },
+          })
+        })
+      }
       return tempList.flat();
     }
     const injectDataIndex = (list: ImageItem[]): ImageItem[] => {

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

@@ -11,27 +11,30 @@
   display: flex;
   flex-basis: 100%;
   justify-content: center;
-  padding-top: 1px;
-  padding-bottom: 1px;
   order: attr(data-index number)
 }
 
 :is(.ltr, .rtl).direction-wrapper {
   scroll-snap-type: y mandatory;
 }
 :is(.ltr, .rtl) .wrapper {
+  height: var(--body-height);
   scroll-snap-align: center;
 }
 
-/* #region 单行时 */
+*:not(:is(.ltr, .rtl)) > .wrapper:has(> .white-page) {
+  display: none;
+}
+
+/* #region 单列时 */
 @media (max-aspect-ratio: 5 / 3) {
   .wrapper:has(> .white-page) {
     display: none;
   }
 }
-/* #endregion 单行时 */
+/* #endregion 单列时 */
 
-/* #region 多行时 */
+/* #region 多列时 */
 @media (min-aspect-ratio: 5 / 3) {
   :is(.ltr, .rtl) .wrapper:has(> .portrait) {
     flex-basis: 50%;
@@ -47,10 +50,22 @@
     padding-right: 5px;
   }
 }
+/* #endregion 多列时 */
+
+/* #region 两列时 */
+@media (min-aspect-ratio: 5 / 3) and (max-aspect-ratio: 9 / 3) {
+  :is(.ltr, .rtl) .wrapper:has(> .white-page):nth-last-child(2),
+  :is(.ltr, .rtl) .wrapper:has(> .white-page):nth-last-child(2) + .wrapper:has(> .white-page) {
+    display: none;
+  }
+}
+/* #endregion 两列时 */
+
+/* #region 四列时 */
 @media (min-aspect-ratio: 9 / 3) {
   :is(.ltr, .rtl) .wrapper:has(> .portrait) {
     flex-basis: 25%;
   }
 }
-/* #endregion 多行时 */
+/* #endregion 四列时 */