fix ui

src/components/FileBrowser.vue

@@ -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" />
+            <VIcon
-            <span class="text-truncate">{{ storagesArray.find(item => item.value === activeStorage)?.title || '本地' }}</span>
+              :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;

src/components/cards/TorrentCard.vue

@@ -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 {

src/components/cards/TorrentItem.vue

@@ -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;
+  width: 32px;
-  height: 24px;
+  height: 32px;
   border-radius: 4px;
   margin-right: 8px;
 }

src/components/dialog/AddDownloadDialog.vue

@@ -118,15 +118,16 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog max-width="45rem" scrollable>
+  <VDialog max-width="35rem" scrollable>
     <VCard>
-      <VCardItem>
+      <VCardTitle class="py-3">
-        <VCardTitle v-if="title">{{ torrent?.site_name }} - {{ title }}</VCardTitle>
+        <VIcon icon="mdi-download" class="me-2" />
-        <VCardTitle v-else>确认下载</VCardTitle>
+        <span v-if="title">{{ torrent?.site_name }} - {{ title }}</span>
-        <DialogCloseBtn @click="emit('close')" />
+        <span v-else>确认下载</span>
-      </VCardItem>
+      </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
+        <VBtn variant="elevated" :disabled="loading" @click="addDownload" :prepend-icon="icon" class="px-5">
-          variant="elevated"
-          :disabled="loading"
-          @click="addDownload"
-          :prepend-icon="icon"
-          class="px-5"
-          size="large"
-        >
           {{ buttonText }}
         </VBtn>
       </VCardText>

src/components/filebrowser/FileList.vue

@@ -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 
+                  <VListItem
-                    v-bind="hover.props" 
+                    v-bind="hover.props"
-                    class="px-3 pe-1 file-list-item" 
+                    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 
+                        <VIcon
-                          v-else-if="item.type == 'dir'" 
+                          v-else-if="item.type == 'dir'"
-                          icon="mdi-folder" 
+                          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 
+            <VTextField
-              v-model="newName" 
+              v-model="newName"
-              label="新名称" 
+              label="新名称"
-              :loading="renameLoading" 
+              :loading="renameLoading"
               variant="outlined"
               placeholder="输入新的文件名称"
               hide-details="auto"
