refactor: useTemplateRef

frontend/src/components/Dropdown/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 
 type TriggerType = 'click' | 'hover'
 
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<Props>(), {
   placement: 'bottom'
 })
 
-const domRef = ref<HTMLElement>()
+const domRef = useTemplateRef('domRef')
 const show = ref(false)
 const transformOrigin = ref(props.placement === 'top' ? 'bottom' : 'top')
 

frontend/src/components/Input/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'
 
 import useI18n from '@/lang'
 import { debounce } from '@/utils'
@@ -43,7 +43,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emits = defineEmits(['update:modelValue', 'submit'])
 
 const showEdit = ref(false)
-const inputRef = ref<HTMLElement>()
+const inputRef = useTemplateRef('inputRef')
 const innerClearable = computed(() => props.clearable && props.type !== 'code' && props.modelValue)
 
 const { t } = useI18n.global

frontend/src/components/InputList/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 
 import { DraggableOptions } from '@/constant'
 
@@ -13,7 +13,7 @@ withDefaults(defineProps<Props>(), { autofocus: true })
 const list = defineModel<string[]>({ default: [] })
 
 const value = ref('')
-const inputRef = ref()
+const inputRef = useTemplateRef('inputRef')
 
 const handleAdd = () => {
   if (!value.value) return

frontend/src/components/Menu/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
+import { onMounted, onUnmounted, ref, watch, nextTick, useTemplateRef } from 'vue'
 
 import type { Menu } from '@/stores'
 
@@ -14,8 +14,8 @@ const props = defineProps<Props>()
 
 const secondaryMenu = ref<Menu[] | undefined>()
 
-const menuRef = ref()
-const secondaryMenuRef = ref()
+const menuRef = useTemplateRef('menuRef')
+const secondaryMenuRef = useTemplateRef('secondaryMenuRef')
 
 const menuPosition = ref({ left: '', top: '' })
 const secondaryMenuPosition = ref({ left: '', top: '' })
@@ -33,7 +33,7 @@ const fixMenuPos = (x: number, y: number) => {
   let top = y
 
   const { offsetWidth: clientWidth, offsetHeight: clientHeight } = document.body
-  const { offsetWidth: menuWidth, offsetHeight: menuHeight } = menuRef.value
+  const { offsetWidth: menuWidth, offsetHeight: menuHeight } = menuRef.value!
 
   if (x + menuWidth > clientWidth) left -= x + menuWidth - clientWidth + 8
   if (y + menuHeight > clientHeight) top -= y + menuHeight - clientHeight + 8
@@ -43,13 +43,13 @@ const fixMenuPos = (x: number, y: number) => {
 
 const fixSecondaryMenuPos = () => {
   const { x, y } = props.position
-  const { offsetWidth: menuWidth, offsetHeight: menuHeight } = menuRef.value
+  const { offsetWidth: menuWidth, offsetHeight: menuHeight } = menuRef.value!
 
   let left = menuWidth
   let top = menuHeight
 
   const { offsetWidth: clientWidth, offsetHeight: clientHeight } = document.body
-  const { offsetWidth: sMenuWidth, offsetHeight: sMenuHeight } = secondaryMenuRef.value
+  const { offsetWidth: sMenuWidth, offsetHeight: sMenuHeight } = secondaryMenuRef.value!
 
   if (left + sMenuWidth + x > clientWidth) left -= x + menuWidth + sMenuWidth - clientWidth + 8
   if (top + sMenuHeight + y > clientHeight) top -= sMenuHeight

frontend/src/components/Tips/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, nextTick, useTemplateRef } from 'vue'
 
 interface Props {
   position: { x: number; y: number }
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const model = defineModel<boolean>()
 
-const domRef = ref<HTMLElement>()
+const domRef = useTemplateRef('domRef')
 const fixedPosition = ref({ x: 0, y: 0 })
 
 const { t } = useI18n()

frontend/src/components/TrafficChart/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch, onActivated } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, onActivated, useTemplateRef } from 'vue'
 
 import { formatBytes } from '@/utils'
 
@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const MAX_HISTORY = 60
-const svgRef = ref<SVGElement>()
+const svgRef = useTemplateRef<SVGAElement>('svgRef')
 const width = ref(200)
 const points = ref<string[]>([])
 const showLines = ref([true, true])

frontend/src/views/CommandView.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick, watch, useTemplateRef } from 'vue'
 
 import { debounce } from '@/utils'
 import { useMessage } from '@/hooks'
@@ -11,7 +11,7 @@ const loading = ref(false)
 const showCommandPanel = ref(false)
 const userInput = ref('')
 const selected = ref(0)
-const inputRef = ref()
+const inputRef = useTemplateRef<HTMLInputElement>('inputRef')
 const commands = ref(getCommands())
 let commandsRefMap: Record<string, HTMLElement> = {}
 
@@ -40,14 +40,14 @@ const handleExecCommand = async (index: number) => {
     message.error(error.message || error)
   }
   loading.value = false
-  nextTick(inputRef.value.focus)
+  nextTick(inputRef.value!.focus)
 }
 
 const onKeydown = async (ev: KeyboardEvent) => {
   if (((ev.ctrlKey && ev.shiftKey) || ev.metaKey) && ev.code === 'KeyP') {
     ev.preventDefault()
     showCommandPanel.value = true
-    nextTick(inputRef.value.focus)
+    nextTick(inputRef.value!.focus)
     return
   }
 
@@ -78,7 +78,7 @@ const onKeydown = async (ev: KeyboardEvent) => {
     if (hitCommand.value.length) {
       await handleExecCommand(selected.value)
     } else {
-      nextTick(inputRef.value.focus)
+      nextTick(inputRef.value!.focus)
     }
   }
 }

