fix: 修改配置

.vscode/launch.json

@@ -1,31 +1,20 @@
 {
   "version": "0.2.0",
-  "compounds": [
-    {
-      "name": "Main + renderer",
-      "configurations": ["Main", "Renderer"],
-      "stopAll": true
-    }
-  ],
   "configurations": [
     {
-      "name": "Renderer",
-      "port": 9222,
-      "request": "attach",
-      "type": "chrome",
-      "webRoot": "${workspaceFolder}"
-    },
-    {
-      "name": "Main",
       "type": "node",
       "request": "launch",
-      "cwd": "${workspaceFolder}",
-      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "name": "Electron Main",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
       "windows": {
-        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+        "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd"
       },
-      "args": [".", "--remote-debugging-port=9222"],
-      "outputCapture": "std",
+      // runtimeArgs will be passed directly to your Electron application
+      "runtimeArgs": [
+        "foo",
+        "bar"
+      ],
+      "cwd": "${workspaceFolder}",
       "console": "integratedTerminal"
     }
   ]

dist/dev/.nvue/app.css.js

@@ -0,0 +1,10 @@
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var require_app_css = __commonJS({
+  "app.css.js"(exports) {
+    exports.styles = [];
+  }
+});
+export default require_app_css();

dist/dev/.nvue/app.js

@@ -0,0 +1,2 @@
+Promise.resolve("./app.css.js").then(() => {
+});

forge.config.ts

@@ -28,7 +28,7 @@ const config: ForgeConfig = {
         entryPoints: [
           {
             html: './src/index.html',
-            js: './src/renderer.ts',
+            js: './src/renderer.tsx',
             name: 'main_window',
             preload: {
               js: './src/preload.ts',

global.d.ts

@@ -1,6 +1,7 @@
 interface IBaseAPI {
   uploadFile: (path: string) => void
   setTitle: (value: string) => void
+  onUploadProgress: (progress: unknown) => void
 }
 
 interface Window {

src/index.ts

@@ -10,8 +10,7 @@ if (require('electron-squirrel-startup')) {
 }
 
 const createWindow = (): void => {
-  Menu.setApplicationMenu(null) 
-  ipcMain.handle('ping', () => 'pong')
+  // Menu.setApplicationMenu(null) 
   const mainWindow = new BrowserWindow({
     height: 600,
     width: 800,
@@ -26,9 +25,9 @@ const createWindow = (): void => {
     win.setTitle(title)
   })
 
-  ipcMain.on('upload', (_event, filePath) => {
+  ipcMain.on('upload', (event, filePath) => {
     // 在后台线程中处理文件上传
-    uploadFile(filePath);
+    uploadFile(filePath, event.sender);
   });
 
   // and load the index.html of the app.

src/pages/home/index.tsx

@@ -1,4 +1,5 @@
 import { message, Upload, UploadProps } from 'antd'
+import { useEffect, useState } from 'react';
 
 const { Dragger } = Upload;
 
@@ -7,15 +8,11 @@ const props: UploadProps = {
   multiple: true,
   capture: 'user',
   hasControlInside: false,
-  action: file => {
-    console.log('file', file)
-    // @ts-ignore
-    window.baseAPI.uploadFile(file.path)
-    // @ts-ignore
-    window.baseAPI.setTitle(file.path)
-    return 'file'
-  },
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  action: false,
   onChange(info) {
+    console.log('info', info)
     const { status } = info.file;
     if (status !== 'uploading') {
       console.log(info.file, info.fileList);
@@ -32,12 +29,20 @@ const props: UploadProps = {
 };
 
 export default () => {
+  const [progress, setProgress] = useState(0)
+  
+  useEffect(() => {
+    window.baseAPI.onUploadProgress((_progress: unknown) => {
+      console.log('_progress', _progress)
+      setProgress(_progress)
+    })
+  }, [])
 
   return (
     <div>
       <Dragger {...props}>
         <p className="ant-upload-drag-icon">
-          ✋
+          ✋{progress}
         </p>
         <p className="ant-upload-text">文件拖拽到这上传</p>
       </Dragger>

src/preload.ts

@@ -11,4 +11,9 @@ contextBridge.exposeInMainWorld('versions', {
 contextBridge.exposeInMainWorld('baseAPI', {
   setTitle: (title: string) => ipcRenderer.send('set-title', title),
   uploadFile: (filePath: string) => ipcRenderer.send('upload', filePath),
+  onUploadProgress: (cb: (progress: string) => void) => ipcRenderer.on('upload-progress', 
+    (_event, progress) => {
+      cb?.(progress)
+    }
+  )
 })

src/renderer.ts

@@ -1,3 +0,0 @@
-// 客户端渲染
-import './index.css';
-import './app';

src/renderer.tsx

@@ -1,5 +1,6 @@
 import { createRoot } from 'react-dom/client';
+import './index.css';
 import App from './pages/home'
 
 const root = createRoot(document.getElementById('app'));
-root.render(<App />);
+root.render(<App />);

src/utils/upload.ts

@@ -1,29 +1,22 @@
 import fs from 'fs';
-import path from 'path';
-// import request from 'request';
 
-export const uploadFile = (filePath: File['path']) => {
-  console.log('123', 123)
-  const fileStream = fs.createReadStream(filePath);
-  const fileName = path.basename(filePath);
-  const uploadUrl = 'http://your-upload-api.com/upload'; // 请替换为实际的上传地址
+export const uploadFile = (filePath: File['path'], sender) => {
+  const fileSize = fs.statSync(filePath).size;
+  let uploadedSize = 0;
 
-  console.log('fileStream', fileStream)
+  const readStream = fs.createReadStream(filePath);
 
-  fileStream.on('open', () => {
-    console.log(`Start uploading file: ${fileName}`);
-    // const req = request.post(uploadUrl, (err, resp, body) => {
-    //   if (err) {
-    //     console.error('Failed to upload file:', err);
-    //   } else {
-    //     console.log('File uploaded successfully!');
-    //   }
-    // });
-
-    // fileStream.pipe(req);
+  readStream.on('data', (chunk) => {
+    uploadedSize += chunk.length;
+    const progress = Math.round((uploadedSize / fileSize) * 100);
+    sender.send('upload-progress', progress);
   });
 
-  fileStream.on('error', (err) => {
-    console.error('Failed to open file stream:', err);
+  readStream.on('end', () => {
+    sender.send('upload-success');
+  });
+
+  readStream.on('error', (err) => {
+    sender.send('upload-error', err.message);
   });
 }