@@ -781,12 +787,8 @@ onMounted(() => {
           自动识别名称
         </VBtn>
         <VSpacer />
-        <VBtn color="grey" variant="text" @click="renamePopper = false">
+        <VBtn color="grey" variant="text" @click="renamePopper = false"> 取消 </VBtn>
-          取消
+        <VBtn color="primary" :disabled="!newName" variant="elevated" @click="rename" class="ms-2"> 确定 </VBtn>
-        </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;

src/components/filebrowser/FileNavigator.vue

@@ -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) => {
+watch(
-  if (!newPath) return
+  () => 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) => {
+watch(
-  if (newItems && newItems.length > 0) {
+  () => props.items,
-    // 过滤出目录项
+  newItems => {
-    const dirs = newItems.filter(item => item.type === 'dir')
+    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,106 +231,91 @@ onMounted(async () => {
 
 // 检查路径是否为指定目录的子目录或后代
 function isChildOrDescendant(path: string, ancestorPath: string) {
-  if (!path || !ancestorPath) return false;
+  if (!path || !ancestorPath) return false
-  if (ancestorPath === '/') return true;
+  if (ancestorPath === '/') return true
-  
+
   // 确保路径以斜杠结尾，便于比较
-  const normalizedPath = path.endsWith('/') ? path : path + '/';
+  const normalizedPath = path.endsWith('/') ? path : path + '/'
-  const normalizedAncestorPath = ancestorPath.endsWith('/') ? ancestorPath : ancestorPath + '/';
+  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 pathParts = path.split('/').filter(p => p).length
-  const ancestorParts = ancestorPath.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 
+      <div
         class="tree-item root-item"
         :class="{ 'active': currentPath === '/' }"
-        @click="handleFolderClick({ 
+        @click="
-          storage: storage, 
+          handleFolderClick({
-          type: 'dir', 
+            storage: storage,
-          name: '/',
+            type: 'dir',
-          path: '/'
+            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 
+          <div class="tree-item" :class="{ 'active': currentPath === directory.path }">
-            class="tree-item"
-            :class="{ 'active': currentPath === directory.path }"
-          >
             <div class="folder-toggle" @click.stop="toggleFolder(directory.path || '')">
-              <VProgressCircular 
+              <VProgressCircular
-                v-if="loading[directory.path || '']" 
+                v-if="loading[directory.path || '']"
-                indeterminate 
+                indeterminate
-                size="14" 
+                size="14"
-                width="2" 
+                width="2"
-                color="primary" 
+                color="primary"
               />
-              <VIcon 
+              <VIcon
                 v-else
-                size="small" 
+                size="small"
-                :icon="isFolderExpanded(directory.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'" 
+                :icon="isFolderExpanded(directory.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'"
               />
             </div>
             <div class="folder-content" @click.stop="handleFolderClick(directory)">
-              <VIcon 
+              <VIcon
-                size="small" 
+                size="small"
-                :icon="renderFolderIcon(isFolderExpanded(directory.path || ''))" 
+                :icon="renderFolderIcon(isFolderExpanded(directory.path || ''))"
-                :color="currentPath === directory.path ? 'primary' : 'amber-darken-1'" 
+                :color="currentPath === directory.path ? 'primary' : 'amber-darken-1'"
                 class="me-1"
               />
               <VTooltip :disabled="directory.name.length <= 18">
                 <template #activator="{ props: tooltipProps }">
-                  <span 
+                  <span class="folder-name" v-bind="tooltipProps">
-                    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 
+              <div
-                v-for="item in flattenedDirectories" 
+                v-for="item in flattenedDirectories"
-                :key="item.dir.path" 
+                :key="item.dir.path"
-                v-show="isChildOrDescendant(item.dir.path || '', directory.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 
+                  <VProgressCircular
-                    v-if="loading[item.dir.path || '']" 
+                    v-if="loading[item.dir.path || '']"
-                    indeterminate 
+                    indeterminate
-                    size="14" 
+                    size="14"
-                    width="2" 
+                    width="2"
-                    color="primary" 
+                    color="primary"
                   />
-                  <VIcon 
+                  <VIcon
                     v-else
-                    size="small" 
+                    size="small"
-                    :icon="isFolderExpanded(item.dir.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'" 
+                    :icon="isFolderExpanded(item.dir.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'"
                   />
                 </div>
-                
+
                 <!-- 文件夹图标和名称 -->
                 <div class="folder-content" @click.stop="handleFolderClick(item.dir)">
-                  <VIcon 
+                  <VIcon
-                    size="small" 
+                    size="small"
-                    :icon="renderFolderIcon(isFolderExpanded(item.dir.path || ''))" 
+                    :icon="renderFolderIcon(isFolderExpanded(item.dir.path || ''))"
-                    :color="currentPath === item.dir.path ? 'primary' : 'amber-darken-1'" 
+                    :color="currentPath === item.dir.path ? 'primary' : 'amber-darken-1'"
                     class="me-1"
                   />
                   <VTooltip :disabled="item.dir.name.length <= 18">
                     <template #activator="{ props: tooltipProps }">
-                      <span 
+                      <span class="folder-name" v-bind="tooltipProps">
-                        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>

src/components/filebrowser/FileToolbar.vue

@@ -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 
+      <VBtn
-        variant="text" 
+        variant="text"
         :input-value="inProps.item?.path === '/'"
-        color="primary" 
+        color="primary"
-        class="px-1 path-button home-button" 
+        class="px-1 path-button home-button"
         @click="changePath(inProps.itemstack[0])"
       >
-        <VIcon icon="mdi-home" class="me-2" />
+        <VIcon icon="mdi-home" class="mx-2" />
-        <span class="text-truncate">根目录</span>
       </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 
+                <span class="path-segment" v-bind="props" ref="pathSegmentRef" @mouseover="checkTextTruncated">
-                  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 
+            <VBtn v-bind="props" @click="changeSort" icon variant="text" color="primary" class="action-button">
-              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 
+            <VBtn v-bind="props" @click="goUp" icon variant="text" color="primary" class="action-button">
-              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 
+            <VBtn v-bind="props" icon variant="text" color="primary" class="action-button">
-              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 
+              <VTextField
-                v-model="newFolderName" 
+                v-model="newFolderName"
-                label="文件夹名称" 
+                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 
+              <VBtn :disabled="!newFolderName" color="primary" variant="elevated" @click="mkdir" class="ms-2">
-                :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);
   }

src/plugins/vuetify/defaults.ts

@@ -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,
   },

src/views/torrent/TorrentCardListView.vue

@@ -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) {

src/views/torrent/TorrentRowListView.vue

@@ -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[]>,