mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-06 16:16:42 +08:00
fix ui
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -127,7 +127,7 @@ const isImage = computed(() => {
|
||||
|
||||
// 创建一个计算属性用于设置虚拟滚动的高度
|
||||
const fileListStyle = computed(() => {
|
||||
return 'height: 100%';
|
||||
return 'height: 100%'
|
||||
})
|
||||
|
||||
// 调整选择模式
|
||||
@@ -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">
|
||||
@@ -600,7 +600,13 @@ onMounted(() => {
|
||||
<!-- 文件详情 -->
|
||||
<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>
|
||||
@@ -635,7 +641,7 @@ onMounted(() => {
|
||||
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"
|
||||
>
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
@@ -89,7 +89,7 @@ async function loadSubdirectories(path: string) {
|
||||
storage: props.storage,
|
||||
type: 'dir',
|
||||
name: path.split('/').pop() || '/',
|
||||
path: path
|
||||
path: path,
|
||||
}
|
||||
|
||||
// 调用API加载目录内容
|
||||
@@ -129,12 +129,12 @@ 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)
|
||||
})
|
||||
}
|
||||
@@ -143,10 +143,14 @@ function getAllDirectories() {
|
||||
}
|
||||
|
||||
// 递归添加子目录
|
||||
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
|
||||
watch(
|
||||
() => props.currentPath,
|
||||
async newPath => {
|
||||
if (!newPath) return
|
||||
|
||||
// 如果当前路径不是根目录,自动展开父目录
|
||||
if (newPath !== '/') {
|
||||
const parts = newPath.split('/').filter(p => p)
|
||||
let currentPath = ''
|
||||
// 如果当前路径不是根目录,自动展开父目录
|
||||
if (newPath !== '/') {
|
||||
const parts = newPath.split('/').filter(p => p)
|
||||
let currentPath = ''
|
||||
|
||||
// 展开到当前路径的每一层
|
||||
for (const part of parts) {
|
||||
currentPath += '/' + part
|
||||
// 展开到当前路径的每一层
|
||||
for (const part of parts) {
|
||||
currentPath += '/' + part
|
||||
|
||||
// 如果该路径未展开,则展开它
|
||||
if (!expandedFolders.value.includes(currentPath)) {
|
||||
expandedFolders.value.push(currentPath)
|
||||
// 如果该路径未展开,则展开它
|
||||
if (!expandedFolders.value.includes(currentPath)) {
|
||||
expandedFolders.value.push(currentPath)
|
||||
|
||||
// 确保子目录已加载
|
||||
if (!treeCache.value[currentPath]) {
|
||||
await loadSubdirectories(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')
|
||||
watch(
|
||||
() => props.items,
|
||||
newItems => {
|
||||
if (newItems && newItems.length > 0) {
|
||||
// 过滤出目录项
|
||||
const dirs = newItems.filter(item => item.type === 'dir')
|
||||
|
||||
// 缓存当前目录内容
|
||||
treeCache.value[props.currentPath || '/'] = dirs
|
||||
}
|
||||
}, { immediate: true })
|
||||
// 缓存当前目录内容
|
||||
treeCache.value[props.currentPath || '/'] = dirs
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// 是否为移动端
|
||||
const isMobile = computed(() => {
|
||||
@@ -219,60 +231,51 @@ 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;
|
||||
const pathParts = path.split('/').filter(p => p).length
|
||||
const ancestorParts = ancestorPath.split('/').filter(p => p).length
|
||||
|
||||
return pathParts - ancestorParts;
|
||||
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
|
||||
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>
|
||||
@@ -288,10 +291,7 @@ function getIndentLevel(path: string, ancestorPath: string) {
|
||||
<!-- 一级目录(根目录下的目录) -->
|
||||
<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 || '']"
|
||||
@@ -315,10 +315,7 @@ function getIndentLevel(path: string, ancestorPath: string) {
|
||||
/>
|
||||
<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>
|
||||
@@ -344,7 +341,7 @@ function getIndentLevel(path: string, ancestorPath: string) {
|
||||
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 || '')">
|
||||
@@ -372,10 +369,7 @@ function getIndentLevel(path: string, ancestorPath: string) {
|
||||
/>
|
||||
<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>
|
||||
|
||||
@@ -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)
|
||||
@@ -145,8 +133,7 @@ function checkTextTruncated(event: MouseEvent) {
|
||||
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">
|
||||
@@ -157,18 +144,13 @@ function checkTextTruncated(event: MouseEvent) {
|
||||
color="primary"
|
||||
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,14 +165,7 @@ 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>
|
||||
@@ -198,14 +173,7 @@ function checkTextTruncated(event: MouseEvent) {
|
||||
|
||||
<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>
|
||||
@@ -213,13 +181,7 @@ function checkTextTruncated(event: MouseEvent) {
|
||||
|
||||
<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" />
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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[]>,
|
||||
|
||||
Reference in New Issue
Block a user