fix FileBrowser UI

src/components/FileBrowser.vue

@@ -5,6 +5,7 @@ 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'
+import { useDisplay } from 'vuetify'
 
 // 输入参数
 const props = defineProps({
@@ -29,6 +30,12 @@ const props = defineProps({
 // 对外事件
 const emit = defineEmits(['pathchanged'])
 
+// 显示器宽度
+const display = useDisplay()
+
+// APP
+const appMode = inject('pwaMode') && display.mdAndDown.value
+
 const fileIcons = {
   // 压缩包
   zip: 'mdi-folder-zip-outline',
@@ -145,79 +152,36 @@ 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() {
+const fileListItems = ref<FileItem[]>([])
-  refreshPending.value = true
+
+// 文件列表数据更新
+function fileListUpdated(items: FileItem[]) {
+  fileListItems.value = items
 }
+
+// 大小控制
+const scrollStyle = computed(() => {
+  return appMode
+    ? 'height: calc(100vh - 11.5rem - env(safe-area-inset-bottom) - 3.5rem)'
+    : 'height: calc(100vh - 10.5rem - env(safe-area-inset-bottom)'
+})
 </script>
 
 <template>
-  <VCard class="file-browser" :loading="loading > 0" flat>
+  <VCard class="mx-auto" :loading="loading > 0">
-    <VCardTitle class="px-4 py-3 d-flex align-center file-browser-header">
+    <div v-if="activeStorage && item">
-      <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" />
-            </template>
-            <VListItemTitle class="text-truncate">{{ item.title }}</VListItemTitle>
-          </VListItem>
-        </VList>
-      </VMenu>
-    </VCardTitle>
-    <VDivider />
-    <div v-if="activeStorage && item" class="file-browser-container">
       <FileToolbar
         :item="item"
         :itemstack="itemstack"
@@ -230,7 +194,7 @@ function refreshBrowser() {
         @foldercreated="refreshPending = true"
         @sortchanged="sortChanged"
       />
-      <div class="file-content-wrapper">
+      <div class="flex" :style="scrollStyle">
         <FileNavigator
           :storage="activeStorage"
           :currentPath="item.path"
@@ -240,6 +204,7 @@ function refreshBrowser() {
           @navigate="pathChanged"
         />
         <FileList
+          class="flex-grow"
           :item="item"
           :storage="activeStorage"
           :icons="fileIcons"
@@ -256,73 +221,5 @@ function refreshBrowser() {
         />
       </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;
-}
-
-.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/filebrowser/FileList.vue

@@ -14,9 +14,6 @@ import MediaInfoDialog from '../dialog/MediaInfoDialog.vue'
 // 显示器宽度
 const display = useDisplay()
 
-// APP
-const appMode = inject('pwaMode') && display.mdAndDown.value
-
 // 输入参数
 const inProps = defineProps({
   icons: Object,
@@ -112,24 +109,12 @@ const transferItems = ref<FileItem[]>([])
 // 当前图片地址
 const currentImgLink = ref('')
 
-// 大小控制
-const scrollStyle = computed(() => {
-  return appMode
-    ? 'height: calc(100vh - 15.5rem - env(safe-area-inset-bottom) - 3.5rem)'
-    : 'height: calc(100vh - 14.5rem - env(safe-area-inset-bottom)'
-})
-
 // 是否为图片文件
 const isImage = computed(() => {
   const ext = inProps.item.path?.split('.').pop()?.toLowerCase()
   return ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext ?? '')
 })
 
-// 创建一个计算属性用于设置虚拟滚动的高度
-const fileListStyle = computed(() => {
-  return 'height: 100%'
-})
-
 // 调整选择模式
 function changeSelectMode() {
   selectMode.value = !selectMode.value
@@ -547,8 +532,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="file-list-component">
+  <VCard class="d-flex flex-column w-full h-full">
-    <VToolbar v-if="!loading" density="compact" flat color="grey-lighten-4" class="file-actions-toolbar">
+    <VToolbar v-if="!loading" density="compact" flat color="gray">
       <VTextField
         v-if="!isFile"
         v-model="filter"
@@ -556,178 +541,139 @@ onMounted(() => {
         flat
         density="compact"
         variant="solo-filled"
-        placeholder="搜索文件和文件夹..."
+        placeholder="搜索 ..."
-        prepend-inner-icon="mdi-magnify"
+        prepend-inner-icon="mdi-filter-outline"
-        class="me-2 search-field"
+        class="me-2"
-        bg-color="grey-lighten-5"
+        rounded
-        rounded="0"
       />
       <VSpacer v-if="isFile" />
-      <IconBtn v-if="!isFile" @click="changeSelectMode" tooltip="切换选择模式" class="action-btn">
+      <IconBtn v-if="!isFile" @click="changeSelectMode">
-        <VIcon :color="selectMode ? 'primary' : 'grey-darken-1'" v-if="selectMode"> mdi-selection-remove </VIcon>
+        <VIcon color="primary" v-if="selectMode"> mdi-selection-remove </VIcon>
-        <VIcon :color="selectMode ? 'grey-darken-1' : 'primary'" v-else>mdi-select</VIcon>
+        <VIcon color="primary" v-else>mdi-select</VIcon>
       </IconBtn>
-      <IconBtn v-if="isFile" @click="recognize(inProps.item.path || '')" tooltip="识别" class="action-btn">
+      <IconBtn v-if="isFile" @click="recognize(inProps.item.path || '')">
         <VIcon color="primary"> mdi-text-recognition </VIcon>
       </IconBtn>
-      <IconBtn v-if="isFile && items.length > 0" @click="download(items[0])" tooltip="下载" class="action-btn">
+      <IconBtn v-if="isFile && items.length > 0" @click="download(items[0])">
         <VIcon color="primary"> mdi-download </VIcon>
       </IconBtn>
-      <IconBtn v-if="!isFile" @click="list_files" tooltip="刷新" class="action-btn">
+      <IconBtn v-if="!isFile" @click="list_files">
         <VIcon color="primary"> mdi-refresh </VIcon>
       </IconBtn>
       <!-- 批量操作按钮 -->
-      <span v-if="selected.length > 0" class="batch-actions">
+      <span v-if="selected.length > 0">
-        <VChip color="primary" size="small" class="me-2">已选择 {{ selected.length }} 项</VChip>
+        <IconBtn @click.stop="batchScrape">
-        <IconBtn @click.stop="batchScrape" tooltip="批量刮削" class="action-btn">
           <VIcon color="primary" icon="mdi-auto-fix" />
         </IconBtn>
-        <IconBtn @click.stop="showBatchTransfer" tooltip="批量整理" class="action-btn">
+        <IconBtn @click.stop="showBatchTransfer">
           <VIcon color="primary" icon="mdi-folder-arrow-right" />
         </IconBtn>
-        <IconBtn @click.stop="batchDelete" tooltip="批量删除" class="action-btn">
+        <IconBtn @click.stop="batchDelete">
           <VIcon icon="mdi-delete-outline" color="error" />
         </IconBtn>
       </span>
     </VToolbar>
-
+    <VCardText v-if="loading" class="text-center flex flex-col items-center">
-    <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>
+    </VCardText>
-      </div>
-
     <!-- 文件详情 -->
-      <div v-else-if="isFile && !isImage && items.length > 0" class="text-center break-all file-details">
+    <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
+        <VImg max-width="15rem" cover :src="items[0]?.thumbnail" class="rounded border shadow-lg">
-            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" />
+            <VSkeletonLoader class="object-cover w-full h-full" />
           </template>
         </VImg>
       </div>
-        <div class="text-xl font-weight-medium text-high-emphasis mt-4">{{ items[0]?.name }}</div>
+      <div class="text-xl text-high-emphasis mt-3">{{ 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>
+      <p class="mt-2" v-if="items[0]?.size && items[0].modify_time">
-          <div class="d-flex align-center mb-2">
+        大小：{{ formatBytes(items[0]?.size || 0) }}<br />
-            <VIcon size="small" class="me-2" icon="mdi-file-outline" />
+        修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
-            <span>大小：{{ formatBytes(items[0]?.size || 0) }}</span>
+      </p>
-          </div>
+    </VCardText>
-          <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">
+    <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%" class="rounded-lg shadow" />
+      <VImg :src="currentImgLink" max-width="100%" max-height="100%" />
-      </div>
+    </VCardText>
-
     <!-- 目录和文件列表 -->
-      <div v-else-if="dirs.length || files.length" class="file-list-container">
+    <VCardText v-else-if="dirs.length || files.length" class="p-0">
-        <VList subheader class="file-list">
+      <VList subheader>
-          <VVirtualScroll :items="[...dirs, ...files]" :style="fileListStyle">
+        <VVirtualScroll :items="[...dirs, ...files]">
           <template #default="{ item }">
             <VHover>
               <template #default="hover">
-                  <VListItem
+                <VListItem v-bind="hover.props" class="px-3 pe-1" @click="listItemClick(item)">
-                    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" />
+                      <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"
-                          :color="item.type === 'dir' ? 'amber-darken-2' : 'grey-darken-1'"
-                          class="file-icon"
                       />
-                        <VIcon
+                      <VIcon v-else-if="item.type == 'dir'" icon="mdi-folder" />
-                          v-else-if="item.type == 'dir'"
+                      <VIcon v-else icon="mdi-file-outline" />
-                          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>
-                    <VListItemTitle v-text="item.name" class="text-truncate" />
+                  <VListItemTitle v-text="item.name" />
-                    <VListItemSubtitle v-if="item.size && item.modify_time" class="d-flex text-caption text-grey">
+                  <VListItemSubtitle v-if="item.size">
-                      <span>{{ formatBytes(item.size) }}</span>
+                    {{ formatBytes(item.size) }}
-                      <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">
+                    <IconBtn v-if="display.smAndDown.value && !selectMode">
                       <VIcon icon="mdi-dots-vertical" />
                       <VMenu activator="parent" close-on-content-click>
-                          <VList density="compact" class="pa-1">
+                        <VList>
                           <template v-for="(menu, i) in dropdownItems" :key="i">
                             <VListItem
                               v-if="menu.show"
-                                variant="text"
+                              variant="plain"
                               :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" />
+                                <VIcon :icon="menu.props.prependIcon" />
                               </template>
-                                <VListItemTitle v-text="menu.title" class="text-body-2" />
+                              <VListItemTitle v-text="menu.title" />
                             </VListItem>
                           </template>
                         </VList>
                       </VMenu>
                     </IconBtn>
-                      <span v-if="hover.isHovering && display.mdAndUp.value && !selectMode" class="flex action-buttons">
+                    <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)" class="action-icon">
+                          <IconBtn v-bind="props" @click.stop="recognize(item.path)">
-                              <VIcon icon="mdi-text-recognition" size="small" />
+                            <VIcon icon="mdi-text-recognition" />
                           </IconBtn>
                         </template>
                       </VTooltip>
                       <VTooltip text="刮削">
                         <template #activator="{ props }">
-                            <IconBtn v-bind="props" @click.stop="scrape(item)" class="action-icon">
+                          <IconBtn v-bind="props" @click.stop="scrape(item)">
-                              <VIcon icon="mdi-auto-fix" size="small" />
+                            <VIcon icon="mdi-auto-fix" />
                           </IconBtn>
                         </template>
                       </VTooltip>
                       <VTooltip text="重命名">
                         <template #activator="{ props }">
-                            <IconBtn v-bind="props" @click.stop="showRenmae(item)" class="action-icon">
+                          <IconBtn v-bind="props" @click.stop="showRenmae(item)">
-                              <VIcon icon="mdi-rename" size="small" />
+                            <VIcon icon="mdi-rename" />
                           </IconBtn>
                         </template>
                       </VTooltip>
                       <VTooltip text="整理">
                         <template #activator="{ props }">
-                            <IconBtn v-bind="props" @click.stop="showTransfer(item)" class="action-icon">
+                          <IconBtn v-bind="props" @click.stop="showTransfer(item)">
-                              <VIcon icon="mdi-folder-arrow-right" size="small" />
+                            <VIcon icon="mdi-folder-arrow-right" />
                           </IconBtn>
                         </template>
                       </VTooltip>
                       <VTooltip text="删除">
                         <template #activator="{ props }">
-                            <IconBtn v-bind="props" @click.stop="deleteItem(item)" class="action-icon">
+                          <IconBtn v-bind="props" @click.stop="deleteItem(item)">
-                              <VIcon icon="mdi-delete-outline" size="small" color="error" />
+                            <VIcon icon="mdi-delete-outline" color="error" />
                           </IconBtn>
                         </template>
                       </VTooltip>
@@ -739,56 +685,34 @@ onMounted(() => {
           </template>
         </VVirtualScroll>
       </VList>
-      </div>
+    </VCardText>
-
+    <VCardText v-else-if="filter" class="grow d-flex justify-center align-center grey--text py-5">
-      <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" />
+    </VCardText>
-        <div class="text-subtitle-1 mt-2">没有匹配的文件或文件夹</div>
+    <VCardText v-else-if="!loading" class="grow d-flex justify-center align-center grey--text py-5"> 空目录 </VCardText>
-      </div>
+  </VCard>
-
-      <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="40rem" class="rename-dialog">
+  <VDialog v-if="renamePopper" v-model="renamePopper" max-width="50rem">
-    <VCard title="重命名" class="pa-2">
+    <VCard title="重命名">
-      <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 class="mt-3" />
+      <VDivider />
       <VCardText>
         <VRow>
           <VCol cols="12">
-            <VTextField
+            <VTextField v-model="newName" label="新名称" :loading="renameLoading" />
-              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="自动重命名目录内所有媒体文件" color="primary" />
+            <VSwitch v-model="renameAll" label="自动重命名目录内所有媒体文件" />
           </VCol>
         </VRow>
       </VCardText>
-      <VCardActions class="pa-4 pt-0">
+      <VCardActions>
-        <VBtn color="primary" variant="text" @click="get_recommend_name" prepend-icon="mdi-magic-staff" class="me-2">
+        <VBtn color="success" variant="elevated" @click="get_recommend_name" prepend-icon="mdi-magic" class="px-5 me-3">
           自动识别名称
         </VBtn>
-        <VSpacer />
+        <VBtn :disabled="!newName" variant="elevated" @click="rename" prepend-icon="mdi-check" class="px-5 me-3">
-        <VBtn color="grey" variant="text" @click="renamePopper = false"> 取消 </VBtn>
+          确定
-        <VBtn color="primary" :disabled="!newName" variant="elevated" @click="rename" class="ms-2"> 确定 </VBtn>
+        </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
@@ -813,117 +737,11 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.file-list-component {
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 104px); /* 减去标题栏和工具栏的高度 */
-  overflow: hidden;
-  flex: 1;
-}
-
-.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;
-}
-
-.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;
+  block-size: 100%;
 }
+
+.v-toolbar {
+  background: rgb(var(--v-table-header-background));
 }
 </style>

src/components/filebrowser/FileNavigator.vue

@@ -2,8 +2,7 @@
 import type { PropType } from 'vue'
 import type { FileItem } from '@/api/types'
 import { useDisplay } from 'vuetify'
-import type { AxiosRequestConfig } from 'axios'
+import type { Axios, AxiosRequestConfig } from 'axios'
-import type { Axios } from 'axios'
 
 // 显示器宽度
 const display = useDisplay()
@@ -276,6 +275,7 @@ function getIndentLevel(path: string, ancestorPath: string) {
         "
       >
         <div class="folder-content">
+          <VIcon icon="mdi-home" class="me-2" color="primary" />
           <span>根目录</span>
         </div>
       </div>

src/components/filebrowser/FileToolbar.vue

@@ -61,6 +61,18 @@ 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)
@@ -100,247 +112,86 @@ 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 class="file-toolbar">
+  <VToolbar flat dense>
-    <VToolbarItems class="overflow-hidden w-100">
+    <VToolbarItems class="overflow-hidden">
-      <VBtn
+      <VMenu v-if="inProps.storages?.length || 0 > 1" offset-y>
-        variant="text"
+        <template #activator="{ props }">
-        :input-value="inProps.item?.path === '/'"
+          <VBtn v-bind="props">
-        color="primary"
+            <VIcon icon="mdi-arrow-down-drop-circle-outline" />
-        class="px-1 path-button home-button"
+          </VBtn>
-        @click="changePath(inProps.itemstack[0])"
+        </template>
+        <VList>
+          <VListItem
+            v-for="(item, index) in storages"
+            :key="index"
+            :disabled="item.value === storageObject?.value"
+            @click="changeStorage(item.value)"
           >
-        <VIcon icon="mdi-home" class="mx-2" />
+            <template #prepend>
+              <Icon :icon="item.icon" />
+            </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>
-
-      <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 }]"
+          class="px-1"
           @click="changePath(inProps.itemstack[index + 1])"
         >
-            <VIcon icon="mdi-chevron-right" size="small" />
+          <VIcon icon=" mdi-chevron-right" />
-            <VTooltip>
-              <template #activator="{ props }">
-                <span class="path-segment" v-bind="props" ref="pathSegmentRef" @mouseover="checkTextTruncated">
           {{ segment.name }}
-                </span>
-              </template>
-              {{ segment.name }}
-            </VTooltip>
         </VBtn>
       </template>
-      </div>
+    </VToolbarItems>
-
+    <div class="flex-grow-1" />
-      <VSpacer />
-
-      <div class="file-actions">
     <VTooltip text="调整排序">
       <template #activator="{ props }">
-            <VBtn v-bind="props" @click="changeSort" icon variant="text" color="primary" class="action-button">
+        <IconBtn v-bind="props" @click="changeSort">
           <VIcon :icon="sortIcon" />
-            </VBtn>
+        </IconBtn>
       </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">
+        <IconBtn v-bind="props" @click="goUp">
-              <VIcon icon="mdi-arrow-up" />
+          <VIcon icon="mdi-arrow-up-bold-outline" />
-            </VBtn>
+        </IconBtn>
       </template>
     </VTooltip>
-
+    <VDialog v-model="newFolderPopper" max-width="50rem">
-        <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">
+        <IconBtn v-bind="props">
           <VTooltip text="新建文件夹">
             <template #activator="{ props: _props }">
-                  <VIcon v-bind="_props" icon="mdi-folder-plus" />
+              <VIcon v-bind="_props" icon="mdi-folder-plus-outline" />
             </template>
           </VTooltip>
-            </VBtn>
+        </IconBtn>
-          </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>
+      <VCard title="新建文件夹">
         <DialogCloseBtn @click="newFolderPopper = false" />
-            <VDivider class="mt-3" />
+        <VDivider />
         <VCardText>
-              <VTextField
+          <VTextField v-model="newFolderName" label="名称" />
-                v-model="newFolderName"
-                label="文件夹名称"
-                placeholder="请输入文件夹名称"
-                variant="outlined"
-                hide-details="auto"
-                autofocus
-                @keyup.enter="mkdir"
-              />
         </VCardText>
-            <VCardActions class="pa-4 pt-0">
+        <VCardActions>
-              <VSpacer />
+          <div class="flex-grow-1" />
-              <VBtn color="grey" variant="text" @click="newFolderPopper = false">取消</VBtn>
+          <VBtn :disabled="!newFolderName" variant="elevated" @click="mkdir" prepend-icon="mdi-check" class="px-5 me-3">
-              <VBtn :disabled="!newFolderName" color="primary" variant="elevated" @click="mkdir" class="ms-2">
+            新建
-                创建
           </VBtn>
         </VCardActions>
       </VCard>
     </VDialog>
-      </div>
-    </VToolbarItems>
   </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>