🔨 Refactor(custom): use new useTemplateRef of vue 3.5

src/renderer/components/ImageProcessSetting.vue

@@ -4,8 +4,8 @@
     <div class="tab-navigation">
       <div class="tab-indicator" :style="tabIndicatorStyle" />
       <button
-        v-for="(tab, index) in tabs"
-        :ref="el => setTabRef(el, index)"
+        v-for="tab in tabs"
+        ref="tabRefs"
         :key="tab.id"
         class="tab-button"
         :class="{ active: activeTab === tab.id }"
@@ -759,7 +759,18 @@ import {
   Sliders,
 } from 'lucide-vue-next'
 import type { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
-import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, toRaw, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeMount,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  toRaw,
+  useTemplateRef,
+  watch,
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { configPaths } from '@/utils/configPaths'
@@ -772,14 +783,11 @@ const { t } = useI18n()
 const activeTab = ref('general')
 
 // Tab indicator animation
-const tabRefs = ref<(HTMLElement | null)[]>([])
+const tabRefs = useTemplateRef('tabRefs')
 const tabIndicatorStyle = ref<Record<string, string>>({})
 
-function setTabRef(el: any, index: number) {
-  tabRefs.value[index] = el
-}
-
 function updateTabIndicator() {
+  if (!tabRefs.value || tabRefs.value.length === 0) return
   const activeIndex = tabs.value.findIndex(tab => tab.id === activeTab.value)
   const activeTabEl = tabRefs.value[activeIndex]
   if (activeTabEl) {

src/renderer/components/InputBoxDialog.vue

@@ -55,7 +55,7 @@
 
 <script lang="ts" setup>
 import { XIcon } from 'lucide-vue-next'
-import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
+import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import $bus from '@/utils/bus'
@@ -64,8 +64,8 @@ import { SHOW_INPUT_BOX, SHOW_INPUT_BOX_RESPONSE } from '@/utils/constant'
 const { t } = useI18n()
 const inputBoxValue = ref('')
 const showInputBoxVisible = ref(false)
-const inputRef = ref<HTMLInputElement>()
-const textareaRef = ref<HTMLTextAreaElement>()
+const inputRef = useTemplateRef('inputRef')
+const textareaRef = useTemplateRef('textareaRef')
 const inputBoxOptions = reactive({
   title: '',
   placeholder: '',

src/renderer/components/UnifiedConfigForm.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div id="config-form" :class="[{ white: props.colorMode === 'white' }]">
-    <form ref="$form" class="config-form" @submit.prevent>
+    <form class="config-form" @submit.prevent>
       <!-- Config Name Field -->
       <div class="form-group required">
         <label class="form-label">{{ t('pages.configForm.configName') }}</label>
@@ -147,7 +147,6 @@ const props = withDefaults(defineProps<IProps>(), {
 })
 
 const $route = useRoute()
-const $form = ref<HTMLFormElement>()
 const { t } = useI18n()
 
 const configList = ref<IPicGoPluginConfig[]>([])
@@ -159,7 +158,7 @@ const visibleTooltips = reactive<Record<string, boolean>>({})
 watch(
   toRefs(props.config),
   (val: IPicGoPluginConfig[]) => {
-    handleConfigChange(val)
+    handleConfig(val)
   },
   {
     deep: true,
@@ -167,10 +166,6 @@ watch(
   },
 )
 
-function handleConfigChange(val: any) {
-  handleConfig(val)
-}
-
 function validateField(fieldName: string, value: any, _?: IPicGoPluginConfig): string | null {
   if (fieldName === '_configName') {
     if (!value || value.trim() === '') {

src/renderer/components/VirtualScroller.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 
 import { useVirtualGrid } from '@/hooks/useVirtualGrid'
 
@@ -59,7 +59,7 @@ const props = withDefaults(
   },
 )
 
-const containerRef = ref<HTMLElement | null>(null)
+const containerRef = useTemplateRef('containerRef')
 const containerHeight = ref<number>(props.pageMode ? 0 : props.height)
 const containerWidth = ref<number>(0)
 const parentScrollListeners = ref<HTMLElement[]>([])

src/renderer/components/ui/UIServiceProvider.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 
 import useConfirm, { type ConfirmOptions } from '@/hooks/useConfirm'
 import useMessage from '@/hooks/useMessage'
@@ -28,7 +28,7 @@ import useMessage from '@/hooks/useMessage'
 import ConfirmMessageBox from './ConfirmMessageBox.vue'
 import MessageToast from './MessageToast.vue'
 
-const messageRef = ref<InstanceType<typeof MessageToast> | null>(null)
+const messageRef = useTemplateRef('messageRef')
 const confirmVisible = ref(false)
 const confirmOptions = reactive<ConfirmOptions>({
   message: '',