Merge pull request #97 from SRVFI-Raws/main

实现点击上传

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Final2x",
   "productName": "Final2x",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A cross-platform image super-resolution tool.",
   "main": "./out/main/index.js",
   "author": "Tohrusky",

src/main/openDirectory.ts

@@ -1,12 +1,20 @@
 import { dialog } from 'electron'
 
-export function openDirectory(event, p): void {
+/**
+ * @description Open a directory or file/multiple files
+ * @param event The event that triggered the function
+ * @param p The properties of the dialog
+ */
+export function openDirectory(event, p: Array<any>): void {
   dialog
     .showOpenDialog({
-      properties: [p]
+      properties: p
     })
     .then((result) => {
       console.log(result)
-      event.sender.send('selectedItem', result.filePaths[0])
+      event.sender.send('selectedItem', result.filePaths)
+    })
+    .catch((err) => {
+      console.log(err)
     })
 }

src/renderer/src/locales/en.ts

@@ -19,7 +19,7 @@ export const en = {
   },
   Final2xHome: {
     text0: 'Removal successful',
-    text1: 'Drag and drop images or folders here to upload'
+    text1: 'Click or drag and drop images or folders here to upload'
   },
   Final2xSettings: {
     text0: 'When the GPU display order is incorrect for the loaded device, choose another one',

src/renderer/src/locales/ja.ts

@@ -19,7 +19,7 @@ export const ja = {
   },
   Final2xHome: {
     text0: '削除が成功しました',
-    text1: 'ここにファイルをおいてアップロードしてください'
+    text1: '画像やフォルダをここにクリックまたはドラッグ＆ドロップしてアップロードしてください'
   },
   Final2xSettings: {
     text0: 'デバイスの負荷。GPUの表示順が正しくない場合は、別のものを選択してください',

src/renderer/src/locales/zh.ts

@@ -19,7 +19,7 @@ export const zh = {
   },
   Final2xHome: {
     text0: '移除成功',
-    text1: '将图片或文件夹拖拽到此处上传'
+    text1: '点击或拖拽图片或文件夹到此处上传'
   },
   Final2xSettings: {
     text0: '负载的设备，GPU显示顺序错误时，选择另一个即可',

src/renderer/src/utils/IOPath.ts

@@ -24,6 +24,15 @@ class ioPATH {
     inputpathMap.value.delete(id)
   }
 
+  /**
+   * @description 检查 id 是否存在，因为 naive-ui 生成的 id 长度较短，所以这里只检查 inputpathMap 即可
+   * @param id inputpath id
+   */
+  static checkID(id: string): boolean {
+    const { inputpathMap } = storeToRefs(useIOPathStore())
+    return inputpathMap.value.get(id) != undefined
+  }
+
   /**
    * @description Get an inputpath from inputpathMap by id
    * @param id inputpath id

src/renderer/src/utils/index.ts

@@ -36,6 +36,13 @@ class Utils {
       /* empty */
     }
   }
+
+  /**
+   * @description 生成超长随机字符串
+   */
+  static getRandString(): string {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+  }
 }
 
-export const { getCurrentLocale, getLanguage, sleep, DeepDeepSleep } = Utils
+export const { getCurrentLocale, getLanguage, sleep, DeepDeepSleep, getRandString } = Utils

src/renderer/src/utils/pathFormat.ts

@@ -37,6 +37,14 @@ class PathFormat {
   static checkPath(path: string): boolean {
     return path.startsWith('/') || path.includes('\\')
   }
+
+  /**
+   * @description 返回文件名
+   */
+  static getFileName(path: string): string {
+    const segments = path.split(/[/\\]/)
+    return segments[segments.length - 1]
+  }
 }
 
 export default PathFormat

src/renderer/src/views/Final2xHome.vue

@@ -7,6 +7,7 @@ import { FileImageOutlined } from '@vicons/antd'
 
 import PathFormat from '../utils/pathFormat'
 import ioPATH from '../utils/IOPath'
+import { getRandString } from '../utils'
 import { useIOPathStore } from '../store/ioPathStore'
 
 const { t } = useI18n()
@@ -26,6 +27,45 @@ class Final2xHomeNotifications {
   }
 }
 
