refactor: enhance code readability and structure

Author: Ayideyia

frontend/src/bridge/app.ts

@@ -1,3 +1,4 @@
+import type { TrayContent } from '@/types/app'
 import * as App from '@wails/go/bridge/App'
 
 export const RestartApp = App.RestartApp

frontend/src/components/Menu/index.vue

@@ -2,6 +2,8 @@
 import { useI18n } from 'vue-i18n'
 import { onMounted, onUnmounted, ref, watch, nextTick, useTemplateRef } from 'vue'
 
+import type { Menu } from '@/types/app'
+
 interface Props {
   position: { x: number; y: number }
   menuList: Menu[]

frontend/src/components/Table/index.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 
+import type { Menu } from '@/types/app'
+
 import useI18n from '@/lang'
 import { getValue } from '@/utils'
 import vMenu from '@/directives/menu'

frontend/src/components/TitleBar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import type { Menu } from '@/types/app'
+
 import { APP_TITLE, APP_VERSION, debounce, exitApp } from '@/utils'
 import { useAppSettingsStore, useKernelApiStore, useEnvStore } from '@/stores'
 import {

frontend/src/constant/app.ts

@@ -1,5 +1,7 @@
 import { Color, ControllerCloseMode, PluginTrigger, ScheduledTasksType, View } from '@/enums/app'
 
+export const UserFilePath = 'data/user.yaml'
+
 export const ProfilesFilePath = 'data/profiles.yaml'
 
 export const SubscribesFilePath = 'data/subscribes.yaml'

frontend/src/constant/kernel.ts

@@ -249,3 +249,36 @@ export const EmptyRuleSet = {
 }
 
 export const DefaultExcludeProtocols = 'direct|reject|selector|urltest|block|dns|shadowsocksr'
+
+export const DefaultConnections = () => {
+  return {
+    visibility: {
+      'metadata.type': true,
+      'metadata.processPath': false,
+      'metadata.host': true,
+      'metadata.sourceIP': false,
+      'metadata.destinationIP': false,
+      rule: true,
+      chains: true,
+      up: true,
+      down: true,
+      upload: true,
+      download: true,
+      start: true,
+    },
+    order: [
+      'metadata.type',
+      'metadata.processPath',
+      'metadata.host',
+      'metadata.sourceIP',
+      'metadata.destinationIP',
+      'rule',
+      'chains',
+      'up',
+      'down',
+      'upload',
+      'download',
+      'start',
+    ],
+  }
+}

frontend/src/enums/app.ts

@@ -42,6 +42,11 @@ export enum Color {
   Purple = 'purple',
 }
 
+export enum Branch {
+  Main = 'main',
+  Alpha = 'alpha',
+}
+
 export enum ScheduledTasksType {
   UpdateSubscription = 'update::subscription',
   UpdateRuleset = 'update::ruleset',

frontend/src/hooks/useCoreBranch.ts

@@ -1,6 +1,7 @@
 import { useI18n } from 'vue-i18n'
 import { computed, ref, watch } from 'vue'
 
+import { Branch } from '@/enums/app'
 import { CoreWorkingDirectory } from '@/constant/kernel'
 import { useAppSettingsStore, useEnvStore, useKernelApiStore } from '@/stores'
 import {
@@ -57,7 +58,7 @@ export const useCoreBranch = (isAlpha = false) => {
   const restartable = computed(() => {
     const { running, branch } = appSettings.app.kernel
     if (!running) return false
-    return localVersion.value && downloadCompleted.value && (branch === 'alpha') === isAlpha
+    return localVersion.value && downloadCompleted.value && (branch === Branch.Alpha) === isAlpha
   })
 
   const updatable = computed(
@@ -204,7 +205,7 @@ export const useCoreBranch = (isAlpha = false) => {
     const doRollback = () => Movefile(CoreBakFilePath, CoreFilePath)
 
     const { running, branch } = appSettings.app.kernel
-    const isCurrentRunning = running && (branch === 'alpha') === isAlpha
+    const isCurrentRunning = running && (branch === Branch.Alpha) === isAlpha
     if (isCurrentRunning) {
       await kernelApiStore.restartKernel(doRollback)
     } else {

frontend/src/stores/app.ts

@@ -2,6 +2,8 @@ import { useI18n } from 'vue-i18n'
 import { h, computed, ref, type VNode, isVNode, resolveComponent } from 'vue'
 import { defineStore } from 'pinia'
 
+import type { Menu } from '@/types/app'
+
 import { useEnvStore } from './env'
 import {
   APP_TITLE,

frontend/src/stores/appSettings.ts

@@ -2,9 +2,12 @@ import { ref, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { parse, stringify } from 'yaml'
 
+import type { AppSettings } from '@/types/app'
+
 import i18n from '@/lang'
+import { DefaultConnections } from '@/constant/kernel'
 import { debounce, updateTrayMenus, APP_TITLE, ignoredError, APP_VERSION } from '@/utils'
-import { Colors, DefaultFontFamily, DefaultTestURL } from '@/constant/app'
+import { Colors, DefaultFontFamily, DefaultTestURL, UserFilePath } from '@/constant/app'
 import {
   Theme,
   WindowStartState,
@@ -13,6 +16,7 @@ import {
   Color,
   WebviewGpuPolicy,
   ControllerCloseMode,
+  Branch,
 } from '@/enums/app'
 import {
   Readfile,
@@ -22,50 +26,6 @@ import {
   WindowIsMinimised,
 } from '@/bridge'
 
-type AppSettings = {
-  lang: Lang
-  theme: Theme
-  color: Color
-  'font-family': string
-  profilesView: View
-  subscribesView: View
-  rulesetsView: View
-  pluginsView: View
-  scheduledtasksView: View
-  windowStartState: WindowStartState
-  webviewGpuPolicy: WebviewGpuPolicy
-  width: number
-  height: number
-  exitOnClose: boolean
-  closeKernelOnExit: boolean
-  autoSetSystemProxy: boolean
-  autoStartKernel: boolean
-  userAgent: string
-  startupDelay: number
-  connections: {
-    visibility: Record<string, boolean>
-    order: string[]
-  }
-  kernel: {
-    branch: 'main' | 'alpha'
-    profile: string
-    pid: number
-    running: boolean
-    autoClose: boolean
-    unAvailable: boolean
-    cardMode: boolean
-    sortByDelay: boolean
-    testUrl: string
-    controllerCloseMode: ControllerCloseMode
-  }
-  pluginSettings: Record<string, Record<string, any>>
-  githubApiToken: string
-  multipleInstance: boolean
-  addPluginToMenu: boolean
-  rollingRelease: boolean
-  pages: string[]
-}
-
 export const useAppSettingsStore = defineStore('app-settings', () => {
   let firstOpen = true
   let latestUserConfig = ''
@@ -76,7 +36,7 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     lang: Lang.EN,
     theme: Theme.Auto,
     color: Color.Default,
-    'font-family': DefaultFontFamily,
+    fontFamily: DefaultFontFamily,
     profilesView: View.Grid,
     subscribesView: View.Grid,
     rulesetsView: View.Grid,
@@ -92,38 +52,9 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     autoStartKernel: false,
     userAgent: APP_TITLE + '/' + APP_VERSION,
     startupDelay: 30,
-    connections: {
-      visibility: {
-        'metadata.type': true,
-        'metadata.processPath': false,
-        'metadata.host': true,
-        'metadata.sourceIP': false,
-        'metadata.destinationIP': false,
-        rule: true,
-        chains: true,
-        up: true,
-        down: true,
-        upload: true,
-        download: true,
-        start: true,
-      },
-      order: [
-        'metadata.type',
-        'metadata.processPath',
-        'metadata.host',
-        'metadata.sourceIP',
-        'metadata.destinationIP',
-        'rule',
-        'chains',
-        'up',
-        'down',
-        'upload',
-        'download',
-        'start',
-      ],
-    },
+    connections: DefaultConnections(),
     kernel: {
-      branch: 'main',
+      branch: Branch.Main,
       profile: '',
       pid: 0,
       running: false,
@@ -143,19 +74,26 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
   })
 
   const saveAppSettings = debounce((config: string) => {
-    Writefile('data/user.yaml', config)
+    Writefile(UserFilePath, config)
   }, 500)
 
   const setupAppSettings = async () => {
-    const data = await ignoredError(Readfile, 'data/user.yaml')
+    const data = await ignoredError(Readfile, UserFilePath)
     data && (app.value = Object.assign(app.value, parse(data)))
 
     if ((app.value.kernel.branch as any) === 'latest') {
-      app.value.kernel.branch = 'alpha'
+      app.value.kernel.branch = Branch.Alpha
     }
     if (app.value.kernel.controllerCloseMode === undefined) {
       app.value.kernel.controllerCloseMode = ControllerCloseMode.All
     }
+    // @ts-expect-error(Deprecated)
+    if (app.value['font-family'] !== undefined) {
+      // @ts-expect-error(Deprecated)
+      app.value.fontFamily = app.value['font-family']
+      // @ts-expect-error(Deprecated)
+      delete app.value['font-family']
+    }
 
     if (typeof app.value.connections.visibility['metadata.destinationIP'] === 'undefined') {
       app.value.connections.visibility['metadata.destinationIP'] = false
@@ -173,7 +111,6 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
 
   const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
   mediaQueryList.addEventListener('change', ({ matches }) => {
-    console.log('onSystemThemeChange')
     if (app.value.theme === Theme.Auto) {
       themeMode.value = matches ? Theme.Dark : Theme.Light
     }
@@ -201,7 +138,7 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     const { primary, secondary } = Colors[settings.color]
     document.documentElement.style.setProperty('--primary-color', primary)
     document.documentElement.style.setProperty('--secondary-color', secondary)
-    document.body.style.fontFamily = settings['font-family']
+    document.body.style.fontFamily = settings.fontFamily
   }
 
   watch(
@@ -228,8 +165,10 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
   window.addEventListener(
     'resize',
     debounce(async () => {
-      const isMinimised = await WindowIsMinimised()
-      const isMaximised = await WindowIsMaximised()
+      const [isMinimised, isMaximised] = await Promise.all([
+        WindowIsMinimised(),
+        WindowIsMaximised(),
+      ])
       if (!isMinimised && !isMaximised) {
         app.value.width = document.documentElement.clientWidth
         app.value.height = document.documentElement.clientHeight