GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-04 23:18:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix：优化文件管理性能

Browse Source
This commit is contained in:
jxxghp
2024-04-06 09:25:46 +08:00
parent 0e161b1735
commit 1e1117b187
3 changed files with 115 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/@layouts/styles/_variables.scss
+1 -1
View File
@@ -19,7 +19,7 @@ $layout-horizontal-nav-layout-navbar-z-index: 11 !default;
$layout-boxed-content-width: 90rem !default; $layout-boxed-content-width: 90rem !default;
// 👉Footer // 👉Footer
$layout-vertical-nav-footer-height: 3.5rem !default; $layout-vertical-nav-footer-height: 0rem !default;
// 👉 Layout overlay // 👉 Layout overlay
$layout-overlay-z-index: 11 !default; $layout-overlay-z-index: 11 !default;
src/components/filebrowser/List.vue
+85 -84
View File
@@ -10,7 +10,6 @@ import type { Context, EndPoints, FileItem } from '@/api/types'
import store from '@/store' import store from '@/store'
import api from '@/api' import api from '@/api'
import MediaInfoCard from '@/components/cards/MediaInfoCard.vue' import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
import { useDefer } from '@/@core/utils/dom'
// 输入参数 // 输入参数
const inProps = defineProps({ const inProps = defineProps({
@@ -75,7 +74,7 @@ const nameTestResult = ref<Context>()
const nameTestDialog = ref(false) const nameTestDialog = ref(false)
// 延迟加载 // 延迟加载
let defer = (_: number) => true const defer = (_: number) => true
// 目录过滤 // 目录过滤
const dirs = computed(() => const dirs = computed(() =>
@@ -115,7 +114,6 @@ async function load() {
} }
// 加载数据 // 加载数据
items.value = await axiosInstance.value.request(config) ?? [] items.value = await axiosInstance.value.request(config) ?? []
defer = useDefer(items.value.length)
emit('loading', false) emit('loading', false)
loading.value = false loading.value = false
} }
@@ -410,91 +408,91 @@ onMounted(() => {
</VCardText> </VCardText>
<VCardText v-else-if="dirs.length || files.length" class="p-0"> <VCardText v-else-if="dirs.length || files.length" class="p-0">
<VList subheader> <VList subheader>
<VHover <VVirtualScroll class="virtual-scroll-div" :items="[...dirs, ...files]">
v-for="(item, index) in [...dirs, ...files]" <template #default="{ item }">
:key="index" <VHover>
> <template #default="hover">
<template #default="hover"> <VListItem
<VListItem v-bind="hover.props"
v-if="defer(index)" class="px-3 pe-1"
v-bind="hover.props" @click="changePath(item.path)"
class="px-3 pe-1" >
@click="changePath(item.path)" <template #prepend>
> <VIcon v-if="inProps.icons && item.extension" :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other" />
<template #prepend> <VIcon v-else icon="mdi-folder-outline" />
<VIcon v-if="inProps.icons && item.extension" :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other" /> </template>
<VIcon v-else icon="mdi-folder-outline" /> <VListItemTitle v-text="item.name" />
</template> <VListItemSubtitle v-if="item.size">
<VListItemTitle v-text="item.name" /> {{ formatBytes(item.size) }}
<VListItemSubtitle v-if="item.size"> </VListItemSubtitle>
{{ formatBytes(item.size) }} <template #append>
</VListItemSubtitle> <IconBtn class="d-sm-none">
<template #append> <VIcon
<IconBtn class="d-sm-none"> icon="mdi-dots-vertical"
<VIcon />
icon="mdi-dots-vertical" <VMenu
/> activator="parent"
<VMenu close-on-content-click
activator="parent"
close-on-content-click
>
<VList>
<VListItem
v-for="(menu, i) in dropdownItems"
:key="i"
variant="plain"
:base-color="menu.props.color"
@click="menu.props.click(item)"
> >
<template #prepend> <VList>
<VIcon :icon="menu.props.prependIcon" /> <VListItem
v-for="(menu, i) in dropdownItems"
:key="i"
variant="plain"
:base-color="menu.props.color"
@click="menu.props.click(item)"
>
<template #prepend>
<VIcon :icon="menu.props.prependIcon" />
</template>
<VListItemTitle v-text="menu.title" />
</VListItem>
</VList>
</VMenu>
</IconBtn>
<span v-if="hover.isHovering" class="flex">
<VTooltip text="识别">
<template #activator="{ props }">
<IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="recognize(item.path)">
<VIcon icon="mdi-text-recognition" />
</IconBtn>
</template> </template>
<VListItemTitle v-text="menu.title" /> </VTooltip>
</VListItem> <VTooltip text="刮削">
</VList> <template #activator="{ props }">
</VMenu> <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="scrape(item.path)">
</IconBtn> <VIcon icon="mdi-auto-fix" />
<span v-if="hover.isHovering" class="flex"> </IconBtn>
<VTooltip text="识别"> </template>
<template #activator="{ props }"> </VTooltip>
<IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="recognize(item.path)"> <VTooltip text="重命名">
<VIcon icon="mdi-text-recognition" /> <template #activator="{ props }">
</IconBtn> <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="showRenmae(item)">
</template> <VIcon icon="mdi-rename" />
</VTooltip> </IconBtn>
<VTooltip text="刮削"> </template>
<template #activator="{ props }"> </VTooltip>
<IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="scrape(item.path)"> <VTooltip text="整理">
<VIcon icon="mdi-auto-fix" /> <template #activator="{ props }">
</IconBtn> <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="showTransfer(item)">
</template> <VIcon icon="mdi-folder-arrow-right" />
</VTooltip> </IconBtn>
<VTooltip text="重命名"> </template>
<template #activator="{ props }"> </VTooltip>
<IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="showRenmae(item)"> <VTooltip text="删除">
<VIcon icon="mdi-rename" /> <template #activator="{ props }">
</IconBtn> <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="deleteItem(item)">
</template> <VIcon icon="mdi-delete-outline" color="error" />
</VTooltip> </IconBtn>
<VTooltip text="整理"> </template>
<template #activator="{ props }"> </VTooltip>
<IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="showTransfer(item)"> </span>
<VIcon icon="mdi-folder-arrow-right" /> </template>
</IconBtn> </VListItem>
</template>
</VTooltip>
<VTooltip text="删除">
<template #activator="{ props }">
<IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="deleteItem(item)">
<VIcon icon="mdi-delete-outline" color="error" />
</IconBtn>
</template>
</VTooltip>
</span>
</template> </template>
</VListItem> </VHover>
</template> </template>
</VHover> </VVirtualScroll>
</VList> </VList>
</VCardText> </VCardText>
<VCardText <VCardText
@@ -583,4 +581,7 @@ onMounted(() => {
.v-toolbar{ .v-toolbar{
background: rgb(var(--v-table-header-background)); background: rgb(var(--v-table-header-background));
} }
.virtual-scroll-div {
height: calc(100vh - 230px);
}
</style> </style>
src/views/reorganize/TransferHistoryView.vue
+29 -25
View File
@@ -311,31 +311,6 @@ fixArrayAt()
</script> </script>
<template> <template>
<!-- 底部操作按钮 -->
<span>
<VFab
v-if="selected.length > 0"
icon="mdi-trash-can-outline"
color="error"
location="bottom end"
size="x-large"
fixed
app
appear
@click="removeHistoryBatch"
/>
<VFab
v-if="selected.length > 0"
class="mb-2"
icon="mdi-redo-variant"
location="bottom end"
size="x-large"
fixed
app
appear
@click="retransferBatch"
/>
</span>
<VCard class="pb-5"> <VCard class="pb-5">
<VCardItem> <VCardItem>
<VCardTitle> <VCardTitle>
@@ -379,6 +354,7 @@ fixArrayAt()
items-per-page-text="每页条数" items-per-page-text="每页条数"
page-text="{0}-{1} 共 {2} 条" page-text="{0}-{1} 共 {2} 条"
loading-text="加载中..." loading-text="加载中..."
class="data-table-div"
@update:options="fetchData" @update:options="fetchData"
> >
<template #item.title="{ item }"> <template #item.title="{ item }">
@@ -486,10 +462,38 @@ fixArrayAt()
" "
@close="redoDialog = false" @close="redoDialog = false"
/> />
<!-- 底部操作按钮 -->
<span>
<VFab
v-if="selected.length > 0"
icon="mdi-trash-can-outline"
color="error"
location="bottom end"
size="x-large"
fixed
app
appear
@click="removeHistoryBatch"
/>
<VFab
v-if="selected.length > 0"
class="mb-2"
icon="mdi-redo-variant"
location="bottom end"
size="x-large"
fixed
app
appear
@click="retransferBatch"
/>
</span>
</template> </template>
<style lang="scss"> <style lang="scss">
.v-table th { .v-table th {
white-space: nowrap; white-space: nowrap;
} }
.data-table-div {
height: calc(100vh - 200px);
}
</style> </style>