+function handleClickUpload(): void {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const handleSelected = (e, path): void => {
+    if (path != undefined) {
+      path.forEach((p: string) => {
+        // 生成随机id
+        let pathid = getRandString()
+        while (ioPATH.checkID(pathid)) {
+          pathid = getRandString()
+        }
+        // console.log(pathid)
+        // 插入 inputpathMap
+        ioPATH.add(pathid, p)
+        // 插入 inputFileList
+        inputFileList.value.push({
+          fullPath: p,
+          id: pathid,
+          name: PathFormat.getFileName(p),
+          percentage: 0,
+          status: 'pending',
+          thumbnailUrl: null,
+          type: 'image/png',
+          url: null
+        })
+      })
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.electron.ipcRenderer.removeAllListeners('selectedItem') // 取消监听，防止多次触发
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.electron.ipcRenderer.send('open-directory-dialog', ['openFile', 'multiSelections'])
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.electron.ipcRenderer.on('selectedItem', handleSelected)
+}
+
 onMounted(() => {
   const dragWrapper = document.getElementById('file_drag')
   dragWrapper?.addEventListener('drop', (e) => {
@@ -82,7 +122,7 @@ function handleRemove(options: { file: UploadFileInfo; fileList: Array<UploadFil
       @before-upload="handleBeforeUpload"
       @change="handleUploadChange"
     >
-      <n-upload-dragger class="file-drag-zone">
+      <n-upload-dragger class="file-drag-zone" @click="handleClickUpload">
         <div class="file-drag-zone-logo-text">
           <div style="margin-bottom: 12px">
             <n-icon size="48" depth="3.0">

src/renderer/src/views/Final2xSettings.vue

@@ -144,16 +144,21 @@ class MyPopoverMessages {
 function getPath(): void {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  window.electron.ipcRenderer.send('open-directory-dialog', 'openDirectory')
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  window.electron.ipcRenderer.on('selectedItem', function (e, path) {
-    // console.log(path === undefined)
-    if (path != undefined) {
+  const handleSelected = (e, path): void => {
+    if (path[0] != undefined) {
       // console.log(ioPath.getoutputpath())
-      ioPath.setoutputpathManual(path)
+      ioPath.setoutputpathManual(path[0])
     }
-  })
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.electron.ipcRenderer.removeAllListeners('selectedItem') // 取消监听，防止多次触发
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.electron.ipcRenderer.send('open-directory-dialog', ['openDirectory'])
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.electron.ipcRenderer.on('selectedItem', handleSelected)
 }
 
 // -----------------------------------------------------------------------------------------

test/utils/IOPath.test.ts

@@ -14,9 +14,12 @@ describe('IOPath', () => {
 
   it('test_ioPath', () => {
     const { outputpath } = storeToRefs(useIOPathStore())
-
+    // checkID
+    expect(ioPath.checkID('114514')).toBe(false)
     // test inputpath
     ioPath.add('114514', 'test')
+    // checkID
+    expect(ioPath.checkID('114514')).toBe(true)
     expect(ioPath.getByID('114514')).toBe('test')
     ioPath.add('114514', 'test2')
     expect(ioPath.getByID('114514')).toBe('test2')

test/utils/index.test.ts

@@ -2,7 +2,7 @@
  * @vitest-environment jsdom
  */
 
-import { sleep, DeepDeepSleep, getCurrentLocale } from '../../src/renderer/src/utils'
+import { sleep, DeepDeepSleep, getCurrentLocale, getRandString } from '../../src/renderer/src/utils'
 import { describe, expect, it } from 'vitest'
 
 describe('Utils', () => {
@@ -23,4 +23,8 @@ describe('Utils', () => {
     const end = new Date().getTime()
     expect(end - start).toBeGreaterThanOrEqual(1000)
   })
+
+  it('getRandString', () => {
+    expect(getRandString())
+  })
 })

test/utils/pathFormat.test.ts

@@ -19,7 +19,7 @@ describe('PathFormat', () => {
     ])
   })
 
-  it('checkpath', () => {
+  it('check_path', () => {
     const check: Array<boolean> = [
       PathFormat.checkPath('/Users/test/Downloads/unix'),
       PathFormat.checkPath('C:\\Users\\test\\Downloads\\win'),
@@ -28,4 +28,11 @@ describe('PathFormat', () => {
     ]
     expect(check).toStrictEqual([true, true, false, false])
   })
+
+  it('get_file_name', () => {
+    expect(PathFormat.getFileName('/Users/test/Downloads/unix/114514.txt')).toBe('114514.txt')
+    expect(PathFormat.getFileName('C:\\Users\\test\\Downloads\\win\\genshin.png')).toBe(
+      'genshin.png'
+    )
+  })
 })