feat: Add controller panel close mode option

Author: Ayideyia

frontend/src/constant/app.ts

@@ -1,4 +1,4 @@
-import { Color, PluginTrigger, ScheduledTasksType, View } from '@/enums/app'
+import { Color, ControllerCloseMode, PluginTrigger, ScheduledTasksType, View } from '@/enums/app'
 
 export const ProfilesFilePath = 'data/profiles.yaml'
 
@@ -51,6 +51,11 @@ export const ViewOptions = [
   { label: 'common.list', value: View.List },
 ]
 
+export const ControllerCloseModeOptions = [
+  { label: 'home.controller.closeMode.all', value: ControllerCloseMode.All },
+  { label: 'home.controller.closeMode.button', value: ControllerCloseMode.Button },
+]
+
 // vue-draggable-plus config
 export const DraggableOptions = {
   animation: 150,
@@ -74,3 +79,5 @@ export const ScheduledTaskOptions = [
 ]
 
 export const DefaultSubscribeScript = `const onSubscribe = async (proxies, subscription) => {\n  return { proxies, subscription }\n}`
+
+export const DefaultTestURL = 'https://www.gstatic.com/generate_204'

frontend/src/constant/profile.ts

@@ -1,4 +1,6 @@
+import i18n from '@/lang'
 import { sampleID } from '@/utils'
+import { DefaultTestURL } from './app'
 import {
   LogLevel,
   Inbound,
@@ -12,7 +14,7 @@ import {
   Strategy,
   DnsServer,
 } from '@/enums/kernel'
-import i18n from '@/lang'
+
 const { t } = i18n.global
 
 const DefaultOutboundIds = {
@@ -140,7 +142,7 @@ export const DefaultOutbound = (): IOutbound => ({
   type: Outbound.Selector,
   outbounds: [],
   interrupt_exist_connections: true,
-  url: 'https://www.gstatic.com/generate_204',
+  url: DefaultTestURL,
   interval: '3m',
   tolerance: 150,
   include: '',
@@ -166,7 +168,7 @@ export const DefaultOutbounds = (): IOutbound[] => [
     type: Outbound.Urltest,
     outbounds: [],
     interrupt_exist_connections: true,
-    url: 'https://www.gstatic.com/generate_204',
+    url: DefaultTestURL,
     interval: '3m',
     tolerance: 150,
     include: '',

frontend/src/enums/app.ts

@@ -27,6 +27,11 @@ export enum View {
   List = 'list',
 }
 
+export enum ControllerCloseMode {
+  All = 'all',
+  Button = 'button',
+}
+
 export enum Color {
   Default = 'default',
   Orange = 'orange',

frontend/src/lang/locale/en.ts

@@ -353,6 +353,11 @@ export default {
       sortBy: 'Sort By Delay',
       delay: 'Delay test URL',
       delayUrl: 'Please enter the delayed test URL',
+      closeMode: {
+        name: 'Controller Close Mode',
+        all: 'Scroll or Button',
+        button: 'Button Only',
+      },
     },
     connections: {
       type: 'Type',

frontend/src/lang/locale/fa.ts

@@ -353,6 +353,11 @@ export default {
       sortBy: 'مرتب‌سازی بر اساس تأخیر',
       delay: 'آزمایش تأخیر URL',
       delayUrl: 'لطفاً URL آزمایش تأخیر را وارد کنید',
+      closeMode: {
+        name: 'حالت بستن کنترلر',
+        all: 'اسکرول یا دکمه',
+        button: 'فقط دکمه',
+      },
     },
     connections: {
       type: 'نوع',

frontend/src/lang/locale/ru.ts

@@ -353,6 +353,11 @@ export default {
       sortBy: 'Сортировка по задержке',
       delay: 'URL-адрес для проверки задержки',
       delayUrl: 'Пожалуйста, введите URL-адрес для проверки задержки',
+      closeMode: {
+        name: 'Режим закрытия контроллера',
+        all: 'Прокрутка или кнопка',
+        button: 'Только кнопка',
+      },
     },
     connections: {
       type: 'Тип',

frontend/src/lang/locale/zh.ts

@@ -352,6 +352,11 @@ export default {
       sortBy: '按延迟排序',
       delay: '延迟测试URL',
       delayUrl: '请输入延迟测试URL',
+      closeMode: {
+        name: '控制器关闭模式',
+        all: '滚动和关闭按钮',
+        button: '仅按钮',
+      },
     },
     connections: {
       type: '类型',

frontend/src/stores/appSettings.ts

@@ -4,8 +4,16 @@ import { parse, stringify } from 'yaml'
 
 import i18n from '@/lang'
 import { debounce, updateTrayMenus, APP_TITLE, ignoredError, APP_VERSION } from '@/utils'
-import { Colors, DefaultFontFamily } from '@/constant/app'
-import { Theme, WindowStartState, Lang, View, Color, WebviewGpuPolicy } from '@/enums/app'
+import { Colors, DefaultFontFamily, DefaultTestURL } from '@/constant/app'
+import {
+  Theme,
+  WindowStartState,
+  Lang,
+  View,
+  Color,
+  WebviewGpuPolicy,
+  ControllerCloseMode,
+} from '@/enums/app'
 import {
   Readfile,
   Writefile,
@@ -48,6 +56,7 @@ type AppSettings = {
     cardMode: boolean
     sortByDelay: boolean
     testUrl: string
+    controllerCloseMode: ControllerCloseMode
   }
   pluginSettings: Record<string, Record<string, any>>
   githubApiToken: string
@@ -126,7 +135,8 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
       unAvailable: true,
       cardMode: true,
       sortByDelay: false,
-      testUrl: 'https://www.gstatic.com/generate_204',
+      testUrl: DefaultTestURL,
+      controllerCloseMode: ControllerCloseMode.All,
     },
     pluginSettings: {},
     githubApiToken: '',
@@ -147,6 +157,9 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     if ((app.value.kernel.branch as any) === 'latest') {
       app.value.kernel.branch = 'alpha'
     }
+    if (app.value.kernel.controllerCloseMode === undefined) {
+      app.value.kernel.controllerCloseMode = ControllerCloseMode.All
+    }
 
     firstOpen = !!data
 

frontend/src/views/HomeView/components/GroupsController.vue

@@ -2,6 +2,8 @@
 import { useI18n } from 'vue-i18n'
 import { ref, computed, onActivated } from 'vue'
 
+import { useBool } from '@/hooks'
+import { ControllerCloseModeOptions, DefaultTestURL } from '@/constant/app'
 import { ignoredError, sleep, handleUseProxy, message, prompt, asyncPool } from '@/utils'
 import { useAppSettingsStore, useKernelApiStore } from '@/stores'
 import { getProxyDelay } from '@/api/kernel'
@@ -13,6 +15,7 @@ const filterKeywordsMap = ref<Record<string, string>>({})
 const loading = ref(false)
 
 const { t } = useI18n()
+const [showMoreSettings, toggleMoreSettings] = useBool(false)
 const appSettings = useAppSettingsStore()
 const kernelApiStore = useKernelApiStore()
 
@@ -108,7 +111,7 @@ const handleGroupDelay = async (group: string) => {
         loadingSet.value.add(proxy)
         const { delay } = await getProxyDelay(
           encodeURIComponent(proxy),
-          appSettings.app.kernel.testUrl || 'https://www.gstatic.com/generate_204',
+          appSettings.app.kernel.testUrl || DefaultTestURL,
         )
         success += 1
         const _proxy = kernelApiStore.proxies[proxy]
@@ -135,7 +138,7 @@ const handleProxyDelay = async (proxy: string) => {
   try {
     const { delay } = await getProxyDelay(
       encodeURIComponent(proxy),
-      appSettings.app.kernel.testUrl || 'https://www.gstatic.com/generate_204',
+      appSettings.app.kernel.testUrl || DefaultTestURL,
     )
     const _proxy = kernelApiStore.proxies[proxy]
     _proxy.history.push({ delay })
@@ -153,22 +156,6 @@ const handleRefresh = async () => {
   loading.value = false
 }
 
-const handleChangeTestUrl = async () => {
-  try {
-    const url = await prompt<string>(
-      'home.controller.delayUrl',
-      appSettings.app.kernel.testUrl || 'https://www.gstatic.com/generate_204',
-      {
-        placeholder: 'https://www.gstatic.com/generate_204',
-      },
-    )
-    appSettings.app.kernel.testUrl = url
-    message.success('common.success')
-  } catch (error: any) {
-    message.info(error)
-  }
-}
-
 const locateGroup = (group: any, chain: string) => {
   collapseAll()
   if (kernelApiStore.proxies[chain].all) {
@@ -206,9 +193,7 @@ onActivated(() => {
       <Switch v-model="appSettings.app.kernel.sortByDelay" class="ml-8">
         {{ t('home.controller.sortBy') }}
       </Switch>
-      <Button @click="handleChangeTestUrl" type="primary" size="small" class="ml-8">
-        {{ t('home.controller.delay') }}
-      </Button>
+      <Button @click="toggleMoreSettings" type="primary" size="small" class="ml-8"> ... </Button>
       <Button @click="expandAll" v-tips="'home.overview.expandAll'" type="text" class="ml-auto">
         <Icon icon="expand" />
       </Button>
@@ -302,6 +287,32 @@ onActivated(() => {
       </div>
     </Transition>
   </div>
+
+  <Modal
+    v-model:open="showMoreSettings"
+    :submit="false"
+    mask-closable
+    cancel-text="common.close"
+    title="common.more"
+  >
+    <div class="form-item">
+      {{ t('home.controller.delay') }}
+      <Input
+        v-model="appSettings.app.kernel.testUrl"
+        :placeholder="DefaultTestURL"
+        editable
+        clearable
+      />
+    </div>
+
+    <div class="form-item">
+      {{ t('home.controller.closeMode.name') }}
+      <Radio
+        v-model="appSettings.app.kernel.controllerCloseMode"
+        :options="ControllerCloseModeOptions"
+      />
+    </div>
+  </Modal>
 </template>
 
 <style lang="less" scoped>

frontend/src/views/HomeView/index.vue

@@ -2,6 +2,7 @@
 import { ref, watch, useTemplateRef, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { ControllerCloseMode } from '@/enums/app'
 import { APP_TITLE, debounce, message } from '@/utils'
 import { useAppSettingsStore, useProfilesStore, useKernelApiStore } from '@/stores'
 
@@ -60,15 +61,19 @@ const resetScrollEventCount = debounce(() => (scrollEventCount = 0), 100)
 const onMouseWheel = (e: WheelEvent) => {
   if (!appSettingsStore.app.kernel.running) return
 
-  const currentScrollTop = controllerRef.value?.scrollTop ?? 0
   const isScrollingDown = e.deltaY > 0
 
-  if (isScrollingDown || currentScrollTop === 0) {
-    scrollEventCount += 1
-  }
-
-  if (scrollEventCount >= 3) {
-    showController.value = isScrollingDown || currentScrollTop !== 0
+  if (
+    isScrollingDown ||
+    appSettingsStore.app.kernel.controllerCloseMode === ControllerCloseMode.All
+  ) {
+    const currentScrollTop = controllerRef.value?.scrollTop ?? 0
+    if (isScrollingDown || currentScrollTop === 0) {
+      scrollEventCount += 1
+    }
+    if (scrollEventCount >= 2) {
+      showController.value = isScrollingDown || currentScrollTop !== 0
+    }
   }
 
   resetScrollEventCount()