✨ Feature: folder structure can be keeped when uploading folders

src/renderer/manage/pages/bucketPage.vue

@@ -521,7 +521,7 @@ https://www.baidu.com/img/bd_logo1.png"
                     :underline="false"
                     :type="item.checked ? 'primary' : 'info'"
                   >
-                    {{ formatFileName(item.fileName ?? '', 10) }}
+                    {{ formatFileName(item.fileName ?? '', 8) }}
                   </el-link>
                 </el-tooltip>
               </div>
@@ -689,11 +689,18 @@ https://www.baidu.com/img/bd_logo1.png"
     </el-affix>
     <el-drawer
       v-model="isShowUploadPanel"
-      title="上传文件"
       size="60%"
       @open="startRefreshUploadTask"
       @close="stopRefreshUploadTask"
     >
+    <template #header>
+    <el-switch
+      v-model="isUploadKeepDirStructure"
+      @change="handleUploadKeepDirChange"
+      active-text="保持目录结构"
+      inactive-text="不保持目录结构"
+    />
+  </template>
       <div
         id="upload-area"
         :class="{ 'is-dragover': dragover }"
@@ -1299,6 +1306,7 @@ const isShowVideoFileDialog = ref(false)
 const videoFileUrl = ref('')
 const videoPlayerHeaders = ref({})
 const showFileStyle = ref<'list' | 'grid'>('grid')
+const isUploadKeepDirStructure = ref(manageStore.config.settings.isUploadKeepDirStructure ?? true)
 
 const showCustomUrlSelectList = computed(() => ['tcyun', 'aliyun', 'qiniu', 'github'].includes(currentPicBedName.value))
 
@@ -1320,6 +1328,11 @@ const downloadedTaskList = computed(() => downloadTaskList.value.filter(item =>
 
 const isAutoCustomUrl = computed(() => manageStore.config.picBed[configMap.alias].isAutoCustomUrl === undefined ? true : manageStore.config.picBed[configMap.alias].isAutoCustomUrl)
 
+function handleUploadKeepDirChange (val: any) {
+  saveConfig('settings.isUploadKeepDirStructure', !!val)
+  manageStore.refreshConfig()
+}
+
 function handleViewChange (val: 'list' | 'grid') {
   showFileStyle.value = val
 }
@@ -1408,7 +1421,8 @@ function webkitReadDataTransfer (dataTransfer: DataTransfer) {
           uploadPanelFilesList.value.push({
             name: item.name,
             path: item.path,
-            size: item.size
+            size: item.size,
+            relativePath: item.relativePath
           })
         }
       })
@@ -1530,12 +1544,19 @@ function uploadFiles () {
       rawName: item.name,
       path: item.path.replace(/\\/g, '/'),
       size: item.size,
-      renamedFileName: renameFileBeforeUpload(item.name)
+      renamedFileName: renameFileBeforeUpload(item.name),
+      relativePath: item.relativePath ?? ''
     })
   })
+  if (isUploadKeepDirStructure.value) {
+    formateduploadPanelFilesList.forEach((item: any) => {
+      item.key = `${currentPrefix.value}${item.relativePath.substring(0, item.relativePath.lastIndexOf('/'))}/${item.renamedFileName}`
+    })
+  } else {
     formateduploadPanelFilesList.forEach((item: any) => {
       item.key = currentPrefix.value + item.renamedFileName
     })
+  }
   clearTableData()
   const param = {
     // tcyun

src/renderer/manage/pages/manageSetting.vue

@@ -146,6 +146,54 @@
                 @change="handelIsForceCustomUrlHttpsChange"
               />
             </el-form-item>
+            <el-form-item>
+              <template #label>
+                <span
+                  style="position:absolute;left: 0;"
+                >上传时保留目录结构
+                  <el-tooltip
+                    effect="dark"
+                    content="开启后，上传文件时会保留目录结构，关闭后会将所有文件展开到指定目录下"
+                    placement="right"
+                  >
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-switch
+                v-model="form.isUploadKeepDirStructure"
+                style="position:absolute;right: 0;"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                @change="handelIsUploadKeepDirStructureChange"
+              />
+            </el-form-item>
+            <el-form-item>
+              <template #label>
+                <span
+                  style="position:absolute;left: 0;"
+                >下载时保留目录结构
+                  <el-tooltip
+                    effect="dark"
+                    content="开启后，下载文件时会保留目录结构，关闭后会将所有文件展开到下载目录下"
+                    placement="right"
+                  >
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-switch
+                v-model="form.isDownloadKeepDirStructure"
+                style="position:absolute;right: 0;"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                @change="handelIsDownloadKeepDirStructureChange"
+              />
+            </el-form-item>
             <el-form-item>
               <template #label>
                 <span
@@ -449,7 +497,9 @@ const form = reactive<IStringKeyMap>({
   isAutoRefresh: false,
   isIgnoreCase: false,
   isForceCustomUrlHttps: false,
-  isShowList: false
+  isShowList: false,
+  isUploadKeepDirStructure: true,
+  isDownloadKeepDirStructure: true
 })
 
 const downloadDir = ref('')
@@ -520,6 +570,8 @@ async function initData () {
   form.isForceCustomUrlHttps = config.settings.isForceCustomUrlHttps ?? true
   PreSignedExpire.value = config.settings.PreSignedExpire ?? 14400
   maxDownloadFileCount.value = config.settings.maxDownloadFileCount ?? 5
+  form.isUploadKeepDirStructure = config.settings.isUploadKeepDirStructure ?? true
+  form.isDownloadKeepDirStructure = config.settings.isDownloadKeepDirStructure ?? true
 }
 
 async function handleDownloadDirClick () {
@@ -553,6 +605,18 @@ function handelIsAutoRefreshChange (val:ICheckBoxValueType) {
   })
 }
 
+function handelIsUploadKeepDirStructureChange (val:ICheckBoxValueType) {
+  saveConfig({
+    'settings.isUploadKeepDirStructure': val
+  })
+}
+
+function handelIsDownloadKeepDirStructureChange (val:ICheckBoxValueType) {
+  saveConfig({
+    'settings.isDownloadKeepDirStructure': val
+  })
+}
+
 function handelIsForceCustomUrlHttpsChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.isForceCustomUrlHttps': val