GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-10 17:42:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
jxxghp
2025-03-30 19:54:55 +08:00
parent a909cdc21c
commit ef5db9ee4b
10 changed files with 249 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/FileBrowser.vue
View File

@@ -175,9 +175,9 @@ function refreshBrowser() {
<VCardTitle class="px-4 py-3 d-flex align-center file-browser-header">
<VIcon icon="mdi-folder-open" color="primary" class="me-2" />
<span>文件管理</span>
<VSpacer />
<!-- 存储选择菜单 -->
<VMenu v-if="props.storages && props.storages.length > 1" offset-y class="storage-menu me-3">
<template #activator="{ props: menuProps }">
@@ -189,8 +189,13 @@ function refreshBrowser() {
density="default"
size="default"
>
<VIcon :icon="storagesArray.find(item => item.value === activeStorage)?.icon || 'mdi-database'" class="me-2" />
<span class="text-truncate">{{ storagesArray.find(item => item.value === activeStorage)?.title || '本地' }}</span>
<VIcon
:icon="storagesArray.find(item => item.value === activeStorage)?.icon || 'mdi-database'"
class="me-2"
/>
<span class="text-truncate">{{
storagesArray.find(item => item.value === activeStorage)?.title || '本地'
}}</span>
<VIcon end icon="mdi-chevron-down" />
</VBtn>
</template>
@@ -204,20 +209,12 @@ function refreshBrowser() {
rounded="sm"
>
<template #prepend>
<VIcon :icon="item.icon" size="small" class="me-2" />
<VIcon :icon="item.icon" size="small" />
</template>
<VListItemTitle class="text-truncate">{{ item.title }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
<VBtn
variant="text"
size="small"
icon="mdi-refresh"
color="primary"
@click="refreshBrowser"
/>
</VCardTitle>
<VDivider />
<div v-if="activeStorage && item" class="file-browser-container">
@@ -273,8 +270,6 @@ function refreshBrowser() {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
}
.file-browser-header {
@@ -288,14 +283,14 @@ function refreshBrowser() {
padding: 0 16px;
height: 40px;
box-shadow: 0 2px 6px rgba(var(--v-theme-primary), 0.1);
:deep(.v-btn__content) {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
}
.text-truncate {
max-width: 100px;
overflow: hidden;

17
src/components/cards/TorrentCard.vue
View File

@@ -127,15 +127,20 @@ onMounted(() => {
<h3 class="media-title">
{{ media?.title ?? meta?.name }}
</h3>
<span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
</div>
<!-- 站点信息条 -->
<div class="site-info">
<div class="d-flex align-center">
<img v-if="siteIcons[torrent?.site || 0]" :src="siteIcons[torrent?.site || 0]" class="site-icon" />
<img
:alt="torrent?.site_name"
v-if="siteIcons[torrent?.site || 0]"
:src="siteIcons[torrent?.site || 0]"
class="site-icon"
/>
<span v-else class="site-fallback">{{ torrent?.site_name?.substring(0, 1) }}</span>
<span class="site-name">{{ torrent?.site_name }}</span>
<span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
</div>
<div class="seeder-peers">
@@ -226,13 +231,16 @@ onMounted(() => {
>
<div class="source-site-info">
<img
:alt="item.torrent_info?.site_name"
v-if="siteIcons[item.torrent_info?.site || 0]"
:src="siteIcons[item.torrent_info?.site || 0]"
class="source-site-icon"
/>
<span v-else class="source-site-fallback">{{ item.torrent_info?.site_name?.substring(0, 1) }}</span>
<span class="source-site-name">{{ item.torrent_info.site_name }}</span>
<span v-if="item.meta_info?.season_episode" class="season-tag source-season-tag">{{ item.meta_info.season_episode }}</span>
<span v-if="item.meta_info?.season_episode" class="season-tag source-season-tag">
{{ item.meta_info.season_episode }}
</span>
<span
v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
@@ -333,6 +341,9 @@ onMounted(() => {
.media-title-wrapper {
margin-bottom: 8px;
display: flex;
flex-wrap: wrap;
padding-right: 2rem;
}
.media-title {

16
src/components/cards/TorrentItem.vue
View File

@@ -151,16 +151,16 @@ onMounted(() => {
>
<template v-slot:prepend>
<div class="site-wrapper">
<img v-if="siteIcon" :src="siteIcon" class="site-icon" />
<img :alt="torrent?.site_name" v-if="siteIcon" :src="siteIcon" class="site-icon" />
<span v-else class="site-fallback">{{ torrent?.site_name?.substring(0, 1) }}</span>
<div class="site-name">{{ torrent?.site_name }}</div>
<span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
<span
v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
class="free-tag"
:class="getPromotionClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
>{{ torrent?.volume_factor }}</span
>
{{ torrent?.volume_factor }}
</span>
</div>
</template>
@@ -168,6 +168,7 @@ onMounted(() => {
<div class="item-header">
<div class="media-info">
<span class="media-title">{{ media?.title ?? meta?.name }}</span>
<span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
</div>
</div>
@@ -239,13 +240,12 @@ onMounted(() => {
}
.torrent-item {
border-radius: 12px;
transition: background-color 0.2s ease, transform 0.2s ease;
margin-bottom: 8px;
padding: 12px;
background-color: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
box-shadow: none;
border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.1);
}
.torrent-item:hover {
@@ -257,13 +257,13 @@ onMounted(() => {
.site-wrapper {
display: flex;
align-items: center;
min-width: 140px;
min-width: 100px;
flex-wrap: wrap;
}
.site-icon {
width: 24px;
height: 24px;
width: 32px;
height: 32px;
border-radius: 4px;
margin-right: 8px;
}

28
src/components/dialog/AddDownloadDialog.vue
View File

@@ -118,15 +118,16 @@ onMounted(() => {
})
</script>
<template>
<VDialog max-width="45rem" scrollable>
<VDialog max-width="35rem" scrollable>
<VCard>
<VCardItem>
<VCardTitle v-if="title">{{ torrent?.site_name }} - {{ title }}</VCardTitle>
<VCardTitle v-else>确认下载</VCardTitle>
<DialogCloseBtn @click="emit('close')" />
</VCardItem>
<VCardTitle class="py-3">
<VIcon icon="mdi-download" class="me-2" />
<span v-if="title">{{ torrent?.site_name }} - {{ title }}</span>
<span v-else>确认下载</span>
</VCardTitle>
<DialogCloseBtn @click="emit('close')" />
<VDivider />
<VCardText>
<VCardText class="p-1">
<VList lines="one">
<VListItem>
<template #prepend>
@@ -143,7 +144,7 @@ onMounted(() => {
<VIcon icon="mdi-subtitles-outline"></VIcon>
</template>
<VListItemTitle>
<span class="text-body-1 whitespace-break-spaces">{{ torrent?.description }}</span>
<span class="text-body-2 whitespace-break-spaces">{{ torrent?.description }}</span>
</VListItemTitle>
</VListItem>
<VListItem v-if="torrent?.size">
@@ -151,7 +152,7 @@ onMounted(() => {
<VIcon icon="mdi-database"></VIcon>
</template>
<VListItemTitle>
<span class="text-body-1">
<span class="text-body-2">
<VChip variant="tonal" label>
{{ formatFileSize(torrent?.size || 0) }}
</VChip>
@@ -181,14 +182,7 @@ onMounted(() => {
</VRow>
</VCardText>
<VCardText class="text-center">
<VBtn
variant="elevated"
:disabled="loading"
@click="addDownload"
:prepend-icon="icon"
class="px-5"
size="large"
>
<VBtn variant="elevated" :disabled="loading" @click="addDownload" :prepend-icon="icon" class="px-5">
{{ buttonText }}
</VBtn>
</VCardText>

62
src/components/filebrowser/FileList.vue
View File

@@ -127,7 +127,7 @@ const isImage = computed(() => {
// 创建一个计算属性用于设置虚拟滚动的高度
const fileListStyle = computed(() => {
return 'height: 100%';
return 'height: 100%'
})
// 调整选择模式
@@ -154,7 +154,7 @@ async function list_files() {
items.value = (await inProps.axios.request(config)) ?? []
emit('loading', false)
loading.value = false
// 通知父组件文件列表更新
emit('items-updated', items.value)
}
@@ -559,8 +559,8 @@ onMounted(() => {
placeholder="搜索文件和文件夹..."
prepend-inner-icon="mdi-magnify"
class="me-2 search-field"
rounded
bg-color="grey-lighten-5"
rounded="0"
/>
<VSpacer v-if="isFile" />
<IconBtn v-if="!isFile" @click="changeSelectMode" tooltip="切换选择模式" class="action-btn">
@@ -590,17 +590,23 @@ onMounted(() => {
</IconBtn>
</span>
</VToolbar>
<div class="file-content-container">
<div v-if="loading" class="text-center flex flex-col items-center loading-container">
<VProgressCircular size="48" indeterminate color="primary" />
<span class="mt-2 text-medium-emphasis">加载中...</span>
</div>
<!-- 文件详情 -->
<div v-else-if="isFile && !isImage && items.length > 0" class="text-center break-all file-details">
<div v-if="items[0]?.thumbnail" class="flex justify-center">
<VImg max-width="15rem" cover :src="items[0]?.thumbnail" class="rounded-lg border shadow-lg file-thumbnail" height="auto">
<VImg
max-width="15rem"
cover
:src="items[0]?.thumbnail"
class="rounded-lg border shadow-lg file-thumbnail"
height="auto"
>
<template #placeholder>
<VSkeletonLoader class="object-cover w-full h-full" type="image" />
</template>
@@ -618,12 +624,12 @@ onMounted(() => {
</div>
</VCard>
</div>
<!-- 图片 -->
<div v-else-if="isFile && isImage && items.length > 0" class="d-flex justify-center align-center image-container">
<VImg :src="currentImgLink" max-width="100%" max-height="100%" class="rounded-lg shadow" />
</div>
<!-- 目录和文件列表 -->
<div v-else-if="dirs.length || files.length" class="file-list-container">
<VList subheader class="file-list">
@@ -631,11 +637,11 @@ onMounted(() => {
<template #default="{ item }">
<VHover>
<template #default="hover">
<VListItem
v-bind="hover.props"
class="px-3 pe-1 file-list-item"
<VListItem
v-bind="hover.props"
class="px-3 pe-1 file-list-item"
@click="listItemClick(item)"
:class="{'file-list-item-hover': hover.isHovering}"
:class="{ 'file-list-item-hover': hover.isHovering }"
rounded="sm"
:active="false"
>
@@ -650,9 +656,9 @@ onMounted(() => {
:color="item.type === 'dir' ? 'amber-darken-2' : 'grey-darken-1'"
class="file-icon"
/>
<VIcon
v-else-if="item.type == 'dir'"
icon="mdi-folder"
<VIcon
v-else-if="item.type == 'dir'"
icon="mdi-folder"
color="amber-darken-2"
class="file-icon"
/>
@@ -734,12 +740,12 @@ onMounted(() => {
</VVirtualScroll>
</VList>
</div>
<div v-else-if="filter" class="d-flex justify-center align-center text-grey empty-state">
<VIcon icon="mdi-file-search-outline" size="large" class="mb-2" />
<div class="text-subtitle-1 mt-2">没有匹配的文件或文件夹</div>
</div>
<div v-else-if="!loading" class="d-flex flex-column justify-center align-center empty-state">
<VIcon icon="mdi-folder-outline" size="large" class="mb-2" color="grey-lighten-1" />
<div class="text-subtitle-1 text-grey">空目录</div>
@@ -747,7 +753,7 @@ onMounted(() => {
</div>
</div>
</div>
<!-- 重命名弹窗 -->
<VDialog v-if="renamePopper" v-model="renamePopper" max-width="40rem" class="rename-dialog">
<VCard title="重命名" class="pa-2">
@@ -762,10 +768,10 @@ onMounted(() => {
<VCardText>
<VRow>
<VCol cols="12">
<VTextField
v-model="newName"
label="新名称"
:loading="renameLoading"
<VTextField
v-model="newName"
label="新名称"
:loading="renameLoading"
variant="outlined"
placeholder="输入新的文件名称"
hide-details="auto"
@@ -781,12 +787,8 @@ onMounted(() => {
自动识别名称
</VBtn>
<VSpacer />
<VBtn color="grey" variant="text" @click="renamePopper = false">
取消
</VBtn>
<VBtn color="primary" :disabled="!newName" variant="elevated" @click="rename" class="ms-2">
确定
</VBtn>
<VBtn color="grey" variant="text" @click="renamePopper = false"> 取消 </VBtn>
<VBtn color="primary" :disabled="!newName" variant="elevated" @click="rename" class="ms-2"> 确定 </VBtn>
</VCardActions>
</VCard>
</VDialog>
@@ -830,10 +832,6 @@ onMounted(() => {
position: relative;
}
.search-field {
max-width: 300px;
}
.file-list-container {
flex: 1;
overflow: hidden;

272
src/components/filebrowser/FileNavigator.vue
View File

@@ -12,34 +12,34 @@ const display = useDisplay()
const props = defineProps({
storage: {
type: String,
default: 'local'
default: 'local',
},
currentPath: {
type: String,
default: '/'
default: '/',
},
items: {
type: Array as PropType<FileItem[]>,
default: () => []
default: () => [],
},
endpoints: Object,
axios: {
type: Object as PropType<Axios>,
required: true,
}
},
})
// 对外事件
const emit = defineEmits(['navigate'])
// 树形节点缓存
const treeCache = ref<{[key: string]: FileItem[]}>({})
const treeCache = ref<{ [key: string]: FileItem[] }>({})
// 展开的文件夹
const expandedFolders = ref<string[]>([])
// 是否正在加载
const loading = ref<{[key: string]: boolean}>({})
const loading = ref<{ [key: string]: boolean }>({})
// 点击目录
function handleFolderClick(item: FileItem) {
@@ -79,33 +79,33 @@ function renderFolderIcon(isExpanded: boolean) {
async function loadSubdirectories(path: string) {
// 如果已经在加载中或已有缓存，跳过
if (loading.value[path] || treeCache.value[path]) return
// 标记为加载中
loading.value[path] = true
try {
// 构建假的文件项以加载目录内容
const fakeItem: FileItem = {
storage: props.storage,
type: 'dir',
name: path.split('/').pop() || '/',
path: path
path: path,
}
// 调用API加载目录内容
const url = props.endpoints?.list.url.replace(/{sort}/g, 'name')
const config: AxiosRequestConfig<FileItem> = {
url,
method: props.endpoints?.list.method || 'get',
data: fakeItem,
}
const result = await props.axios?.request(config)
if (result && Array.isArray(result)) {
// 过滤出目录项
const dirs = result.filter(item => item.type === 'dir')
// 缓存目录内容
treeCache.value[path] = dirs
}
@@ -129,24 +129,28 @@ function getDirectoryDepth(path: string) {
// 检索所有目录节点
function getAllDirectories() {
const allDirs: {dir: FileItem, level: number, parentPath: string}[] = []
const allDirs: { dir: FileItem; level: number; parentPath: string }[] = []
// 添加根目录的子目录
if (treeCache.value['/']) {
treeCache.value['/'].forEach(dir => {
allDirs.push({dir, level: 0, parentPath: '/'})
allDirs.push({ dir, level: 0, parentPath: '/' })
addSubdirectories(dir.path || '', 1, allDirs)
})
}
return allDirs
}
// 递归添加子目录
function addSubdirectories(parentPath: string, level: number, result: {dir: FileItem, level: number, parentPath: string}[]) {
function addSubdirectories(
parentPath: string,
level: number,
result: { dir: FileItem; level: number; parentPath: string }[],
) {
if (treeCache.value[parentPath]) {
treeCache.value[parentPath].forEach(dir => {
result.push({dir, level, parentPath})
result.push({ dir, level, parentPath })
if (isFolderExpanded(dir.path || '')) {
addSubdirectories(dir.path || '', level + 1, result)
}
@@ -155,47 +159,55 @@ function addSubdirectories(parentPath: string, level: number, result: {dir: File
}
// 监听当前路径变化，自动展开当前路径
watch(() => props.currentPath, async (newPath) => {
if (!newPath) return
// 如果当前路径不是根目录，自动展开父目录
if (newPath !== '/') {
const parts = newPath.split('/').filter(p => p)
let currentPath = ''
// 展开到当前路径的每一层
for (const part of parts) {
currentPath += '/' + part
// 如果该路径未展开，则展开它
if (!expandedFolders.value.includes(currentPath)) {
expandedFolders.value.push(currentPath)
// 确保子目录已加载
if (!treeCache.value[currentPath]) {
await loadSubdirectories(currentPath)
watch(
() => props.currentPath,
async newPath => {
if (!newPath) return
// 如果当前路径不是根目录，自动展开父目录
if (newPath !== '/') {
const parts = newPath.split('/').filter(p => p)
let currentPath = ''
// 展开到当前路径的每一层
for (const part of parts) {
currentPath += '/' + part
// 如果该路径未展开，则展开它
if (!expandedFolders.value.includes(currentPath)) {
expandedFolders.value.push(currentPath)
// 确保子目录已加载
if (!treeCache.value[currentPath]) {
await loadSubdirectories(currentPath)
}
}
// 如果有上一级目录，确保它已加载
const parentPath = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/'
if (!treeCache.value[parentPath]) {
await loadSubdirectories(parentPath)
}
}
// 如果有上一级目录，确保它已加载
const parentPath = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/'
if (!treeCache.value[parentPath]) {
await loadSubdirectories(parentPath)
}
}
}
}, { immediate: true })
},
{ immediate: true },
)
// 监听目录变化，缓存当前目录的内容
watch(() => props.items, (newItems) => {
if (newItems && newItems.length > 0) {
// 过滤出目录项
const dirs = newItems.filter(item => item.type === 'dir')
// 缓存当前目录内容
treeCache.value[props.currentPath || '/'] = dirs
}
}, { immediate: true })
watch(
() => props.items,
newItems => {
if (newItems && newItems.length > 0) {
// 过滤出目录项
const dirs = newItems.filter(item => item.type === 'dir')
// 缓存当前目录内容
treeCache.value[props.currentPath || '/'] = dirs
}
},
{ immediate: true },
)
// 是否为移动端
const isMobile = computed(() => {
@@ -219,106 +231,91 @@ onMounted(async () => {
// 检查路径是否为指定目录的子目录或后代
function isChildOrDescendant(path: string, ancestorPath: string) {
if (!path || !ancestorPath) return false;
if (ancestorPath === '/') return true;
if (!path || !ancestorPath) return false
if (ancestorPath === '/') return true
// 确保路径以斜杠结尾，便于比较
const normalizedPath = path.endsWith('/') ? path : path + '/';
const normalizedAncestorPath = ancestorPath.endsWith('/') ? ancestorPath : ancestorPath + '/';
const normalizedPath = path.endsWith('/') ? path : path + '/'
const normalizedAncestorPath = ancestorPath.endsWith('/') ? ancestorPath : ancestorPath + '/'
// 检查路径是否以祖先路径开头，但不是祖先路径本身
return normalizedPath.startsWith(normalizedAncestorPath) && normalizedPath !== normalizedAncestorPath;
return normalizedPath.startsWith(normalizedAncestorPath) && normalizedPath !== normalizedAncestorPath
}
// 计算目录相对于其祖先的缩进级别
function getIndentLevel(path: string, ancestorPath: string) {
if (!path || !ancestorPath) return 0;
if (!path || !ancestorPath) return 0
// 根目录特殊处理
if (ancestorPath === '/') {
return path.split('/').filter(p => p).length - 1;
return path.split('/').filter(p => p).length - 1
}
// 计算路径中斜杠的数量差异
const pathParts = path.split('/').filter(p => p).length;
const ancestorParts = ancestorPath.split('/').filter(p => p).length;
return pathParts - ancestorParts;
const pathParts = path.split('/').filter(p => p).length
const ancestorParts = ancestorPath.split('/').filter(p => p).length
return pathParts - ancestorParts
}
</script>
<template>
<div class="file-navigator" v-if="!isMobile">
<div class="navigator-header">
<VIcon icon="mdi-folder-home" color="primary" class="me-2" />
<span class="font-weight-medium">文件导航</span>
</div>
<div class="tree-container">
<!-- 根目录项 -->
<div
<div
class="tree-item root-item"
:class="{ 'active': currentPath === '/' }"
@click="handleFolderClick({
storage: storage,
type: 'dir',
name: '/',
path: '/'
})"
@click="
handleFolderClick({
storage: storage,
type: 'dir',
name: '/',
path: '/',
})
"
>
<div class="folder-content">
<VIcon
size="small"
icon="mdi-home"
:color="currentPath === '/' ? 'primary' : 'grey-darken-1'"
class="me-2"
/>
<span>根目录</span>
</div>
</div>
<!-- 加载根目录 -->
<div v-if="loading['/']" class="tree-loading">
<VProgressCircular indeterminate size="24" color="primary" class="ma-2" />
<span>加载目录结构...</span>
</div>
<!-- 目录树结构 -->
<template v-else>
<!-- 一级目录(根目录下的目录) -->
<div v-for="directory in rootDirectories" :key="directory.path" class="tree-item-container">
<!-- 目录项 -->
<div
class="tree-item"
:class="{ 'active': currentPath === directory.path }"
>
<div class="tree-item" :class="{ 'active': currentPath === directory.path }">
<div class="folder-toggle" @click.stop="toggleFolder(directory.path || '')">
<VProgressCircular
v-if="loading[directory.path || '']"
indeterminate
size="14"
width="2"
color="primary"
<VProgressCircular
v-if="loading[directory.path || '']"
indeterminate
size="14"
width="2"
color="primary"
/>
<VIcon
<VIcon
v-else
size="small"
:icon="isFolderExpanded(directory.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'"
size="small"
:icon="isFolderExpanded(directory.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'"
/>
</div>
<div class="folder-content" @click.stop="handleFolderClick(directory)">
<VIcon
size="small"
:icon="renderFolderIcon(isFolderExpanded(directory.path || ''))"
:color="currentPath === directory.path ? 'primary' : 'amber-darken-1'"
<VIcon
size="small"
:icon="renderFolderIcon(isFolderExpanded(directory.path || ''))"
:color="currentPath === directory.path ? 'primary' : 'amber-darken-1'"
class="me-1"
/>
<VTooltip :disabled="directory.name.length <= 18">
<template #activator="{ props: tooltipProps }">
<span
class="folder-name"
v-bind="tooltipProps"
>
<span class="folder-name" v-bind="tooltipProps">
{{ directory.name }}
</span>
</template>
@@ -326,7 +323,7 @@ function getIndentLevel(path: string, ancestorPath: string) {
</VTooltip>
</div>
</div>
<!-- 子目录容器 - 如果该目录被展开，显示其所有子目录 -->
<div v-if="isFolderExpanded(directory.path || '')">
<!-- 加载中状态 -->
@@ -334,48 +331,45 @@ function getIndentLevel(path: string, ancestorPath: string) {
<VProgressCircular indeterminate size="14" color="primary" class="ma-2" />
<span class="text-caption">加载中...</span>
</div>
<!-- 所有层级的子目录列表 -->
<div v-else>
<!-- 遍历所有扁平化的目录列表，查找对应层级的目录 -->
<div
v-for="item in flattenedDirectories"
:key="item.dir.path"
v-show="isChildOrDescendant(item.dir.path || '', directory.path || '')"
<div
v-for="item in flattenedDirectories"
:key="item.dir.path"
v-show="isChildOrDescendant(item.dir.path || '', directory.path || '')"
class="tree-item"
:class="{ 'active': currentPath === item.dir.path }"
:style="{ paddingLeft: (16 + getIndentLevel(item.dir.path || '', directory.path || '') * 12) + 'px' }"
:style="{ paddingLeft: 16 + getIndentLevel(item.dir.path || '', directory.path || '') * 12 + 'px' }"
>
<!-- 展开/折叠按钮 -->
<div class="folder-toggle" @click.stop="toggleFolder(item.dir.path || '')">
<VProgressCircular
v-if="loading[item.dir.path || '']"
indeterminate
size="14"
width="2"
color="primary"
<VProgressCircular
v-if="loading[item.dir.path || '']"
indeterminate
size="14"
width="2"
color="primary"
/>
<VIcon
<VIcon
v-else
size="small"
:icon="isFolderExpanded(item.dir.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'"
size="small"
:icon="isFolderExpanded(item.dir.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'"
/>
</div>
<!-- 文件夹图标和名称 -->
<div class="folder-content" @click.stop="handleFolderClick(item.dir)">
<VIcon
size="small"
:icon="renderFolderIcon(isFolderExpanded(item.dir.path || ''))"
:color="currentPath === item.dir.path ? 'primary' : 'amber-darken-1'"
<VIcon
size="small"
:icon="renderFolderIcon(isFolderExpanded(item.dir.path || ''))"
:color="currentPath === item.dir.path ? 'primary' : 'amber-darken-1'"
class="me-1"
/>
<VTooltip :disabled="item.dir.name.length <= 18">
<template #activator="{ props: tooltipProps }">
<span
class="folder-name"
v-bind="tooltipProps"
>
<span class="folder-name" v-bind="tooltipProps">
{{ item.dir.name }}
</span>
</template>
@@ -432,11 +426,11 @@ function getIndentLevel(path: string, ancestorPath: string) {
min-width: 100%;
max-width: 100%;
box-sizing: border-box;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.05);
}
&.active {
background-color: rgba(var(--v-theme-primary), 0.08);
}
@@ -488,4 +482,4 @@ function getIndentLevel(path: string, ancestorPath: string) {
.pl-8 {
padding-left: 20px !important;
}
</style>
</style>

114
src/components/filebrowser/FileToolbar.vue
View File

@@ -61,18 +61,6 @@ const pathSegments = computed(() => {
)
})
// 当前存储
const storageObject = computed(() => {
return inProps.storages?.find(item => item.value === inProps.storage)
})
// 切换存储
function changeStorage(code: string) {
if (inProps.storage !== code) {
emit('storagechanged', code)
}
}
// 路径变化
function changePath(item: FileItem) {
emit('pathchanged', item)
@@ -120,10 +108,10 @@ const pathSegmentRef = ref<HTMLElement | null>(null)
function checkTextTruncated(event: MouseEvent) {
const target = event.target as HTMLElement
if (!target) return
// 动态设置tooltip是否禁用
const isTextOverflowing = target.offsetWidth < target.scrollWidth
// 找到最近的tooltip组件并设置disabled属性
const tooltipEl = target.closest('.v-tooltip')
if (tooltipEl) {
@@ -138,37 +126,31 @@ function checkTextTruncated(event: MouseEvent) {
<template>
<VToolbar flat dense class="file-toolbar">
<VToolbarItems class="overflow-hidden w-100">
<VBtn
variant="text"
<VBtn
variant="text"
:input-value="inProps.item?.path === '/'"
color="primary"
class="px-1 path-button home-button"
color="primary"
class="px-1 path-button home-button"
@click="changePath(inProps.itemstack[0])"
>
<VIcon icon="mdi-home" class="me-2" />
<span class="text-truncate">根目录</span>
<VIcon icon="mdi-home" class="mx-2" />
</VBtn>
<div class="breadcrumb">
<template v-for="(segment, index) in pathSegments" :key="index">
<VBtn
v-if="display.mdAndUp.value"
variant="text"
color="primary"
density="comfortable"
density="comfortable"
:input-value="index === pathSegments.length - 1"
:class="['px-1', 'path-button', {'current-path': index === pathSegments.length - 1}]"
:class="['px-1', 'path-button', { 'current-path': index === pathSegments.length - 1 }]"
@click="changePath(inProps.itemstack[index + 1])"
>
<VIcon icon="mdi-chevron-right" size="small" />
<VTooltip>
<template #activator="{ props }">
<span
class="path-segment"
v-bind="props"
ref="pathSegmentRef"
@mouseover="checkTextTruncated"
>
<span class="path-segment" v-bind="props" ref="pathSegmentRef" @mouseover="checkTextTruncated">
{{ segment.name }}
</span>
</template>
@@ -183,43 +165,23 @@ function checkTextTruncated(event: MouseEvent) {
<div class="file-actions">
<VTooltip text="调整排序">
<template #activator="{ props }">
<VBtn
v-bind="props"
@click="changeSort"
icon
variant="text"
color="primary"
class="action-button"
>
<VBtn v-bind="props" @click="changeSort" icon variant="text" color="primary" class="action-button">
<VIcon :icon="sortIcon" />
</VBtn>
</template>
</VTooltip>
<VTooltip text="返回上一级" v-if="pathSegments.length > 0">
<template #activator="{ props }">
<VBtn
v-bind="props"
@click="goUp"
icon
variant="text"
color="primary"
class="action-button"
>
<VBtn v-bind="props" @click="goUp" icon variant="text" color="primary" class="action-button">
<VIcon icon="mdi-arrow-up" />
</VBtn>
</template>
</VTooltip>
<VDialog v-model="newFolderPopper" max-width="40rem" class="mkdir-dialog">
<template #activator="{ props }">
<VBtn
v-bind="props"
icon
variant="text"
color="primary"
class="action-button"
>
<VBtn v-bind="props" icon variant="text" color="primary" class="action-button">
<VTooltip text="新建文件夹">
<template #activator="{ props: _props }">
<VIcon v-bind="_props" icon="mdi-folder-plus" />
@@ -237,9 +199,9 @@ function checkTextTruncated(event: MouseEvent) {
<DialogCloseBtn @click="newFolderPopper = false" />
<VDivider class="mt-3" />
<VCardText>
<VTextField
v-model="newFolderName"
label="文件夹名称"
<VTextField
v-model="newFolderName"
label="文件夹名称"
placeholder="请输入文件夹名称"
variant="outlined"
hide-details="auto"
@@ -250,13 +212,7 @@ function checkTextTruncated(event: MouseEvent) {
<VCardActions class="pa-4 pt-0">
<VSpacer />
<VBtn color="grey" variant="text" @click="newFolderPopper = false">取消</VBtn>
<VBtn
:disabled="!newFolderName"
color="primary"
variant="elevated"
@click="mkdir"
class="ms-2"
>
<VBtn :disabled="!newFolderName" color="primary" variant="elevated" @click="mkdir" class="ms-2">
创建
</VBtn>
</VCardActions>
@@ -277,11 +233,11 @@ function checkTextTruncated(event: MouseEvent) {
.home-button {
min-width: 50px;
flex-shrink: 0;
@media (min-width: 960px) {
max-width: unset;
}
@media (max-width: 959px) {
max-width: 120px;
}
@@ -296,16 +252,16 @@ function checkTextTruncated(event: MouseEvent) {
-ms-overflow-style: none;
flex: 1;
min-width: 0;
&::-webkit-scrollbar {
display: none;
}
// 确保当面包屑宽度超出容器时，最后一个元素可见
&:hover {
scroll-behavior: smooth;
}
// 允许在触摸设备上滚动
touch-action: pan-x;
}
@@ -316,13 +272,13 @@ function checkTextTruncated(event: MouseEvent) {
height: 36px;
font-weight: normal;
flex-shrink: 0;
&:not(.current-path) {
@media (max-width: 959px) {
max-width: 120px;
}
}
&.current-path {
flex-shrink: 1;
}
@@ -333,34 +289,34 @@ function checkTextTruncated(event: MouseEvent) {
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
.path-button:not(.current-path) & {
@media (min-width: 1200px) {
max-width: 200px;
}
@media (min-width: 960px) and (max-width: 1199px) {
max-width: 150px;
}
@media (min-width: 600px) and (max-width: 959px) {
max-width: 100px;
}
@media (max-width: 599px) {
max-width: 80px;
}
}
.current-path & {
@media (min-width: 960px) {
max-width: unset;
}
@media (max-width: 959px) {
max-width: 150px;
}
@media (max-width: 599px) {
max-width: 120px;
}
@@ -371,7 +327,7 @@ function checkTextTruncated(event: MouseEvent) {
margin: 0 2px;
border-radius: 4px;
flex-shrink: 0;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.05);
}

5
src/plugins/vuetify/defaults.ts
View File

@@ -1,3 +1,5 @@
import { VCard } from 'vuetify/lib/components/index.mjs'
export default {
IconBtn: {
icon: true,
@@ -27,6 +29,9 @@ export default {
// set v-btn default color to primary
color: 'primary',
},
VCard: {
elevation: 3,
},
VChip: {
elevation: 0,
},

6
src/views/torrent/TorrentCardListView.vue
View File

@@ -545,7 +545,7 @@ function loadMore({ done }: { done: any }) {
</div>
<!-- 筛选菜单 -->
<VDialog v-model="filterMenuOpen" max-width="400px" location="center">
<VDialog v-model="filterMenuOpen" max-width="25rem" location="center">
<VCard>
<VCardTitle class="py-2 d-flex align-center">
<VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
@@ -705,10 +705,6 @@ function loadMore({ done }: { done: any }) {
.grid-torrent-card {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
background-color: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
border-radius: 12px;
padding: 12px;
}
@media (max-width: 600px) {

4
src/views/torrent/TorrentRowListView.vue
View File

@@ -1,16 +1,12 @@
<script lang="ts" setup>
import type { Context } from '@/api/types'
import TorrentItem from '@/components/cards/TorrentItem.vue'
import FilterOption from '@/components/misc/FilterOption.vue'
import { useDisplay } from 'vuetify'
// 设备模式
const display = useDisplay()
const appMode = inject('pwaMode') && display.mdAndDown.value
// 过滤弹窗
const filterDialog = ref(false)
// 定义输入参数
const props = defineProps({
items: Array as PropType<Context[]>,