refactor: 模板引用全部改用useTemplateRef

src/AppContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { onMounted, ref, provide } from 'vue'
+import { onMounted, ref, provide, useTemplateRef } from 'vue'
 import { useStore } from './store.ts'
 import LogDialog from './dialogs/LogDialog.vue'
 import {
@@ -36,8 +36,8 @@ const logDialogShowing = ref<boolean>(false)
 const aboutDialogShowing = ref<boolean>(false)
 const settingsDialogShowing = ref<boolean>(false)
 
-const searchPaneRef = ref<InstanceType<typeof SearchPane>>()
+const searchPaneRef = useTemplateRef('searchPaneRef')
-const downloadButtonRef = ref<HTMLDivElement>()
+const downloadButtonRef = useTemplateRef('downloadButtonRef')
 
 provide(searchPaneRefKey, searchPaneRef)
 provide(navDownloadButtonRefKey, downloadButtonRef)

src/components/FloatLabelInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
-import { InputInst, InputProps, NInput, NEl } from 'naive-ui'
+import { InputProps, NInput, NEl } from 'naive-ui'
 
 const props = withDefaults(
   defineProps<{
@@ -19,7 +19,7 @@ const props = withDefaults(
 const value = defineModel<InputProps['value']>('value', { required: true })
 
 const focused = ref(false)
-const NInputRef = ref<InputInst>()
+const NInputRef = useTemplateRef('NInputRef')
 
 const floating = computed(() => value.value !== '' || focused.value)
 

src/injection_keys.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref } from 'vue'
 import SearchPane from './panes/SearchPane/SearchPane.vue'
 
-export const navDownloadButtonRefKey = Symbol() as InjectionKey<Ref<HTMLDivElement | undefined>>
+export const navDownloadButtonRefKey = Symbol() as InjectionKey<Ref<HTMLDivElement | null>>
 
-export const searchPaneRefKey = Symbol() as InjectionKey<Ref<InstanceType<typeof SearchPane> | undefined>>
+export const searchPaneRefKey = Symbol() as InjectionKey<Ref<InstanceType<typeof SearchPane> | null>>

src/panes/BangumiFollow/components/BangumiFollowCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { inject, useTemplateRef } from 'vue'
 import { navDownloadButtonRefKey, searchPaneRefKey } from '../../../injection_keys.ts'
 import { ensureHttps, isElementInViewport, playTaskToQueueAnimation } from '../../../utils.tsx'
 import { PhDownloadSimple, PhGoogleChromeLogo, PhMagnifyingGlass } from '@phosphor-icons/vue'
@@ -18,8 +18,8 @@ const props = defineProps<{
 }>()
 
 const navDownloadButtonRef = inject(navDownloadButtonRefKey)
-const rootDivRef = ref<HTMLDivElement>()
+const rootDivRef = useTemplateRef('rootDivRef')
-const downloadButtonRef = ref<InstanceType<typeof IconButton>>()
+const downloadButtonRef = useTemplateRef('downloadButtonRef')
 
 async function handleDownloadClick() {
   if (props.downloadEpisode === undefined) {
@@ -31,14 +31,14 @@ async function handleDownloadClick() {
 }
 
 function playDownloadAnimation() {
-  if (rootDivRef.value === undefined) {
+  if (rootDivRef.value === null) {
     return
   }
 
   const from = downloadButtonRef.value?.$el
   const to = navDownloadButtonRef?.value
 
-  if (from instanceof Element && to !== undefined) {
+  if (from instanceof Element && to !== undefined && to !== null) {
     if (isElementInViewport(rootDivRef.value)) {
       // 只有卡片在视口内才播放动画
       playTaskToQueueAnimation(from, to)

src/panes/DownloadPane/DownloadPane.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, useTemplateRef } from 'vue'
 import { commands, DownloadProgress, DownloadTaskState, events } from '../../bindings.ts'
 import { useStore } from '../../store.ts'
 import UncompletedProgresses from './components/UncompletedProgresses.vue'
@@ -19,8 +19,8 @@ const store = useStore()
 
 const currentTabName = ref<'uncompleted' | 'completed'>('uncompleted')
 
-const uncompletedProgressesRef = ref<InstanceType<typeof UncompletedProgresses>>()
+const uncompletedProgressesRef = useTemplateRef<InstanceType<typeof UncompletedProgresses>>('uncompletedProgressesRef')
-const completedProgressesRef = ref<InstanceType<typeof CompletedProgresses>>()
+const completedProgressesRef = useTemplateRef<InstanceType<typeof CompletedProgresses>>('completedProgressesRef')
 
 onMounted(async () => {
   await events.downloadEvent.listen(({ payload: { event, data } }) => {
@@ -189,13 +189,13 @@ onMounted(async () => {
 
       <template #suffix>
         <n-pagination
-          v-if="currentTabName === 'uncompleted' && uncompletedProgressesRef"
+          v-if="currentTabName === 'uncompleted' && uncompletedProgressesRef !== null"
           class="ml-auto mr-2"
           :page-count="uncompletedProgressesRef.pageCount"
           v-model:page="uncompletedProgressesRef.currentPage" />
 
         <n-pagination
-          v-else-if="currentTabName === 'completed' && completedProgressesRef"
+          v-else-if="currentTabName === 'completed' && completedProgressesRef !== null"
           class="ml-auto mr-2"
           :page-count="completedProgressesRef.pageCount"
           v-model:page="completedProgressesRef.currentPage" />

src/panes/FavPane/components/FavCard.vue

@@ -3,7 +3,7 @@ import { MediaInFav } from '../../../bindings.ts'
 import { PhDownloadSimple, PhGoogleChromeLogo, PhMagnifyingGlass } from '@phosphor-icons/vue'
 import SimpleCheckbox from '../../../components/SimpleCheckbox.vue'
 import { ensureHttps, isElementInViewport, playTaskToQueueAnimation } from '../../../utils.tsx'
-import { computed, inject, ref } from 'vue'
+import { computed, inject, useTemplateRef } from 'vue'
 import { navDownloadButtonRefKey } from '../../../injection_keys.ts'
 import { SearchType } from '../../SearchPane/SearchPane.vue'
 import IconButton from '../../../components/IconButton.vue'
@@ -19,8 +19,8 @@ const props = defineProps<{
 }>()
 
 const navDownloadButtonRef = inject(navDownloadButtonRefKey)
-const rootDivRef = ref<HTMLDivElement>()
+const rootDivRef = useTemplateRef('rootDivRef')
-const downloadButtonRef = ref<InstanceType<typeof IconButton>>()
+const downloadButtonRef = useTemplateRef('downloadButtonRef')
 
 const openInBrowserHref = computed<string | undefined>(() => {
   if (props.media.type === 2) {
@@ -52,14 +52,14 @@ async function handleDownloadClick() {
 }
 
 function playDownloadAnimation() {
-  if (rootDivRef.value === undefined) {
+  if (rootDivRef.value === null) {
     return
   }
 
   const from = downloadButtonRef.value?.$el
   const to = navDownloadButtonRef?.value
 
-  if (from instanceof Element && to !== undefined) {
+  if (from instanceof Element && to !== undefined && to !== null) {
     if (isElementInViewport(rootDivRef.value)) {
       // 只有卡片在视口内才播放动画
       playTaskToQueueAnimation(from, to)

src/panes/HistoryPane/components/HistoryCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { EpisodeType, HistoryDetail } from '../../../bindings.ts'
 import { SearchType } from '../../SearchPane/SearchPane.vue'
-import { computed, inject, ref } from 'vue'
+import { computed, inject, useTemplateRef } from 'vue'
 import { navDownloadButtonRefKey } from '../../../injection_keys.ts'
 import { ensureHttps, isElementInViewport, playTaskToQueueAnimation } from '../../../utils.tsx'
 import { PhDownloadSimple, PhGoogleChromeLogo, PhMagnifyingGlass } from '@phosphor-icons/vue'
@@ -20,8 +20,8 @@ const props = defineProps<{
 }>()
 
 const navDownloadButtonRef = inject(navDownloadButtonRefKey)
-const rootDivRef = ref<HTMLDivElement>()
+const rootDivRef = useTemplateRef('rootDivRef')
-const downloadButtonRef = ref<InstanceType<typeof IconButton>>()
+const downloadButtonRef = useTemplateRef('downloadButtonRef')
 
 const openInBrowserHref = computed<string | undefined>(() => {
   if (props.episodeType === 'Normal') {
@@ -96,14 +96,14 @@ async function handleDownloadClick() {
 }
 
 function playDownloadAnimation() {
-  if (rootDivRef.value === undefined) {
+  if (rootDivRef.value === null) {
     return
   }
 
   const from = downloadButtonRef.value?.$el
   const to = navDownloadButtonRef?.value
 
-  if (from instanceof Element && to !== undefined) {
+  if (from instanceof Element && to !== undefined && to !== null) {
     if (isElementInViewport(rootDivRef.value)) {
       // 只有卡片在视口内才播放动画
       playTaskToQueueAnimation(from, to)

src/panes/SearchPane/components/EpisodeCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { computed, inject, onMounted, onUpdated, ref } from 'vue'
+import { computed, inject, onMounted, onUpdated, useTemplateRef } from 'vue'
 import {
   BangumiSearchResult,
   CheeseSearchResult,
@@ -51,8 +51,8 @@ const props = defineProps<{
 }>()
 
 const navDownloadButtonRef = inject(navDownloadButtonRefKey)
-const rootDivRef = ref<HTMLDivElement>()
+const rootDivRef = useTemplateRef('rootDivRef')
-const downloadButtonRef = ref<InstanceType<typeof IconButton>>()
+const downloadButtonRef = useTemplateRef('downloadButtonRef')
 
 const episodeInfo = computed<EpisodeInfo>(() => {
   if (props.episodeType === 'NormalSingle') {
@@ -171,14 +171,14 @@ async function handleDownloadClick() {
 }
 
 function playDownloadAnimation() {
-  if (rootDivRef.value === undefined) {
+  if (rootDivRef.value === null) {
     return
   }
 
   const from = downloadButtonRef.value?.$el
   const to = navDownloadButtonRef?.value
 
-  if (from instanceof Element && to !== undefined) {
+  if (from instanceof Element && to !== undefined && to !== null) {
     if (isElementInViewport(rootDivRef.value)) {
       // 只有卡片在视口内才播放动画
       playTaskToQueueAnimation(from, to)

src/panes/SearchPane/components/PartsDialogContent.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
   info: NormalInfo
   pages: PageInNormalEp[] | PageInNormal[]
   episodeInfo: EpisodeInfo
-  downloadButtonRef?: HTMLDivElement
+  downloadButtonRef?: HTMLDivElement | null
 }>()
 
 function handleDownloadClick(aid: number, cid: number, event: MouseEvent) {
@@ -18,7 +18,7 @@ function handleDownloadClick(aid: number, cid: number, event: MouseEvent) {
 
   commands.createDownloadTasks({ Normal: { info: props.info, aid_cid_pairs: [[aid, cid]] } })
 
-  if (from instanceof Element && to !== undefined) {
+  if (from instanceof Element && to !== undefined && to !== null) {
     playTaskToQueueAnimation(from, to)
   }
 }

src/panes/WatchLaterPane/components/WatchLaterCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { MediaInWatchLater } from '../../../bindings.ts'
-import { computed, inject, ref } from 'vue'
+import { computed, inject, useTemplateRef } from 'vue'
 import { navDownloadButtonRefKey } from '../../../injection_keys.ts'
 import { ensureHttps, extractEpId, isElementInViewport, playTaskToQueueAnimation } from '../../../utils.tsx'
 import { PhDownloadSimple, PhGoogleChromeLogo, PhMagnifyingGlass } from '@phosphor-icons/vue'
@@ -19,8 +19,8 @@ const props = defineProps<{
 }>()
 
 const navDownloadButtonRef = inject(navDownloadButtonRefKey)
-const rootDivRef = ref<HTMLDivElement>()
+const rootDivRef = useTemplateRef('rootDivRef')
-const downloadButtonRef = ref<InstanceType<typeof IconButton>>()
+const downloadButtonRef = useTemplateRef('downloadButtonRef')
 
 const openInBrowserHref = computed<string>(() => {
   if (props.media.redirect_url === null) {
@@ -41,14 +41,14 @@ async function handleDownloadClick() {
 }
 
 function playDownloadAnimation() {
-  if (rootDivRef.value === undefined) {
+  if (rootDivRef.value === null) {
     return
   }
 
   const from = downloadButtonRef.value?.$el
   const to = navDownloadButtonRef?.value
 
-  if (from instanceof Element && to !== undefined) {
+  if (from instanceof Element && to !== undefined && to !== null) {
     if (isElementInViewport(rootDivRef.value)) {
       // 只有卡片在视口内才播放动画
       playTaskToQueueAnimation(from, to)