From 72d8585d519458b9983fa52fa725695e7e3ebe21 Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Tue, 7 Jan 2025 22:52:13 +0800
Subject: [PATCH] fix: scroll

---
 index.html                                    |  2 +-
 package.json                                  |  2 ++
 pnpm-lock.yaml                                | 33 +++++++++++------
 .../connections/ConnectionTable.vue           |  4 +--
 src/components/proxies/ProxyNodeGrid.vue      |  4 +--
 src/views/HomePage.vue                        | 36 +++++++++++++------
 src/views/OverviewPage.vue                    |  2 +-
 src/views/ProxiesPage.vue                     |  2 +-
 src/views/RulesPage.vue                       |  2 +-
 src/views/SettingsPage.vue                    |  2 +-
 10 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index d01c7657..1fb55d54 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <title>zashboard</title>
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0,viewport-fit=cover"
+      content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
     />
     <meta
       name="description"
diff --git a/package.json b/package.json
index dcfe0bb1..bf57991a 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@tanstack/vue-table": "^8.20.5",
     "@tanstack/vue-virtual": "^3.11.2",
     "@types/echarts": "^4.9.22",
+    "@types/hammerjs": "^2.0.46",
     "@types/reconnectingwebsocket": "^1.0.10",
     "@vueuse/core": "^12.2.0",
     "axios": "^1.7.9",
@@ -28,6 +29,7 @@
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.3",
     "echarts": "^5.6.0",
+    "hammerjs": "^2.0.8",
     "lodash": "^4.17.21",
     "misans": "^4.0.0",
     "prettier-plugin-organize-imports": "^4.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c0b9121..816674e2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,9 @@ importers:
       '@types/echarts':
         specifier: ^4.9.22
         version: 4.9.22
+      '@types/hammerjs':
+        specifier: ^2.0.46
+        version: 2.0.46
       '@types/reconnectingwebsocket':
         specifier: ^1.0.10
         version: 1.0.10
@@ -46,6 +49,9 @@ importers:
       echarts:
         specifier: ^5.6.0
         version: 5.6.0
+      hammerjs:
+        specifier: ^2.0.8
+        version: 2.0.8
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -1533,7 +1539,6 @@ packages:
       }
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.29.1':
     resolution:
@@ -1542,7 +1547,6 @@ packages:
       }
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.29.1':
     resolution:
@@ -1551,7 +1555,6 @@ packages:
       }
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.29.1':
     resolution:
@@ -1560,7 +1563,6 @@ packages:
       }
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.29.1':
     resolution:
@@ -1569,7 +1571,6 @@ packages:
       }
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.29.1':
     resolution:
@@ -1578,7 +1579,6 @@ packages:
       }
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.29.1':
     resolution:
@@ -1587,7 +1587,6 @@ packages:
       }
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.29.1':
     resolution:
@@ -1596,7 +1595,6 @@ packages:
       }
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.29.1':
     resolution:
@@ -1605,7 +1603,6 @@ packages:
       }
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.29.1':
     resolution:
@@ -1614,7 +1611,6 @@ packages:
       }
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.29.1':
     resolution:
@@ -1700,6 +1696,12 @@ packages:
         integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==,
       }
 
+  '@types/hammerjs@2.0.46':
+    resolution:
+      {
+        integrity: sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==,
+      }
+
   '@types/json-schema@7.0.15':
     resolution:
       {
@@ -3161,6 +3163,13 @@ packages:
         integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==,
       }
 
