GithubBackup/bilibili-video-downloader
1
0
Fork 0
mirror of https://github.com/lanyeeee/bilibili-video-downloader.git synced 2026-09-05 07:27:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 模板引用全部改用useTemplateRef

Browse Source
This commit is contained in:
lanyeeee
2026-02-21 07:32:55 +08:00
parent 59e28536e1
commit a45a85ee56
10 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/AppContent.vue
+3 -3
View File
@@ -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 downloadButtonRef = ref<HTMLDivElement>()
const searchPaneRef = useTemplateRef('searchPaneRef')
const downloadButtonRef = useTemplateRef('downloadButtonRef')
provide(searchPaneRefKey, searchPaneRef)
provide(navDownloadButtonRefKey, downloadButtonRef)
src/components/FloatLabelInput.vue
+3 -3
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { InputInst, InputProps, NInput, NEl } from 'naive-ui'
import { computed, ref, useTemplateRef } from 'vue'
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
+2 -2
View File
@@ -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
+5 -5
View File
@@ -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 downloadButtonRef = ref<InstanceType<typeof IconButton>>()
const rootDivRef = useTemplateRef('rootDivRef')
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
+5 -5
View File
@@ -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 completedProgressesRef = ref<InstanceType<typeof CompletedProgresses>>()
const uncompletedProgressesRef = useTemplateRef<InstanceType<typeof UncompletedProgresses>>('uncompletedProgressesRef')
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
+5 -5
View File
@@ -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 downloadButtonRef = ref<InstanceType<typeof IconButton>>()
const rootDivRef = useTemplateRef('rootDivRef')
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
+5 -5
View File
@@ -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 downloadButtonRef = ref<InstanceType<typeof IconButton>>()
const rootDivRef = useTemplateRef('rootDivRef')
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
+5 -5
View File
@@ -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 downloadButtonRef = ref<InstanceType<typeof IconButton>>()
const rootDivRef = useTemplateRef('rootDivRef')
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
+2 -2
View File
@@ -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
+5 -5
View File
@@ -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 downloadButtonRef = ref<InstanceType<typeof IconButton>>()
const rootDivRef = useTemplateRef('rootDivRef')
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)