Merge pull request #316 from madrays/v2

src/@layouts/components/VerticalNav.vue

@@ -117,13 +117,23 @@ function handleNavScroll(evt: Event) {
   }
 
   .nav-items {
+    overflow-x: hidden;
+    overflow-y: auto;
     block-size: 100%;
-
-    // ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
-    // overflow-x: hidden;
-
-    // // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
-    // overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 0 0 16px 0;
+    
+    /* 完全隐藏滚动条 */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    
+    > li {
+      margin-block-end: 2px;
+    }
   }
 
   .nav-item-title {
@@ -151,4 +161,4 @@ function handleNavScroll(evt: Event) {
     }
   }
 }
-</style>
+</style>

src/@layouts/components/VerticalNavLayout.vue

@@ -206,4 +206,4 @@ export default defineComponent({
     width: 100%;
   }
 }
-</style>
+</style>

src/@layouts/components/VerticalNavLink.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { NavLink } from '@layouts/types'
 
-defineProps<{
+// 定义类型必须使用vuetify中正确导出的类型
+const props = defineProps<{
   item: NavLink
 }>()
 </script>
@@ -15,12 +16,14 @@ defineProps<{
       :is="item.to ? 'RouterLink' : 'a'"
       :to="item.to"
       :href="item.href"
+      class="link-wrapper"
     >
       <VIcon
-        :icon="item.icon"
+        v-if="item.icon != null"
+        :icon="item.icon?.toString()"
+        size="20"
         class="nav-item-icon"
       />
-      <!-- 👉 Title -->
       <span class="nav-item-title">
         {{ item.title }}
       </span>
@@ -30,13 +33,54 @@ defineProps<{
 
 <style lang="scss">
 .layout-vertical-nav {
-  .nav-link a {
-    display: flex;
-    align-items: center;
-    border-radius: 0 3.125rem 3.125rem 0 !important;
-    cursor: pointer;
-    margin-inline-end: 1.125em;
-    padding-inline: 1.375rem 1rem;
+  .nav-link {
+    margin: 1px 16px;
+    position: relative;
+    
+    &.disabled {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+    
+    .router-link-active {
+      background-color: rgb(var(--v-theme-primary));
+      position: relative;
+      border-radius: 6px;
+      
+      .nav-item-icon,
+      .nav-item-title {
+        color: white;
+      }
+    }
+    
+    a, .link-wrapper {
+      display: flex;
+      align-items: center;
+      border-radius: 6px;
+      cursor: pointer;
+      padding: 8px 10px;
+      transition: background-color 0.2s ease;
+      position: relative;
+      
+      &:hover:not(.router-link-active) {
+        background-color: rgba(var(--v-theme-on-surface), 0.05);
+      }
+    }
+  }
+  
+  .nav-item-icon {
+    color: rgba(var(--v-theme-on-surface), 0.75);
+    margin-right: 8px;
+    min-width: 20px;
+  }
+  
+  .nav-item-title {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: rgba(var(--v-theme-on-surface), 0.85);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
-</style>
+</style>

src/@layouts/components/VerticalNavSectionTitle.vue

@@ -8,22 +8,22 @@ defineProps<{
 
 <template>
   <li class="nav-section-title">
-    <div class="title-wrapper">
-      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-      <span
-        class="title-text"
-        v-text="item.heading"
-      />
-      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-    </div>
+    <div class="title-text">{{ item.heading }}</div>
   </li>
 </template>
 
 <style lang="scss">
 .layout-vertical-nav {
   .nav-section-title {
-    padding-left: 1.375rem;
-    padding-right: 1rem;
+    margin: 16px 16px 6px 16px;
+    position: relative;
+    
+    .title-text {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: rgb(var(--v-theme-primary));
+      padding-left: 0;
+    }
   }
 }
 </style>

src/components/FileBrowser.vue

@@ -2,6 +2,7 @@
 import type { Axios } from 'axios'
 import FileList from './filebrowser/FileList.vue'
 import FileToolbar from './filebrowser/FileToolbar.vue'
+import FileNavigator from './filebrowser/FileNavigator.vue'
 import type { EndPoints, FileItem, StorageConf } from '@/api/types'
 import { storageOptions } from '@/api/constants'
 
@@ -144,21 +145,82 @@ async function storageChanged(storage: string) {
   emit('pathchanged', { storage: storage, path: '/', fileid: 'root' })
 }
 
+// 文件列表
+const fileListItems = ref<FileItem[]>([])
+
 // 路径变化
 function pathChanged(item: FileItem) {
   emit('pathchanged', item)
 }
 
+// 文件列表数据更新
+function fileListUpdated(items: FileItem[]) {
+  fileListItems.value = items
+}
+
 // 排序变化
 function sortChanged(s: string) {
   sort.value = s
   refreshPending.value = true
 }
+
+// 刷新浏览器
+function refreshBrowser() {
+  refreshPending.value = true
+}
 </script>
 
 <template>
-  <VCard class="mx-auto" :loading="loading > 0">
-    <div v-if="activeStorage && item">
+  <VCard class="file-browser" :loading="loading > 0" flat>
+    <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 }">
+          <VBtn
+            v-bind="menuProps"
+            class="storage-selector-btn"
+            variant="tonal"
+            color="primary"
+            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 end icon="mdi-chevron-down" />
+          </VBtn>
+        </template>
+        <VList density="compact" class="pa-1 storage-list">
+          <VListItem
+            v-for="(item, index) in storagesArray"
+            :key="index"
+            :disabled="item.value === activeStorage"
+            @click="storageChanged(item.value)"
+            class="storage-item"
+            rounded="sm"
+          >
+            <template #prepend>
+              <VIcon :icon="item.icon" size="small" class="me-2" />
+            </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">
       <FileToolbar
         :item="item"
         :itemstack="itemstack"
@@ -171,20 +233,101 @@ function sortChanged(s: string) {
         @foldercreated="refreshPending = true"
         @sortchanged="sortChanged"
       />
-      <FileList
-        :item="item"
-        :storage="activeStorage"
-        :icons="fileIcons"
-        :endpoints="endpoints"
-        :axios="axios"
-        :refreshpending="refreshPending"
-        :sort="sort"
-        @pathchanged="pathChanged"
-        @loading="loadingChanged"
-        @refreshed="refreshPending = false"
-        @filedeleted="refreshPending = true"
-        @renamed="refreshPending = true"
-      />
+      <div class="file-content-wrapper">
+        <FileNavigator
+          :storage="activeStorage"
+          :currentPath="item.path"
+          :items="fileListItems"
+          :endpoints="endpoints"
+          :axios="axios"
+          @navigate="pathChanged"
+        />
+        <FileList
+          :item="item"
+          :storage="activeStorage"
+          :icons="fileIcons"
+          :endpoints="endpoints"
+          :axios="axios"
+          :refreshpending="refreshPending"
+          :sort="sort"
+          @pathchanged="pathChanged"
+          @loading="loadingChanged"
+          @refreshed="refreshPending = false"
+          @filedeleted="refreshPending = true"
+          @renamed="refreshPending = true"
+          @items-updated="fileListUpdated"
+        />
+      </div>
     </div>
+    <VCardText v-else class="d-flex flex-column justify-center align-center text-center no-storage py-16">
+      <VIcon icon="mdi-database-off" size="64" color="grey-lighten-2" class="mb-4" />
+      <h3 class="text-h5 text-grey-darken-1">未配置存储</h3>
+      <p class="text-body-1 text-grey-darken-1">请先配置文件存储后再使用文件管理功能</p>
+    </VCardText>
   </VCard>
 </template>
+
+<style lang="scss" scoped>
+.file-browser {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.file-browser-header {
+  background-color: var(--v-theme-surface);
+  border-radius: 12px 12px 0 0;
+}
+
+.storage-selector-btn {
+  max-width: 180px;
+  font-size: 1rem;
+  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;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.storage-list {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.storage-item {
+  min-height: 36px;
+}
+
+.file-browser-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 48px); /* 减去标题栏高度 */
+  overflow: hidden;
+}
+
+.file-content-wrapper {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  border-radius: 0 0 12px 12px;
+}
+
+.no-storage {
+  flex: 1;
+}
+</style>

src/components/NoDataFound.vue

@@ -1,67 +1,239 @@
 <script setup lang="ts">
-import image from '@images/no-data.svg'
-
 const props = defineProps<Props>()
 
 interface Props {
   errorCode?: string
   errorTitle?: string
   errorDescription?: string
-  size?: number
+  icon?: string
+  iconColor?: string
 }
 </script>
 
 <template>
   <div class="no-data-container">
-    <VEmptyState :image="image" :size="props.size || 'auto'">
-      <template #title>
-        <div class="mt-8 text-2xl">
-          {{ props.errorTitle }}
-        </div>
-      </template>
-
-      <template #text>
-        <div class="text-subtitle mt-3">
-          {{ props.errorDescription }}
-        </div>
-      </template>
-
-      <template #actions>
-        <slot name="button" />
-      </template>
-    </VEmptyState>
+    <!-- 图标容器 -->
+    <div class="icon-wrapper">
+      <div class="icon-glow"></div>
+      <div class="icon-container">
+        <VIcon
+          :icon="props.icon || 'mdi-file-search-outline'"
+          :color="props.iconColor || 'white'"
+          size="48"
+          class="main-icon"
+        />
+      </div>
+      <div class="pulse-ring"></div>
+    </div>
+    
+    <!-- 标题 -->
+    <div class="error-title">
+      {{ props.errorTitle || '暂无数据' }}
+    </div>
+    
+    <!-- 描述 -->
+    <div class="error-description">
+      {{ props.errorDescription || '没有找到相关内容' }}
+    </div>
+    
+    <!-- 按钮插槽 -->
+    <div class="actions-container">
+      <slot name="button" />
+    </div>
   </div>
 </template>
 
 <style scoped>
 .no-data-container {
   width: 100%;
-}
-.no-data-container :deep(.v-empty-state) {
-  width: 100%;
-  max-width: 100%;
-}
-.no-data-container :deep(.v-empty-state__media) {
-  width: 100%;
-  max-width: 100%;
-}
-.no-data-container :deep(.v-responsive) {
-  width: 100%;
-  max-width: 450px;
-  margin: 0 auto;
-  height: auto !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem 1rem;
+  min-height: 300px;
+  text-align: center;
+  position: relative;
 }
 
-/* 移动响应式设计 */
-@media (max-width: 768px) {
-  .no-data-container :deep(.v-responsive) {
-    max-width: 350px;
+/* 图标样式 */
+.icon-wrapper {
+  position: relative;
+  margin: 0 auto 2rem;
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-glow {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(var(--v-theme-primary), 0.8) 0%, rgba(var(--v-theme-primary), 0) 70%);
+  filter: blur(15px);
+  opacity: 0.8;
+  animation: pulse 3s infinite ease-in-out;
+}
+
+.icon-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.9), rgba(var(--v-theme-secondary), 0.8));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 20px rgba(var(--v-theme-primary), 0.3),
+              0 2px 5px rgba(0, 0, 0, 0.1),
+              inset 0 1px 1px rgba(255, 255, 255, 0.2);
+  z-index: 2;
+}
+
+.main-icon {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+  animation: slight-bounce 3s infinite ease-in-out;
+}
+
+.pulse-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border: 2px solid rgba(var(--v-theme-primary), 0.5);
+  opacity: 0;
+  z-index: 1;
+  animation: ripple 2s infinite ease-out;
+}
+
+.pulse-ring::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 85px;
+  height: 85px;
+  border-radius: 50%;
+  border: 2px solid rgba(var(--v-theme-primary), 0.3);
+  animation: ripple 2s infinite 0.5s ease-out;
+}
+
+@keyframes ripple {
+  0% {
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0;
   }
 }
 
-@media (max-width: 480px) {
-  .no-data-container :deep(.v-responsive) {
-    max-width: 250px;
+@keyframes pulse {
+  0%, 100% { 
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
+  50% { 
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
+@keyframes slight-bounce {
+  0%, 100% { 
+    transform: translateY(0);
+  }
+  50% { 
+    transform: translateY(-3px);
+  }
+}
+
+/* 文字样式 */
+.error-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+  color: rgba(var(--v-theme-on-surface), 0.95);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  position: relative;
+}
+
+.error-title::after {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 3px;
+  background: linear-gradient(90deg, rgba(var(--v-theme-primary), 0.8), rgba(var(--v-theme-primary), 0.2));
+  border-radius: 3px;
+  margin: 0.5rem auto 0;
+}
+
+.error-description {
+  font-size: 1.1rem;
+  color: rgba(var(--v-theme-on-surface), 0.75);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+  max-width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.actions-container {
+  margin-top: 1.5rem;
+}
+
+.actions-container :deep(.v-btn) {
+  transform: translateY(0);
+  transition: transform 0.2s ease;
+}
+
+.actions-container :deep(.v-btn:hover) {
+  transform: translateY(-2px);
+}
+
+/* 响应式调整 */
+@media (max-width: 600px) {
+  .no-data-container {
+    padding: 2rem 1rem;
+  }
+  
+  .icon-wrapper {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 1.5rem;
+  }
+  
+  .icon-container {
+    width: 70px;
+    height: 70px;
+  }
+  
+  .icon-glow {
+    width: 70px;
+    height: 70px;
+  }
+  
+  .pulse-ring,
+  .pulse-ring::before {
+    width: 80px;
+    height: 80px;
+  }
+  
+  .error-title {
+    font-size: 1.4rem;
+  }
+  
+  .error-description {
+    font-size: 0.95rem;
+    max-width: 90%;
   }
 }
 </style>

src/components/cards/TorrentCard.vue

@@ -126,7 +126,6 @@ onMounted(() => {
         <div class="media-title-wrapper">
           <h3 class="media-title">
             {{ media?.title ?? meta?.name }}
-            <span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
           </h3>
         </div>
 
@@ -136,6 +135,7 @@ onMounted(() => {
             <img 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">
@@ -232,6 +232,7 @@ onMounted(() => {
               />
               <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.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
@@ -349,12 +350,16 @@ onMounted(() => {
 
 .season-tag {
   font-size: 0.875rem;
-  background-color: rgba(var(--v-theme-primary), 0.08);
-  color: rgb(var(--v-theme-primary));
-  padding: 2px 8px;
+  background-color: #5c6bc0;
+  color: white;
+  padding: 2px 6px;
   border-radius: 4px;
   margin-left: 8px;
   font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
 }
 
 .site-info {
@@ -362,6 +367,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
+  flex-wrap: wrap;
 }
 
 .site-icon {
@@ -562,6 +568,13 @@ onMounted(() => {
   font-weight: 600;
 }
 
+.source-season-tag {
+  font-size: 0.75rem;
+  padding: 1px 4px;
+  margin-left: 4px;
+  background-color: #5c6bc0;
+}
+
 .source-discount {
   font-weight: 700;
   font-size: 0.8rem;

src/components/cards/TorrentItem.vue

@@ -154,6 +154,7 @@ onMounted(() => {
           <img 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"
@@ -167,7 +168,6 @@ 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>
 
@@ -255,44 +255,52 @@ onMounted(() => {
 }
 
 .site-wrapper {
-  position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  width: 50px;
-  margin-right: 16px;
+  min-width: 140px;
+  flex-wrap: wrap;
 }
 
 .site-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 2px;
-  margin-bottom: 4px;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  margin-right: 8px;
 }
 
 .site-fallback {
-  width: 32px;
-  height: 32px;
-  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1rem;
+  border-radius: 4px;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
   font-weight: 700;
-  color: rgba(var(--v-theme-on-surface), 0.8);
-  background-color: rgba(var(--v-theme-on-surface), 0.1);
-  border-radius: 2px;
-  margin-bottom: 4px;
+  margin-right: 8px;
+  font-size: 0.8rem;
 }
 
 .site-name {
-  font-size: 0.8rem;
+  margin-right: 8px;
   font-weight: 600;
-  color: rgba(var(--v-theme-on-surface), 0.85);
-  text-align: center;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  font-size: 0.9rem;
+}
+
+.season-tag {
+  font-size: 0.875rem;
+  background-color: #5c6bc0;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-right: 8px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
 }
 
 .free-tag {
@@ -347,16 +355,6 @@ onMounted(() => {
   color: rgba(var(--v-theme-on-surface), 0.87);
 }
 
-.season-tag {
-  font-size: 0.9rem;
-  background-color: rgba(var(--v-theme-primary), 0.08);
-  color: rgb(var(--v-theme-primary));
-  padding: 2px 8px;
-  border-radius: 4px;
-  margin-left: 4px;
-  font-weight: 600;
-}
-
 .item-actions {
   display: flex;
   flex-direction: column;
@@ -501,10 +499,22 @@ onMounted(() => {
   }
 
   .site-wrapper {
-    width: 40px;
+    min-width: 100px;
+    flex-wrap: wrap;
     margin-right: 10px;
   }
 
+  .site-name {
+    font-size: 0.8rem;
+    margin-right: 4px;
+  }
+
+  .season-tag {
+    font-size: 0.75rem;
+    padding: 1px 4px;
+    margin-right: 4px;
+  }
+
   .resource-tag {
     font-size: 0.75rem;
     padding: 2px 6px;

src/components/filebrowser/FileList.vue

@@ -35,7 +35,7 @@ const inProps = defineProps({
 })
 
 // 对外事件
-const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted', 'renamed'])
+const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted', 'renamed', 'items-updated'])
 
 // 确认框
 const createConfirm = useConfirm()
@@ -125,6 +125,11 @@ const isImage = computed(() => {
   return ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext ?? '')
 })
 
+// 创建一个计算属性用于设置虚拟滚动的高度
+const fileListStyle = computed(() => {
+  return 'height: 100%';
+})
+
 // 调整选择模式
 function changeSelectMode() {
   selectMode.value = !selectMode.value
@@ -149,6 +154,9 @@ async function list_files() {
   items.value = (await inProps.axios.request(config)) ?? []
   emit('loading', false)
   loading.value = false
+  
+  // 通知父组件文件列表更新
+  emit('items-updated', items.value)
 }
 
 // 删除项目
@@ -539,8 +547,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard class="d-flex flex-column">
-    <VToolbar v-if="!loading" density="compact" flat color="gray">
+  <div class="file-list-component">
+    <VToolbar v-if="!loading" density="compact" flat color="grey-lighten-4" class="file-actions-toolbar">
       <VTextField
         v-if="!isFile"
         v-model="filter"
@@ -548,176 +556,235 @@ onMounted(() => {
         flat
         density="compact"
         variant="solo-filled"
-        placeholder="搜索 ..."
-        prepend-inner-icon="mdi-filter-outline"
-        class="me-2"
+        placeholder="搜索文件和文件夹..."
+        prepend-inner-icon="mdi-magnify"
+        class="me-2 search-field"
         rounded
+        bg-color="grey-lighten-5"
       />
       <VSpacer v-if="isFile" />
-      <IconBtn v-if="!isFile" @click="changeSelectMode">
-        <VIcon color="primary" v-if="selectMode"> mdi-selection-remove </VIcon>
-        <VIcon color="primary" v-else>mdi-select</VIcon>
+      <IconBtn v-if="!isFile" @click="changeSelectMode" tooltip="切换选择模式" class="action-btn">
+        <VIcon :color="selectMode ? 'primary' : 'grey-darken-1'" v-if="selectMode"> mdi-selection-remove </VIcon>
+        <VIcon :color="selectMode ? 'grey-darken-1' : 'primary'" v-else>mdi-select</VIcon>
       </IconBtn>
-      <IconBtn v-if="isFile" @click="recognize(inProps.item.path || '')">
+      <IconBtn v-if="isFile" @click="recognize(inProps.item.path || '')" tooltip="识别" class="action-btn">
         <VIcon color="primary"> mdi-text-recognition </VIcon>
       </IconBtn>
-      <IconBtn v-if="isFile && items.length > 0" @click="download(items[0])">
+      <IconBtn v-if="isFile && items.length > 0" @click="download(items[0])" tooltip="下载" class="action-btn">
         <VIcon color="primary"> mdi-download </VIcon>
       </IconBtn>
-      <IconBtn v-if="!isFile" @click="list_files">
+      <IconBtn v-if="!isFile" @click="list_files" tooltip="刷新" class="action-btn">
         <VIcon color="primary"> mdi-refresh </VIcon>
       </IconBtn>
       <!-- 批量操作按钮 -->
-      <span v-if="selected.length > 0">
-        <IconBtn @click.stop="batchScrape">
+      <span v-if="selected.length > 0" class="batch-actions">
+        <VChip color="primary" size="small" class="me-2">已选择 {{ selected.length }} 项</VChip>
+        <IconBtn @click.stop="batchScrape" tooltip="批量刮削" class="action-btn">
           <VIcon color="primary" icon="mdi-auto-fix" />
         </IconBtn>
-        <IconBtn @click.stop="showBatchTransfer">
+        <IconBtn @click.stop="showBatchTransfer" tooltip="批量整理" class="action-btn">
           <VIcon color="primary" icon="mdi-folder-arrow-right" />
         </IconBtn>
-        <IconBtn @click.stop="batchDelete">
+        <IconBtn @click.stop="batchDelete" tooltip="批量删除" class="action-btn">
           <VIcon icon="mdi-delete-outline" color="error" />
         </IconBtn>
       </span>
     </VToolbar>
-    <VCardText v-if="loading" class="text-center flex flex-col items-center">
-      <VProgressCircular size="48" indeterminate color="primary" />
-    </VCardText>
-    <!-- 文件详情 -->
-    <VCardText v-else-if="isFile && !isImage && items.length > 0" class="text-center break-all">
-      <div v-if="items[0]?.thumbnail" class="flex justify-center">
-        <VImg max-width="15rem" cover :src="items[0]?.thumbnail" class="rounded border shadow-lg">
-          <template #placeholder>
-            <VSkeletonLoader class="object-cover w-full h-full" />
-          </template>
-        </VImg>
+    
+    <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 class="text-xl text-high-emphasis mt-3">{{ items[0]?.name }}</div>
-      <p class="mt-2" v-if="items[0]?.size && items[0].modify_time">
-        大小：{{ formatBytes(items[0]?.size || 0) }}<br />
-        修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
-      </p>
-    </VCardText>
-    <!-- 图片 -->
-    <VCardText v-else-if="isFile && isImage && items.length > 0" class="grow d-flex justify-center align-center">
-      <VImg :src="currentImgLink" max-width="100%" max-height="100%" />
-    </VCardText>
-    <!-- 目录和文件列表 -->
-    <VCardText v-else-if="dirs.length || files.length" class="p-0">
-      <VList subheader>
-        <VVirtualScroll :items="[...dirs, ...files]" :style="scrollStyle">
-          <template #default="{ item }">
-            <VHover>
-              <template #default="hover">
-                <VListItem v-bind="hover.props" class="px-3 pe-1" @click="listItemClick(item)">
-                  <template #prepend>
-                    <VListItemAction v-if="selectMode">
-                      <VCheckbox v-model="selected" :value="item" />
-                    </VListItemAction>
-                    <template v-else>
-                      <VIcon
-                        v-if="inProps.icons && item.extension"
-                        :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other"
-                      />
-                      <VIcon v-else-if="item.type == 'dir'" icon="mdi-folder-outline" />
-                      <VIcon v-else icon="mdi-file-outline" />
+      
+      <!-- 文件详情 -->
+      <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">
+            <template #placeholder>
+              <VSkeletonLoader class="object-cover w-full h-full" type="image" />
+            </template>
+          </VImg>
+        </div>
+        <div class="text-xl font-weight-medium text-high-emphasis mt-4">{{ items[0]?.name }}</div>
+        <VCard v-if="items[0]?.size && items[0].modify_time" class="mt-4 pa-3 file-info-card bg-grey-lighten-5" flat>
+          <div class="d-flex align-center mb-2">
+            <VIcon size="small" class="me-2" icon="mdi-file-outline" />
+            <span>大小：{{ formatBytes(items[0]?.size || 0) }}</span>
+          </div>
+          <div class="d-flex align-center">
+            <VIcon size="small" class="me-2" icon="mdi-calendar-clock" />
+            <span>修改时间：{{ formatTime(items[0]?.modify_time || 0) }}</span>
+          </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">
+          <VVirtualScroll :items="[...dirs, ...files]" :style="fileListStyle">
+            <template #default="{ item }">
+              <VHover>
+                <template #default="hover">
+                  <VListItem 
+                    v-bind="hover.props" 
+                    class="px-3 pe-1 file-list-item" 
+                    @click="listItemClick(item)"
+                    :class="{'file-list-item-hover': hover.isHovering}"
+                    rounded="sm"
+                    :active="false"
+                  >
+                    <template #prepend>
+                      <VListItemAction v-if="selectMode">
+                        <VCheckbox v-model="selected" :value="item" color="primary" />
+                      </VListItemAction>
+                      <template v-else>
+                        <VIcon
+                          v-if="inProps.icons && item.extension"
+                          :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other"
+                          :color="item.type === 'dir' ? 'amber-darken-2' : 'grey-darken-1'"
+                          class="file-icon"
+                        />
+                        <VIcon 
+                          v-else-if="item.type == 'dir'" 
+                          icon="mdi-folder" 
+                          color="amber-darken-2"
+                          class="file-icon"
+                        />
+                        <VIcon v-else icon="mdi-file-outline" color="grey-darken-1" class="file-icon" />
+                      </template>
                     </template>
-                  </template>
-                  <VListItemTitle v-text="item.name" />
-                  <VListItemSubtitle v-if="item.size">
-                    {{ formatBytes(item.size) }}
-                  </VListItemSubtitle>
-                  <template #append>
-                    <IconBtn v-if="display.smAndDown.value && !selectMode">
-                      <VIcon icon="mdi-dots-vertical" />
-                      <VMenu activator="parent" close-on-content-click>
-                        <VList>
-                          <template v-for="(menu, i) in dropdownItems" :key="i">
-                            <VListItem
-                              v-if="menu.show"
-                              variant="plain"
-                              :base-color="menu.props.color"
-                              @click="menu.props.click(item)"
-                            >
-                              <template #prepend>
-                                <VIcon :icon="menu.props.prependIcon" />
-                              </template>
-                              <VListItemTitle v-text="menu.title" />
-                            </VListItem>
+                    <VListItemTitle v-text="item.name" class="text-truncate" />
+                    <VListItemSubtitle v-if="item.size && item.modify_time" class="d-flex text-caption text-grey">
+                      <span>{{ formatBytes(item.size) }}</span>
+                      <span class="mx-1">•</span>
+                      <span>{{ new Date(item.modify_time * 1000).toLocaleDateString() }}</span>
+                    </VListItemSubtitle>
+                    <template #append>
+                      <IconBtn v-if="display.smAndDown.value && !selectMode" class="mobile-menu-btn">
+                        <VIcon icon="mdi-dots-vertical" />
+                        <VMenu activator="parent" close-on-content-click>
+                          <VList density="compact" class="pa-1">
+                            <template v-for="(menu, i) in dropdownItems" :key="i">
+                              <VListItem
+                                v-if="menu.show"
+                                variant="text"
+                                :base-color="menu.props.color"
+                                @click="menu.props.click(item)"
+                                rounded="sm"
+                                density="compact"
+                                class="menu-item"
+                              >
+                                <template #prepend>
+                                  <VIcon :icon="menu.props.prependIcon" size="small" />
+                                </template>
+                                <VListItemTitle v-text="menu.title" class="text-body-2" />
+                              </VListItem>
+                            </template>
+                          </VList>
+                        </VMenu>
+                      </IconBtn>
+                      <span v-if="hover.isHovering && display.mdAndUp.value && !selectMode" class="flex action-buttons">
+                        <VTooltip text="识别">
+                          <template #activator="{ props }">
+                            <IconBtn v-bind="props" @click.stop="recognize(item.path)" class="action-icon">
+                              <VIcon icon="mdi-text-recognition" size="small" />
+                            </IconBtn>
                           </template>
-                        </VList>
-                      </VMenu>
-                    </IconBtn>
-                    <span v-if="hover.isHovering && display.mdAndUp.value && !selectMode" class="flex">
-                      <VTooltip text="识别">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" @click.stop="recognize(item.path)">
-                            <VIcon icon="mdi-text-recognition" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                      <VTooltip text="刮削">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" @click.stop="scrape(item)">
-                            <VIcon icon="mdi-auto-fix" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                      <VTooltip text="重命名">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" @click.stop="showRenmae(item)">
-                            <VIcon icon="mdi-rename" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                      <VTooltip text="整理">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" @click.stop="showTransfer(item)">
-                            <VIcon icon="mdi-folder-arrow-right" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                      <VTooltip text="删除">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" @click.stop="deleteItem(item)">
-                            <VIcon icon="mdi-delete-outline" color="error" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                    </span>
-                  </template>
-                </VListItem>
-              </template>
-            </VHover>
-          </template>
-        </VVirtualScroll>
-      </VList>
-    </VCardText>
-    <VCardText v-else-if="filter" class="grow d-flex justify-center align-center grey--text py-5">
-      没有目录或文件
-    </VCardText>
-    <VCardText v-else-if="!loading" class="grow d-flex justify-center align-center grey--text py-5"> 空目录 </VCardText>
-  </VCard>
+                        </VTooltip>
+                        <VTooltip text="刮削">
+                          <template #activator="{ props }">
+                            <IconBtn v-bind="props" @click.stop="scrape(item)" class="action-icon">
+                              <VIcon icon="mdi-auto-fix" size="small" />
+                            </IconBtn>
+                          </template>
+                        </VTooltip>
+                        <VTooltip text="重命名">
+                          <template #activator="{ props }">
+                            <IconBtn v-bind="props" @click.stop="showRenmae(item)" class="action-icon">
+                              <VIcon icon="mdi-rename" size="small" />
+                            </IconBtn>
+                          </template>
+                        </VTooltip>
+                        <VTooltip text="整理">
+                          <template #activator="{ props }">
+                            <IconBtn v-bind="props" @click.stop="showTransfer(item)" class="action-icon">
+                              <VIcon icon="mdi-folder-arrow-right" size="small" />
+                            </IconBtn>
+                          </template>
+                        </VTooltip>
+                        <VTooltip text="删除">
+                          <template #activator="{ props }">
+                            <IconBtn v-bind="props" @click.stop="deleteItem(item)" class="action-icon">
+                              <VIcon icon="mdi-delete-outline" size="small" color="error" />
+                            </IconBtn>
+                          </template>
+                        </VTooltip>
+                      </span>
+                    </template>
+                  </VListItem>
+                </template>
+              </VHover>
+            </template>
+          </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>
+        <div class="text-caption text-grey-lighten-1 mt-1">此文件夹没有内容</div>
+      </div>
+    </div>
+  </div>
+  
   <!-- 重命名弹窗 -->
-  <VDialog v-if="renamePopper" v-model="renamePopper" max-width="50rem">
-    <VCard title="重命名">
+  <VDialog v-if="renamePopper" v-model="renamePopper" max-width="40rem" class="rename-dialog">
+    <VCard title="重命名" class="pa-2">
+      <template #title>
+        <div class="d-flex align-center px-4 pt-4">
+          <VIcon icon="mdi-rename" color="primary" class="me-2" />
+          <span class="text-h6">重命名</span>
+        </div>
+      </template>
       <DialogCloseBtn @click="renamePopper = false" />
-      <VDivider />
+      <VDivider class="mt-3" />
       <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"
+            />
           </VCol>
           <VCol cols="12" md="6" v-if="currentItem && currentItem.type == 'dir'">
-            <VSwitch v-model="renameAll" label="自动重命名目录内所有媒体文件" />
+            <VSwitch v-model="renameAll" label="自动重命名目录内所有媒体文件" color="primary" />
           </VCol>
         </VRow>
       </VCardText>
-      <VCardActions>
-        <VBtn color="success" variant="elevated" @click="get_recommend_name" prepend-icon="mdi-magic" class="px-5 me-3">
+      <VCardActions class="pa-4 pt-0">
+        <VBtn color="primary" variant="text" @click="get_recommend_name" prepend-icon="mdi-magic-staff" class="me-2">
           自动识别名称
         </VBtn>
-        <VBtn :disabled="!newName" variant="elevated" @click="rename" prepend-icon="mdi-check" class="px-5 me-3">
+        <VSpacer />
+        <VBtn color="grey" variant="text" @click="renamePopper = false">
+          取消
+        </VBtn>
+        <VBtn color="primary" :disabled="!newName" variant="elevated" @click="rename" class="ms-2">
           确定
         </VBtn>
       </VCardActions>
@@ -744,11 +811,121 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.v-card {
-  block-size: 100%;
+.file-list-component {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 104px); /* 减去标题栏和工具栏的高度 */
+  overflow: hidden;
+  flex: 1;
 }
 
-.v-toolbar {
-  background: rgb(var(--v-table-header-background));
+.file-actions-toolbar {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  flex-shrink: 0;
+}
+
+.file-content-container {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+}
+
+.search-field {
+  max-width: 300px;
+}
+
+.file-list-container {
+  flex: 1;
+  overflow: hidden;
+  border-radius: 0 0 12px 0;
+}
+
+.file-list {
+  height: 100%;
+  overflow-y: auto;
+  border-radius: inherit;
+}
+
+.file-list-item {
+  transition: background-color 0.2s;
+}
+
+.file-list-item-hover {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+}
+
+.file-container {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.toolbar {
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 8px 16px;
+}
+
+.file-icon {
+  font-size: 1.5rem;
+}
+
+.menu-item {
+  min-height: 36px;
+}
+
+.action-buttons {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.file-list-item-hover .action-buttons {
+  opacity: 1;
+}
+
+.action-icon {
+  margin: 0 2px;
+}
+
+.empty-state {
+  height: 100%;
+  flex-direction: column;
+}
+
+.file-details {
+  max-width: 80%;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.file-info-card {
+  max-width: 20rem;
+  margin: 0 auto;
+}
+
+.file-thumbnail {
+  border-radius: 8px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+}
+
+.image-container {
+  height: 100%;
+  width: 100%;
+  padding: 16px;
+}
+
+.mobile-menu-btn {
+  margin-right: -8px;
+}
+
+.loading-container {
+  min-height: 200px;
+  height: 100%;
+}
+
+.rename-dialog {
+  .v-card {
+    border-radius: 8px;
+  }
 }
 </style>

src/components/filebrowser/FileNavigator.vue

@@ -0,0 +1,491 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { FileItem } from '@/api/types'
+import { useDisplay } from 'vuetify'
+import type { AxiosRequestConfig } from 'axios'
+import type { Axios } from 'axios'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  storage: {
+    type: String,
+    default: 'local'
+  },
+  currentPath: {
+    type: String,
+    default: '/'
+  },
+  items: {
+    type: Array as PropType<FileItem[]>,
+    default: () => []
+  },
+  endpoints: Object,
+  axios: {
+    type: Object as PropType<Axios>,
+    required: true,
+  }
+})
+
+// 对外事件
+const emit = defineEmits(['navigate'])
+
+// 树形节点缓存
+const treeCache = ref<{[key: string]: FileItem[]}>({})
+
+// 展开的文件夹
+const expandedFolders = ref<string[]>([])
+
+// 是否正在加载
+const loading = ref<{[key: string]: boolean}>({})
+
+// 点击目录
+function handleFolderClick(item: FileItem) {
+  emit('navigate', item)
+}
+
+// 切换文件夹展开状态
+async function toggleFolder(path: string) {
+  const index = expandedFolders.value.indexOf(path)
+  if (index >= 0) {
+    // 折叠文件夹
+    expandedFolders.value.splice(index, 1)
+  } else {
+    // 展开文件夹
+    expandedFolders.value.push(path)
+    // 如果缓存中没有此目录内容，加载它
+    if (!treeCache.value[path]) {
+      await loadSubdirectories(path)
+    }
+  }
+}
+
+// 判断文件夹是否展开
+function isFolderExpanded(path: string) {
+  return expandedFolders.value.includes(path)
+}
+
+// 渲染文件夹图标
+function renderFolderIcon(isExpanded: boolean) {
+  if (isExpanded) {
+    return 'mdi-folder-open'
+  }
+  return 'mdi-folder'
+}
+
+// 加载子目录
+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
+    }
+    
+    // 调用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
+    }
+  } catch (error) {
+    console.error('加载目录失败:', path, error)
+  } finally {
+    // 取消加载状态
+    loading.value[path] = false
+  }
+}
+
+// 初始加载根目录
+async function loadRootDirectories() {
+  await loadSubdirectories('/')
+}
+
+// 获取目录层级深度
+function getDirectoryDepth(path: string) {
+  return path.split('/').filter(p => p).length
+}
+
+// 检索所有目录节点
+function getAllDirectories() {
+  const allDirs: {dir: FileItem, level: number, parentPath: string}[] = []
+  
+  // 添加根目录的子目录
+  if (treeCache.value['/']) {
+    treeCache.value['/'].forEach(dir => {
+      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}[]) {
+  if (treeCache.value[parentPath]) {
+    treeCache.value[parentPath].forEach(dir => {
+      result.push({dir, level, parentPath})
+      if (isFolderExpanded(dir.path || '')) {
+        addSubdirectories(dir.path || '', level + 1, result)
+      }
+    })
+  }
+}
+
+// 监听当前路径变化，自动展开当前路径
+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)
+      }
+    }
+  }
+}, { 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(() => {
+  return display.smAndDown.value
+})
+
+// 可用的根目录列表
+const rootDirectories = computed(() => {
+  return treeCache.value['/'] || []
+})
+
+// 扁平化的目录树
+const flattenedDirectories = computed(() => {
+  return getAllDirectories()
+})
+
+// 组件挂载时初始加载
+onMounted(async () => {
+  await loadRootDirectories()
+})
+
+// 检查路径是否为指定目录的子目录或后代
+function isChildOrDescendant(path: string, ancestorPath: string) {
+  if (!path || !ancestorPath) return false;
+  if (ancestorPath === '/') return true;
+  
+  // 确保路径以斜杠结尾，便于比较
+  const normalizedPath = path.endsWith('/') ? path : path + '/';
+  const normalizedAncestorPath = ancestorPath.endsWith('/') ? ancestorPath : ancestorPath + '/';
+  
+  // 检查路径是否以祖先路径开头，但不是祖先路径本身
+  return normalizedPath.startsWith(normalizedAncestorPath) && normalizedPath !== normalizedAncestorPath;
+}
+
+// 计算目录相对于其祖先的缩进级别
+function getIndentLevel(path: string, ancestorPath: string) {
+  if (!path || !ancestorPath) return 0;
+  
+  // 根目录特殊处理
+  if (ancestorPath === '/') {
+    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;
+}
+</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: '/'
+        })"
+      >
+        <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="folder-toggle" @click.stop="toggleFolder(directory.path || '')">
+              <VProgressCircular 
+                v-if="loading[directory.path || '']" 
+                indeterminate 
+                size="14" 
+                width="2" 
+                color="primary" 
+              />
+              <VIcon 
+                v-else
+                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'" 
+                class="me-1"
+              />
+              <VTooltip :disabled="directory.name.length <= 18">
+                <template #activator="{ props: tooltipProps }">
+                  <span 
+                    class="folder-name" 
+                    v-bind="tooltipProps"
+                  >
+                    {{ directory.name }}
+                  </span>
+                </template>
+                {{ directory.name }}
+              </VTooltip>
+            </div>
+          </div>
+          
+          <!-- 子目录容器 - 如果该目录被展开，显示其所有子目录 -->
+          <div v-if="isFolderExpanded(directory.path || '')">
+            <!-- 加载中状态 -->
+            <div v-if="loading[directory.path || '']" class="tree-loading pl-8">
+              <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 || '')" 
+                class="tree-item"
+                :class="{ 'active': currentPath === item.dir.path }"
+                :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" 
+                  />
+                  <VIcon 
+                    v-else
+                    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'" 
+                    class="me-1"
+                  />
+                  <VTooltip :disabled="item.dir.name.length <= 18">
+                    <template #activator="{ props: tooltipProps }">
+                      <span 
+                        class="folder-name" 
+                        v-bind="tooltipProps"
+                      >
+                        {{ item.dir.name }}
+                      </span>
+                    </template>
+                    {{ item.dir.name }}
+                  </VTooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.file-navigator {
+  width: 240px;
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--v-theme-surface);
+  flex-shrink: 0;
+  border-bottom-left-radius: 12px;
+}
+
+.navigator-header {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: var(--v-theme-surface);
+}
+
+.tree-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 8px 0;
+}
+
+.tree-item-container {
+  width: 100%;
+}
+
+.tree-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 16px 6px 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  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);
+  }
+}
+
+.folder-toggle {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 4px;
+  flex-shrink: 0;
+}
+
+.folder-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.root-item {
+  font-weight: 500;
+}
+
+.folder-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  display: inline-block;
+}
+
+.subdirectory-container {
+  width: 100%;
+}
+
+.tree-loading {
+  display: flex;
+  align-items: center;
+  padding: 4px 16px;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+
+.pl-8 {
+  padding-left: 20px !important;
+}
+</style> 

src/components/filebrowser/FileToolbar.vue

@@ -112,86 +112,279 @@ const sortIcon = computed(() => {
   if (sort.value === 'time') return 'mdi-sort-clock-ascending-outline'
   else return 'mdi-sort-alphabetical-ascending'
 })
+
+// 保存路径片段引用
+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) {
+    const tooltipComponent = (tooltipEl as any).__vue__
+    if (tooltipComponent && tooltipComponent.isActive !== undefined) {
+      tooltipComponent.isActive = isTextOverflowing
+    }
+  }
+}
 </script>
 
 <template>
-  <VToolbar flat dense>
-    <VToolbarItems class="overflow-hidden">
-      <VMenu v-if="inProps.storages?.length || 0 > 1" offset-y>
-        <template #activator="{ props }">
-          <VBtn v-bind="props">
-            <VIcon icon="mdi-arrow-down-drop-circle-outline" />
+  <VToolbar flat dense class="file-toolbar">
+    <VToolbarItems class="overflow-hidden w-100">
+      <VBtn 
+        variant="text" 
+        :input-value="inProps.item?.path === '/'"
+        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>
+      </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" 
+            :input-value="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"
+                >
+                  {{ segment.name }}
+                </span>
+              </template>
+              {{ segment.name }}
+            </VTooltip>
           </VBtn>
         </template>
-        <VList>
-          <VListItem
-            v-for="(item, index) in storages"
-            :key="index"
-            :disabled="item.value === storageObject?.value"
-            @click="changeStorage(item.value)"
-          >
-            <template #prepend>
-              <Icon :icon="item.icon" />
+      </div>
+
+      <VSpacer />
+
+      <div class="file-actions">
+        <VTooltip text="调整排序">
+          <template #activator="{ props }">
+            <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"
+            >
+              <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"
+            >
+              <VTooltip text="新建文件夹">
+                <template #activator="{ props: _props }">
+                  <VIcon v-bind="_props" icon="mdi-folder-plus" />
+                </template>
+              </VTooltip>
+            </VBtn>
+          </template>
+          <VCard title="新建文件夹" class="pa-2">
+            <template #title>
+              <div class="d-flex align-center px-4 pt-4">
+                <VIcon icon="mdi-folder-plus" color="primary" class="me-2" />
+                <span class="text-h6">新建文件夹</span>
+              </div>
             </template>
-            <VListItemTitle>{{ item.title }}</VListItemTitle>
-          </VListItem>
-        </VList>
-      </VMenu>
-      <VBtn variant="text" :input-value="item.path === '/'" class="px-1" @click="changePath(inProps.itemstack[0])">
-        <VIcon :icon="storageObject?.icon" class="mr-2" />
-        {{ storageObject?.title }}
-      </VBtn>
-      <template v-for="(segment, index) in pathSegments" :key="index">
-        <VBtn
-          v-if="display.mdAndUp.value"
-          variant="text"
-          :input-value="index === pathSegments.length - 1"
-          class="px-1"
-          @click="changePath(inProps.itemstack[index + 1])"
-        >
-          <VIcon icon=" mdi-chevron-right" />
-          {{ segment.name }}
-        </VBtn>
-      </template>
+            <DialogCloseBtn @click="newFolderPopper = false" />
+            <VDivider class="mt-3" />
+            <VCardText>
+              <VTextField 
+                v-model="newFolderName" 
+                label="文件夹名称" 
+                placeholder="请输入文件夹名称"
+                variant="outlined"
+                hide-details="auto"
+                autofocus
+                @keyup.enter="mkdir"
+              />
+            </VCardText>
+            <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>
+            </VCardActions>
+          </VCard>
+        </VDialog>
+      </div>
     </VToolbarItems>
-    <div class="flex-grow-1" />
-    <VTooltip text="调整排序">
-      <template #activator="{ props }">
-        <IconBtn v-bind="props" @click="changeSort">
-          <VIcon :icon="sortIcon" />
-        </IconBtn>
-      </template>
-    </VTooltip>
-    <VTooltip text="返回上一级" v-if="pathSegments.length > 0">
-      <template #activator="{ props }">
-        <IconBtn v-bind="props" @click="goUp">
-          <VIcon icon="mdi-arrow-up-bold-outline" />
-        </IconBtn>
-      </template>
-    </VTooltip>
-    <VDialog v-model="newFolderPopper" max-width="50rem">
-      <template #activator="{ props }">
-        <IconBtn v-bind="props">
-          <VTooltip text="新建文件夹">
-            <template #activator="{ props: _props }">
-              <VIcon v-bind="_props" icon="mdi-folder-plus-outline" />
-            </template>
-          </VTooltip>
-        </IconBtn>
-      </template>
-      <VCard title="新建文件夹">
-        <DialogCloseBtn @click="newFolderPopper = false" />
-        <VDivider />
-        <VCardText>
-          <VTextField v-model="newFolderName" label="名称" />
-        </VCardText>
-        <VCardActions>
-          <div class="flex-grow-1" />
-          <VBtn :disabled="!newFolderName" variant="elevated" @click="mkdir" prepend-icon="mdi-check" class="px-5 me-3">
-            新建
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
   </VToolbar>
 </template>
+
+<style lang="scss" scoped>
+.file-toolbar {
+  background-color: var(--v-theme-surface);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  flex-shrink: 0;
+}
+
+.home-button {
+  min-width: 50px;
+  flex-shrink: 0;
+  
+  @media (min-width: 960px) {
+    max-width: unset;
+  }
+  
+  @media (max-width: 959px) {
+    max-width: 120px;
+  }
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  white-space: nowrap;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex: 1;
+  min-width: 0;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  
+  // 确保当面包屑宽度超出容器时，最后一个元素可见
+  &:hover {
+    scroll-behavior: smooth;
+  }
+  
+  // 允许在触摸设备上滚动
+  touch-action: pan-x;
+}
+
+.path-button {
+  padding: 0 4px;
+  min-width: auto;
+  height: 36px;
+  font-weight: normal;
+  flex-shrink: 0;
+  
+  &:not(.current-path) {
+    @media (max-width: 959px) {
+      max-width: 120px;
+    }
+  }
+  
+  &.current-path {
+    flex-shrink: 1;
+  }
+}
+
+.path-segment {
+  white-space: nowrap;
+  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;
+    }
+  }
+}
+
+.action-button {
+  margin: 0 2px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  
+  &:hover {
+    background-color: rgba(var(--v-theme-primary), 0.05);
+  }
+}
+
+.mkdir-dialog {
+  .v-card {
+    border-radius: 8px;
+  }
+}
+
+.file-actions {
+  display: flex;
+  align-items: center;
+}
+</style>

src/views/reorganize/FileBrowserView.vue

@@ -164,7 +164,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="file-browser-view">
     <FileBrowser
       :storages="storages"
       :tree="false"
@@ -176,3 +176,10 @@ onMounted(() => {
     />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.file-browser-view {
+  height: 100%;
+  position: relative;
+}
+</style>

src/views/torrent/TorrentCardListView.vue

@@ -672,10 +672,22 @@ function loadMore({ done }: { done: any }) {
 .filter-chip {
   margin: 4px;
   transition: all 0.2s ease;
+  background-color: rgba(var(--v-theme-primary), 0.1) !important;
+  color: rgba(var(--v-theme-on-surface), 0.9) !important;
+  font-weight: 500;
+  border: 1px solid rgba(var(--v-theme-primary), 0.2);
 }
 
 .filter-chip:hover {
   transform: translateY(-2px);
+  background-color: rgba(var(--v-theme-primary), 0.15) !important;
+}
+
+.filter-chip.v-chip--selected {
+  background-color: rgba(var(--v-theme-primary), 0.85) !important;
+  color: rgb(var(--v-theme-on-primary)) !important;
+  font-weight: 600;
+  box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
 }
 
 .filter-tag {

src/views/torrent/TorrentRowListView.vue

@@ -658,10 +658,22 @@ function toggleFilterMenu(key: string) {
 .filter-chip {
   margin: 4px;
   transition: all 0.2s ease;
+  background-color: rgba(var(--v-theme-primary), 0.1) !important;
+  color: rgba(var(--v-theme-on-surface), 0.9) !important;
+  font-weight: 500;
+  border: 1px solid rgba(var(--v-theme-primary), 0.2);
 }
 
 .filter-chip:hover {
   transform: translateY(-2px);
+  background-color: rgba(var(--v-theme-primary), 0.15) !important;
+}
+
+.filter-chip.v-chip--selected {
+  background-color: rgba(var(--v-theme-primary), 0.85) !important;
+  color: rgb(var(--v-theme-on-primary)) !important;
+  font-weight: 600;
+  box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
 }
 
 .filter-tag {