From 12356abf00049339d201332beb7048d584615e19 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 3 Apr 2025 07:20:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E4=BB=B6=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=99=A8=E7=9B=AE=E5=BD=95=E6=A0=91=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FileBrowser.vue          | 30 ++++++++++++++++++-------
 src/components/filebrowser/FileList.vue | 19 +++++++++++++++-
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index 0fe3b483..ea7aae06 100644
--- a/src/components/FileBrowser.vue
+++ b/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>
diff --git a/src/components/filebrowser/FileList.vue b/src/components/filebrowser/FileList.vue
index 332eaac3..65c1d2cd 100644
--- a/src/components/filebrowser/FileList.vue
+++ b/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"