添加文件浏览器目录树切换功能，优化用户界面交互

src/components/FileBrowser.vue

@@ -134,6 +134,9 @@ const refreshPending = ref(false)
 // 排序
 const sort = ref('name')
 
+// 是否显示目录树
+const showDirTree = ref(false)
+
 // 计算属性
 const storagesArray = computed(() => {
   const storageCodes = props.storages?.map(item => item.type)
@@ -163,6 +166,11 @@ function sortChanged(s: string) {
   refreshPending.value = true
 }
 
+// 切换目录树
+function switchDirTree(state: boolean) {
+  showDirTree.value = !state
+}
+
 // 文件列表
 const fileListItems = ref<FileItem[]>([])
 
@@ -202,14 +210,18 @@ const fileListStyle = computed(() => {
         @sortchanged="sortChanged"
       />
       <div class="flex" :style="scrollStyle">
-        <FileNavigator
-          :storage="activeStorage"
-          :currentPath="item.path"
-          :items="fileListItems"
-          :endpoints="endpoints"
-          :axios="axios"
-          @navigate="pathChanged"
-        />
+        <VSlideXTransition v-if="showDirTree">
+          <div>
+            <FileNavigator
+              :storage="activeStorage"
+              :currentPath="item.path"
+              :items="fileListItems"
+              :endpoints="endpoints"
+              :axios="axios"
+              @navigate="pathChanged"
+            />
+          </div>
+        </VSlideXTransition>
         <FileList
           class="flex-grow"
           :item="item"
@@ -220,12 +232,14 @@ const fileListStyle = computed(() => {
           :refreshpending="refreshPending"
           :sort="sort"
           :listStyle="fileListStyle"
+          :showTree="showDirTree"
           @pathchanged="pathChanged"
           @loading="loadingChanged"
           @refreshed="refreshPending = false"
           @filedeleted="refreshPending = true"
           @renamed="refreshPending = true"
           @items-updated="fileListUpdated"
+          @switch-tree="switchDirTree"
         />
       </div>
     </div>

src/components/filebrowser/FileList.vue

@@ -30,10 +30,19 @@ const inProps = defineProps({
   },
   sort: String,
   listStyle: String,
+  showTree: Boolean,
 })
 
 // 对外事件
-const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted', 'renamed', 'items-updated'])
+const emit = defineEmits([
+  'loading',
+  'pathchanged',
+  'refreshed',
+  'filedeleted',
+  'renamed',
+  'items-updated',
+  'switch-tree',
+])
 
 // 确认框
 const createConfirm = useConfirm()
@@ -369,6 +378,11 @@ function formatTime(timestape: number) {
   return new Date(timestape * 1000).toLocaleString()
 }
 
+// 切换文件树显示
+function switchFileTree() {
+  emit('switch-tree', inProps.showTree)
+}
+
 // 监听refreshPending变化
 watch(
   () => inProps.refreshpending,
@@ -535,6 +549,9 @@ onMounted(() => {
 <template>
   <VCard class="d-flex flex-column w-full h-full">
     <VToolbar v-if="!loading" density="compact" flat color="gray">
+      <IconBtn>
+        <VIcon :icon="showTree ? 'mdi-file-tree' : 'mdi-file-tree-outline'" @@click="switchFileTree" />
+      </IconBtn>
       <VTextField
         v-if="!isFile"
         v-model="filter"