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

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>