+  hammerjs@2.0.8:
+    resolution:
+      {
+        integrity: sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==,
+      }
+    engines: { node: '>=0.8.0' }
+
   has-ansi@2.0.0:
     resolution:
       {
@@ -6511,6 +6520,8 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
+  '@types/hammerjs@2.0.46': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/lodash@4.17.13': {}
@@ -7531,6 +7542,8 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  hammerjs@2.0.8: {}
+
   has-ansi@2.0.0:
     dependencies:
       ansi-regex: 2.1.1
diff --git a/src/components/connections/ConnectionTable.vue b/src/components/connections/ConnectionTable.vue
index 9ed43a7c..2d4ad2d9 100644
--- a/src/components/connections/ConnectionTable.vue
+++ b/src/components/connections/ConnectionTable.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     ref="parentRef"
-    class="h-full overflow-y-auto bg-clip-content p-2"
+    class="h-full bg-clip-content p-2"
     @touchstart.stop
     @touchmove.stop
     @touchend.stop
   >
     <div :style="{ height: `${totalSize}px` }">
       <table :class="`table table-zebra ${sizeOfTable} rounded-none shadow-md`">
-        <thead class="sticky -top-2 z-10 bg-base-100">
+        <thead class="sticky -top-1 z-10 bg-base-100">
           <tr
             v-for="headerGroup in tanstackTable.getHeaderGroups()"
             :key="headerGroup.id"
diff --git a/src/components/proxies/ProxyNodeGrid.vue b/src/components/proxies/ProxyNodeGrid.vue
index c5ae4c73..a8453109 100644
--- a/src/components/proxies/ProxyNodeGrid.vue
+++ b/src/components/proxies/ProxyNodeGrid.vue
@@ -2,8 +2,8 @@
   <div
     :class="
       twMerge(
-        'grid grid-cols-2 gap-2 overflow-x-hidden',
-        truncateProxyName && 'max-h-96 overflow-y-auto',
+        'grid grid-cols-2 gap-2 overflow-y-auto overflow-x-hidden',
+        truncateProxyName && 'max-h-96',
         proxyCardSize === PROXY_CARD_SIZE.LARGE
           ? isSidebarCollapsed
             ? hasTwoColumns
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 9b7782cd..f45975de 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -10,7 +10,6 @@
 
     <div
       class="drawer-content fixed bottom-0 flex h-full w-full flex-col overflow-hidden bg-base-200/40 md:relative md:w-auto"
-      ref="contentRef"
     >
       <component
         v-if="ctrlComp && isSidebarCollapsed"
@@ -19,7 +18,9 @@
         :horizontal="true"
       />
       <div class="relative h-0 flex-1">
-        <div class="absolute h-full w-full overflow-y-auto">
+        <div
+          class="absolute flex h-full w-full flex-col overflow-y-auto max-sm:min-h-[calc(100%+1px)]"
+        >
           <RouterView />
           <div
             class="shrink-0 md:hidden"
@@ -27,7 +28,10 @@
           />
         </div>
       </div>
-      <div :class="`btm-nav glass z-30 bg-none md:hidden ${isPWA ? 'h-[5.5rem] pb-8' : 'h-14'}`">
+      <div
+        ref="contentRef"
+        :class="`btm-nav glass z-30 bg-none md:hidden ${isPWA ? 'h-[5.5rem] pb-8' : 'h-14'}`"
+      >
         <button
           v-for="r in renderRoutes"
           :key="r"
@@ -92,8 +96,9 @@ import { fetchProxies } from '@/store/proxies'
 import { fetchRules } from '@/store/rules'
 import { isSidebarCollapsed } from '@/store/settings'
 import { activeBackend, activeUuid, backendList } from '@/store/setup'
-import { useDocumentVisibility, useSwipe } from '@vueuse/core'
-import { computed, ref, watch, type Component } from 'vue'
+import { useDocumentVisibility } from '@vueuse/core'
+import Hammer from 'hammerjs'
+import { computed, onMounted, onUnmounted, ref, watch, type Component } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
 const modalRef = ref<HTMLDialogElement | null>(null)
@@ -115,7 +120,7 @@ const ctrlComp = computed(() => {
 })
 
 const contentRef = ref()
-const { direction } = useSwipe(contentRef, { threshold: 15 })
+const hammer = ref<HammerManager | null>(null)
 
 const getNextRouteName = () => {
   const routeName = route.name as ROUTE_NAME
@@ -139,14 +144,23 @@ const getPrevRouteName = () => {
   ]
 }
 
-watch(direction, () => {
-  if (direction.value === 'right') {
-    router.push({ name: getPrevRouteName() })
-  } else if (direction.value === 'left') {
-    router.push({ name: getNextRouteName() })
+onMounted(() => {
+  if (contentRef.value) {
+    hammer.value = new Hammer(contentRef.value)
+
+    hammer.value.on('swipeleft', () => {
+      router.push({ name: getNextRouteName() })
+    })
+    hammer.value.on('swiperight', () => {
+      router.push({ name: getPrevRouteName() })
+    })
   }
 })
 
+onUnmounted(() => {
+  hammer.value?.destroy()
+})
+
 const { proxiesTabShow } = useProxies()
 const { checkUIUpdate } = useSettings()
 watch(
diff --git a/src/views/OverviewPage.vue b/src/views/OverviewPage.vue
index a77ea4ee..b51ba1b1 100644
--- a/src/views/OverviewPage.vue
+++ b/src/views/OverviewPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2 overflow-y-auto p-2">
+  <div class="flex flex-col gap-2 p-2">
     <ChartsCard />
     <NetworkCard />
     <div class="flex-1"></div>
diff --git a/src/views/ProxiesPage.vue b/src/views/ProxiesPage.vue
index 9ca309f9..542e4c3f 100644
--- a/src/views/ProxiesPage.vue
+++ b/src/views/ProxiesPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-y-auto p-2">
+  <div class="p-2">
     <template v-if="isLargeScreen && twoColumnProxyGroup && renderGroups.length > 1">
       <div class="grid grid-cols-2 gap-1">
         <div
diff --git a/src/views/RulesPage.vue b/src/views/RulesPage.vue
index 92888f6d..d6339506 100644
--- a/src/views/RulesPage.vue
+++ b/src/views/RulesPage.vue
@@ -1,6 +1,6 @@
 <template>
   <template v-if="rulesTabShow === RULE_TAB_TYPE.PROVIDER">
-    <div class="flex flex-col gap-1 overflow-y-auto overflow-x-hidden p-2">
+    <div class="flex flex-col gap-1 overflow-x-hidden p-2">
       <RuleProvider
         v-for="(ruleProvider, index) in renderRulesProvider"
         :key="ruleProvider.name"
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index 0ab27866..944d7942 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-1 gap-2 overflow-y-auto p-2">
+  <div class="grid grid-cols-1 gap-2 p-2">
     <ZashboardSettings />
 
     <template v-if="!splitOverviewPage">