feat: setting for swipe in tabs

Zephyruso · Jan 25, 2025 · e003184 · e003184
1 parent e7a97c1
commit e003184
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 60 deletions.
diff --git a/src/components/settings/ZashboardSettings.vue b/src/components/settings/ZashboardSettings.vue
@@ -92,6 +92,14 @@
               class="range max-w-64"
             />
           </div>
+          <div class="flex items-center gap-2 md:hidden">
+            {{ $t('swipeInTabs') }}:
+            <input
+              type="checkbox"
+              v-model="swipeInTabs"
+              class="toggle"
+            />
+          </div>
         </div>
       </div>
 
@@ -151,6 +159,7 @@ import {
   customBackgroundURL,
   dashboardTransparent,
   font,
+  swipeInTabs,
   theme,
 } from '@/store/settings'
 import { ArrowUpCircleIcon } from '@heroicons/vue/24/outline'

diff --git a/src/composables/swipe.ts b/src/composables/swipe.ts
@@ -3,6 +3,7 @@ import { renderRoutes } from '@/helper'
 import { connectionTabShow } from '@/store/connections'
 import { proxyProviederList } from '@/store/proxies'
 import { ruleProviderList } from '@/store/rules'
+import { swipeInTabs } from '@/store/settings'
 import { useSwipe } from '@vueuse/core'
 import { flatten } from 'lodash'
 import { computed, ref, watch } from 'vue'
@@ -22,66 +23,38 @@ export const useSwipeRouter = () => {
   const swipeList = computed(() => {
     return flatten(
       renderRoutes.value.map((r) => {
-        if (r === ROUTE_NAME.proxies && proxyProviederList.value.length > 0) {
-          return [
-            [
-              () =>
-                route.name === ROUTE_NAME.proxies &&
-                proxiesTabShow.value === PROXY_TAB_TYPE.PROXIES,
-              () => {
-                router.push({ name: ROUTE_NAME.proxies })
-                proxiesTabShow.value = PROXY_TAB_TYPE.PROXIES
-              },
-            ],
-            [
-              () =>
-                route.name === ROUTE_NAME.proxies &&
-                proxiesTabShow.value === PROXY_TAB_TYPE.PROVIDER,
-              () => {
-                router.push({ name: ROUTE_NAME.proxies })
-                proxiesTabShow.value = PROXY_TAB_TYPE.PROVIDER
-              },
-            ],
-          ]
-        } else if (r === ROUTE_NAME.connections) {
-          return [
-            [
-              () =>
-                route.name === ROUTE_NAME.connections &&
-                connectionTabShow.value === CONNECTION_TAB_TYPE.ACTIVE,
-              () => {
-                router.push({ name: ROUTE_NAME.connections })
-                connectionTabShow.value = CONNECTION_TAB_TYPE.ACTIVE
-              },
-            ],
-            [
-              () =>
-                route.name === ROUTE_NAME.connections &&
-                connectionTabShow.value === CONNECTION_TAB_TYPE.CLOSED,
-              () => {
-                router.push({ name: ROUTE_NAME.connections })
-                connectionTabShow.value = CONNECTION_TAB_TYPE.CLOSED
-              },
-            ],
-          ]
-        } else if (r === ROUTE_NAME.rules && ruleProviderList.value.length > 0) {
-          return [
-            [
-              () => route.name === ROUTE_NAME.rules && rulesTabShow.value === RULE_TAB_TYPE.RULES,
-              () => {
-                router.push({ name: ROUTE_NAME.rules })
-                rulesTabShow.value = RULE_TAB_TYPE.RULES
-              },
-            ],
-            [
-              () =>
-                route.name === ROUTE_NAME.rules && rulesTabShow.value === RULE_TAB_TYPE.PROVIDER,
-              () => {
-                router.push({ name: ROUTE_NAME.rules })
-                rulesTabShow.value = RULE_TAB_TYPE.PROVIDER
-              },
-            ],
-          ]
+        if (swipeInTabs.value) {
+          if (r === ROUTE_NAME.proxies && proxyProviederList.value.length > 0) {
+            return Object.values(PROXY_TAB_TYPE).map((tab) => {
+              return [
+                () => route.name === ROUTE_NAME.proxies && proxiesTabShow.value === tab,
+                () => {
+                  router.push({ name: ROUTE_NAME.proxies })
+                  proxiesTabShow.value = tab
+                },
+              ]
+            })
+          } else if (r === ROUTE_NAME.connections) {
+            return Object.values(CONNECTION_TAB_TYPE).map((tab) => {
+              return [
+                () => route.name === ROUTE_NAME.connections && connectionTabShow.value === tab,
+                () => {
+                  router.push({ name: ROUTE_NAME.connections })
+                  connectionTabShow.value = tab
+                },
+              ]
+            })
+          } else if (r === ROUTE_NAME.rules && ruleProviderList.value.length > 0) {
+            return Object.values(RULE_TAB_TYPE).map((tab) => {
+              return [
+                () => route.name === ROUTE_NAME.rules && rulesTabShow.value === tab,
+                () => {
+                  router.push({ name: ROUTE_NAME.rules })
+                  rulesTabShow.value = tab
+                },
+              ]
+            })
+          }
         }
 
         return [[() => route.name === r, () => router.push({ name: r })]]

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -152,6 +152,7 @@ const en = {
   optional: 'Optional',
   hiddenGroupTip:
     'The proxy group has been hidden. You can retrieve it by enabling "Show Hidden Groups" in the popup menu',
+  swipeInTabs: 'Swipe To Switch Between Tabs In Page',
 }
 
 export type LANG_MESSAGE = typeof en

diff --git a/src/i18n/ru.ts b/src/i18n/ru.ts
@@ -155,6 +155,7 @@ const ru: LANG_MESSAGE = {
   optional: 'Необязательно',
   hiddenGroupTip:
     'Прокси-группа скрыта. Вы можете восстановить ее, включив "Показать скрытые группы" в меню всплывающего окна',
+  swipeInTabs: 'Свайп для переключения между вкладками на странице.',
 }
 
 export default ru
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -153,6 +153,7 @@ const zh: LANG_MESSAGE = {
   label: '标签',
   optional: '可选',
   hiddenGroupTip: '代理组已隐藏，可在代理页弹窗菜单中打开“显示隐藏代理组”后找回',
+  swipeInTabs: '滑动切换页面内的标签页',
 }
 
 export default zh
diff --git a/src/store/settings.ts b/src/store/settings.ts
@@ -39,6 +39,8 @@ export const customBackgroundURL = useStorage('config/custom-background-image',
 export const dashboardTransparent = useStorage('config/dashboard-transparent', 90)
 export const autoUpgrade = useStorage('config/auto-upgrade', false)
 export const autoUpgradeCore = useStorage('config/auto-upgrade-core', false)
+export const swipeInTabs = useStorage('config/swipe-in-tabs', false)
+
 // overview
 export const splitOverviewPage = useStorage('config/split-overview-page', false)
 export const showIPAndConnectionInfo = useStorage('config/show-ip-and-connection-info', true)