🐛 Fix(custom): fix drag upload issue and mime error

ISSUES CLOSED: #373

src/main/manage/utils/common.ts

@@ -10,7 +10,7 @@ import { app } from 'electron'
 import fs from 'fs-extra'
 import got, { OptionsOfTextResponseBody, RequestError } from 'got'
 import { HttpProxyAgent, HttpsProxyAgent } from 'hpagent'
-import mime from 'mime-types'
+import mime from 'mime'
 import Downloader from 'nodejs-file-downloader'
 
 import type { IHTTPProxy, IStringKeyMap } from '#/types/types'
@@ -38,7 +38,7 @@ export function isInputConfigValid(config: any): boolean {
   return typeof config === 'object' && !Array.isArray(config) && Object.keys(config).length > 0
 }
 
-export const getFileMimeType = (filePath: string): string => mime.lookup(filePath) || 'application/octet-stream'
+export const getFileMimeType = (filePath: string): string => mime.getType(filePath) || 'application/octet-stream'
 
 const getTempDirPath = () => {
   return path.join(app.getPath('temp'), 'piclistTemp')

src/preload/index.ts

@@ -4,7 +4,7 @@ import path from 'node:path'
 import { clipboard, contextBridge, ipcRenderer, IpcRendererEvent, webFrame, webUtils } from 'electron'
 import fs from 'fs-extra'
 import yaml from 'js-yaml'
-import mime from 'mime-types'
+import mime from 'mime'
 import { isReactive, isRef, toRaw, unref } from 'vue'
 
 export const getRawData = (args: any): any => {
@@ -93,7 +93,7 @@ try {
       load: yaml.load
     },
     mime: {
-      lookup: mime.lookup
+      lookup: mime.getType
     }
   })
 } catch (error) {

src/renderer/manage/pages/BucketPage.vue

@@ -792,6 +792,9 @@
                     <div class="file-list-name">
                       {{ formatFileName(item.name) }}
                     </div>
+                    <div v-if="item.fullPath" class="file-list-path">
+                      {{ item.fullPath }}
+                    </div>
                     <div class="file-list-meta">
                       <span>{{ formatFileSize(item.fileSize) }}</span>
                       <span v-if="item.isFolder"> {{ item.filesList.length }} files </span>
@@ -1290,7 +1293,7 @@ const refreshUploadTaskId = ref<NodeJS.Timeout | undefined>(undefined)
 const uploadPanelFilesList = ref([] as any[])
 const cancelToken = ref('')
 const isLoadingUploadPanelFiles = ref(false)
-const isUploadKeepDirStructure = computed(() => manageStore.config.settings.isUploadKeepDirStructure ?? true)
+const isUploadKeepDirStructure = ref(manageStore.config.settings.isUploadKeepDirStructure ?? true)
 const uploadingTaskList = computed(() =>
   uploadTaskList.value.filter(item => ['uploading', 'queuing', 'paused'].includes(item.status))
 )
@@ -1409,8 +1412,8 @@ function getList() {
 
 // 上传相关函数
 
-function handleUploadKeepDirChange(val: any) {
-  saveConfig('settings.isUploadKeepDirStructure', !!val)
+function handleUploadKeepDirChange() {
+  saveConfig('settings.isUploadKeepDirStructure', isUploadKeepDirStructure.value)
   manageStore.refreshConfig()
 }
 
@@ -1487,7 +1490,8 @@ function openFileSelectDialog() {
           fileSize: window.node.fs.statSync(item).size,
           isFolder: false,
           name: window.node.path.basename(item),
-          filesList: []
+          filesList: [],
+          fullPath: item
         })
         const index = uploadPanelFilesList.value.findIndex((file: any) => file.path === item)
         if (index === -1) {
@@ -1524,7 +1528,7 @@ function webkitReadDataTransfer(dataTransfer: DataTransfer) {
         if (index === -1) {
           uploadPanelFilesList.value.push({
             name: item.name,
-            path: item.path,
+            path: window.electron.showFilePath(item),
             size: item.size,
             relativePath: item.relativePath
           })
@@ -1597,11 +1601,10 @@ function handleUploadFiles(files: any[]) {
           filesList: [item.file],
           isFolder: false,
           fileSize: item.size,
-          fullPath: item.path
+          fullPath: window.electron.showFilePath(item)
         })
       }
-    }
-    if (item.relativePath !== item.name) {
+    } else {
       const folderName = item.relativePath.split('/')[0]
       if (dirObj[folderName]) {
         const dirList = dirObj[folderName].filesList || []
@@ -1613,7 +1616,7 @@ function handleUploadFiles(files: any[]) {
         dirObj[folderName] = {
           filesList: [item],
           fileSize: item.size,
-          path: item.path
+          path: window.electron.showFilePath(item)
         }
       }
     }
@@ -2046,6 +2049,13 @@ watch(isShowDownloadPanel, newValue => {
   }
 })
 
+watch(
+  () => manageStore.config.settings.isUploadKeepDirStructure,
+  newValue => {
+    isUploadKeepDirStructure.value = newValue ?? true
+  }
+)
+
 const handlePageNumberInput = (event: Event) => {
   const target = event.target as HTMLInputElement
   const value = parseInt(target.value, 10)

src/renderer/manage/pages/css/BucketPage.css

@@ -635,6 +635,17 @@
   color: var(--color-accent);
 }
 
+.file-list-path {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin-bottom: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0.8;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Cascadia Code', 'Courier New', monospace;
+}
+
 .file-list-meta {
   display: flex;
   gap: 1rem;

src/universal/types/shims-tsx.d.ts

@@ -6,7 +6,7 @@ import path from 'node:path'
 import { clipboard } from 'electron'
 import fs from 'fs-extra'
 import yaml from 'js-yaml'
-import mime from 'mime-types'
+import mime from 'mime'
 import { VNode } from 'vue'
 
 import { ILocales, ILocalesKey } from '#/types/i18n'
@@ -61,7 +61,7 @@ declare global {
         load: typeof yaml.load
       }
       mime: {
-        lookup: typeof mime.lookup
+        lookup: typeof mime.getType
       }
     }
     i18n: {