feat(monkey): expand mouse interaction grid from 3x2 to 7x5

- Add GRID_COLUMN and GRID_ROW constants for 7x5 grid layout
- Extend ACTION_GRID_MAP to cover larger interaction areas
- Update useMouseWatcher to use new grid dimensions
- Improve grid layout documentation with visual representation

Author: Arylo

src/monkey/copymanga-enhance/scripts/newPage/constant.ts

@@ -11,7 +11,28 @@ export enum PageType {
   WHITE_PAGE = 'white_page',
 }
 
+/**
+ * ```markdown
+ * |1 |2 |3 |4 |5 |6 |7 |
+ * |8 |9 |10|11|12|13|14|
+ * |15|16|17|18|19|20|21|
+ * |22|23|24|25|26|27|28|
+ * |29|30|31|32|33|34|35|
+ * ```
+ */
+export const GRID_COLUMN = 7
+export const GRID_ROW = 5
 export const ACTION_GRID_MAP = {
-  PREV: [1, 3, 4],
-  NEXT: [6],
+  PREV: [
+    1, 2, 3, 4, 5, 6, 7,
+    8, 9, 10, 11, 12, 13, 14,
+    15, 16, 17,
+    22, 23, 24,
+    29, 30, 31,
+  ],
+  NEXT: [
+    19, 20, 21,
+    26, 27, 28,
+    33, 34, 35,
+  ],
 }

src/monkey/copymanga-enhance/scripts/newPage/hooks/useMouseWatcher.ts

@@ -1,4 +1,4 @@
-import { ACTION_GRID_MAP } from "../constant";
+import { ACTION_GRID_MAP, GRID_COLUMN, GRID_ROW } from "../constant";
 import { onMounted, readonly, ref, unref } from "../vue";
 import useMouseGrid from "./useMouseGrid";
 import useScrollBy from "./useScrollBy";
@@ -10,15 +10,9 @@ export default function useMouseWatcher () {
     const appBody = document.querySelector('.app-body') as HTMLElement | null
     if (!appBody) return
 
-    /**
-     * ```markdown
-     * |1|2|3|
-     * |4|5|6|
-     * ```
-     */
     const getGridIndex = (x: number, y: number) => {
-      const COUNT_COLUMN = 3
-      const COUNT_ROW = 2
+      const COUNT_COLUMN = GRID_COLUMN
+      const COUNT_ROW = GRID_ROW
       const rect = appBody.getBoundingClientRect()
       if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) return -1
       const colWidth = rect.width / COUNT_COLUMN