frontend/src/views/HomeView/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { APP_TITLE, sleep } from '@/utils'
@@ -15,7 +15,7 @@ import CommonController from './components/CommonController.vue'
 
 const kernelLoading = ref(false)
 const showController = ref(false)
-const controllerRef = ref<HTMLElement>()
+const controllerRef = useTemplateRef('controllerRef')
 
 const { t } = useI18n()
 const { message } = useMessage()

frontend/src/views/ProfilesView/components/ProfileForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, inject, type Ref, computed } from 'vue'
+import { ref, inject, type Ref, computed, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useMessage, useAlert, useBool } from '@/hooks'
@@ -23,16 +23,27 @@ interface Props {
   isUpdate?: boolean
 }
 
+enum StepEnum {
+  NAME = 0,
+  GENERAL = 1,
+  TUN = 2,
+  GROUPS = 3,
+  RULES = 4,
+  DNS = 5,
+  DNS_RULES = 6,
+  MIXIN_SCRIPT = 7
+}
+
 const props = withDefaults(defineProps<Props>(), {
   id: '',
   isUpdate: false,
-  step: 0
+  step: StepEnum.NAME
 })
 
 const loading = ref(false)
-const groupsRef = ref()
-const rulesRef = ref()
-const dnsRulesRef = ref()
+const groupsRef = useTemplateRef<typeof ProxyGroupsConfig>('groupsRef')
+const rulesRef = useTemplateRef<typeof RulesConfig>('rulesRef')
+const dnsRulesRef = useTemplateRef<typeof DnsRulesConfig>('dnsRulesRef')
 const currentStep = ref(props.step)
 
 const stepItems = [
@@ -100,9 +111,9 @@ const handleSave = async () => {
 
 const handleAdd = () => {
   const map: Record<number, Ref> = {
-    '3': groupsRef,
-    '4': rulesRef,
-    '6': dnsRulesRef
+    [StepEnum.GROUPS]: groupsRef,
+    [StepEnum.RULES]: rulesRef,
+    [StepEnum.DNS_RULES]: dnsRulesRef
   }
   map[currentStep.value].value.handleAdd()
 }
@@ -129,7 +140,7 @@ if (props.isUpdate) {
     <div class="header-title">{{ t(stepItems[currentStep].title) }}</div>
     <Button @click="handlePreview" icon="file" type="text" class="ml-auto" />
     <Button
-      v-show="[3, 4, 6].includes(currentStep)"
+      v-show="[StepEnum.GROUPS, StepEnum.RULES, StepEnum.DNS_RULES].includes(currentStep)"
       @click="handleAdd"
       icon="add"
       type="text"
@@ -138,14 +149,14 @@ if (props.isUpdate) {
   </div>
 
   <div class="form">
-    <div v-show="currentStep === 0">
+    <div v-show="currentStep === StepEnum.NAME">
       <div class="form-item">
         <div class="name">{{ t('profile.name') }} *</div>
         <Input v-model="profile.name" auto-size autofocus class="flex-1 ml-8" />
       </div>
     </div>
 
-    <div v-show="currentStep === 1">
+    <div v-show="currentStep === StepEnum.GENERAL">
       <GeneralConfig v-model="profile.generalConfig" />
       <Divider>
         <Button type="text" size="small" @click="toggleAdvancedSetting">
@@ -157,15 +168,15 @@ if (props.isUpdate) {
       </div>
     </div>
 
-    <div v-show="currentStep === 2">
+    <div v-show="currentStep === StepEnum.TUN">
       <TunConfig v-model="profile.tunConfig" />
     </div>
 
-    <div v-show="currentStep === 3">
+    <div v-show="currentStep === StepEnum.GROUPS">
       <ProxyGroupsConfig ref="groupsRef" v-model="profile.proxyGroupsConfig" />
     </div>
 
-    <div v-show="currentStep === 4">
+    <div v-show="currentStep === StepEnum.RULES">
       <RulesConfig
         ref="rulesRef"
         v-model="profile.rulesConfig"
@@ -174,11 +185,11 @@ if (props.isUpdate) {
       />
     </div>
 
-    <div v-show="currentStep === 5">
+    <div v-show="currentStep === StepEnum.DNS">
       <DnsConfig v-model="profile.dnsConfig" :proxy-groups="profile.proxyGroupsConfig" />
     </div>
 
-    <div v-show="currentStep === 6">
+    <div v-show="currentStep === StepEnum.DNS_RULES">
       <DnsRulesConfig
         ref="dnsRulesRef"
         v-model="profile.dnsRulesConfig"
@@ -187,13 +198,13 @@ if (props.isUpdate) {
       />
     </div>
 
-    <div v-show="currentStep === 7">
+    <div v-show="currentStep === StepEnum.MIXIN_SCRIPT">
       <MixinAndScript v-model="mixinAndScriptConfig" />
     </div>
   </div>
 
   <div class="form-action">
-    <Button @click="handlePrevStep" :disabled="currentStep == 0" type="text">
+    <Button @click="handlePrevStep" :disabled="currentStep == StepEnum.NAME" type="text">
       {{ t('common.prevStep') }}
     </Button>
     <Button