feat: 新增electron模板

.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/electron",
+    "plugin:import/typescript"
+  ],
+  "parser": "@typescript-eslint/parser"
+}

.gitignore

@@ -1,3 +1,92 @@
-/node_modules
-/.next
-src/.umi
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+.DS_Store
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Webpack
+.webpack/
+
+# Vite
+.vite/
+
+# Electron-Forge
+out/

.npmrc

@@ -0,0 +1,4 @@
+registry="https://registry.npmmirror.com"
+strict-peer-dependencies=false
+ignore-workspace-root-check=true
+electron_use_remote_checksums=1

.vscode/launch.json

@@ -0,0 +1,32 @@
+{
+  "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",
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+      },
+      "args": [".", "--remote-debugging-port=9222"],
+      "outputCapture": "std",
+      "console": "integratedTerminal"
+    }
+  ]
+}

README.md

@@ -1,34 +0,0 @@
-## 目前已有脚手架列表
-
-| 名称    | 说明                        | 技术栈                |
-| ------- | --------------------------- | --------------------- |
-| nextJs  | 基于 React 的服务端渲染方案 | nextJs + axios + antd |
-| ReactJs | 基于 React 的业务型脚手架   | umiJs + axios + antd  |
-| TaroJs  | 基于 React 的多端适配方案   | TaroJs 全家桶         |
-| Vue     | 基于 Vue 的业务型脚手架     | vueJs 全家桶          |
-| Gulp    | 基于 Gulp 的清凉型脚手架    | --                    |
-
-## 快速上手
-
-### 1. 安装相关依赖
-
-```js
-// 推荐
-yarn global add @nicecode/cli
-
-// or
-// npm install @nicecode/cli -g
-```
-
-### 2. 运行命令
-
-```js
-// 查看脚手架版本号，是否安装成功
-nice - V
-```
-
-### 3. 创建项目
-
-```js
-nice create ${项目名称}
-```

forge.config.ts

@@ -0,0 +1,54 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import type { ForgeConfig } from '@electron-forge/shared-types';
+import { MakerSquirrel } from '@electron-forge/maker-squirrel';
+import { MakerZIP } from '@electron-forge/maker-zip';
+import { MakerDeb } from '@electron-forge/maker-deb';
+import { MakerRpm } from '@electron-forge/maker-rpm';
+import { AutoUnpackNativesPlugin } from '@electron-forge/plugin-auto-unpack-natives';
+import { WebpackPlugin } from '@electron-forge/plugin-webpack';
+import { FusesPlugin } from '@electron-forge/plugin-fuses';
+import { FuseV1Options, FuseVersion } from '@electron/fuses';
+
+import { mainConfig } from './webpack.main.config';
+import { rendererConfig } from './webpack.renderer.config';
+
+const config: ForgeConfig = {
+  packagerConfig: {
+    asar: true,
+  },
+  rebuildConfig: {},
+  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
+  plugins: [
+    new AutoUnpackNativesPlugin({}),
+    new WebpackPlugin({
+      mainConfig,
+      renderer: {
+        config: rendererConfig,
+        entryPoints: [
+          {
+            html: './src/index.html',
+            js: './src/renderer.ts',
+            name: 'main_window',
+            preload: {
+              js: './src/preload.ts',
+            },
+          },
+        ],
+      },
+    }),
+    // Fuses are used to enable/disable various Electron functionality
+    // at package time, before code signing the application
+    new FusesPlugin({
+      version: FuseVersion.V1,
+      [FuseV1Options.RunAsNode]: false,
+      [FuseV1Options.EnableCookieEncryption]: true,
+      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
+      [FuseV1Options.EnableNodeCliInspectArguments]: false,
+      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
+      [FuseV1Options.OnlyLoadAppFromAsar]: true,
+    }),
+  ],
+};
+
+export default config;

global.d.ts

@@ -0,0 +1,8 @@
+interface IBaseAPI {
+  uploadFile: (path: string) => void
+  setTitle: (value: string) => void
+}
+
+interface Window {
+  baseAPI: IBaseAPI
+}

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "electron-template",
+  "productName": "template-App",
+  "version": "1.0.0",
+  "description": "My Electron application description",
+  "main": ".webpack/main",
+  "scripts": {
+    "start": "electron-forge start",
+    "package": "electron-forge package",
+    "make": "electron-forge make",
+    "publish": "electron-forge publish",
+    "lint": "eslint --ext .ts,.tsx ."
+  },
+  "devDependencies": {
+    "@electron-forge/cli": "^7.3.1",
+    "@electron-forge/maker-deb": "^7.3.1",
+    "@electron-forge/maker-rpm": "^7.3.1",
+    "@electron-forge/maker-squirrel": "^7.3.1",
+    "@electron-forge/maker-zip": "^7.3.1",
+    "@electron-forge/plugin-auto-unpack-natives": "^7.3.1",
+    "@electron-forge/plugin-fuses": "^7.2.0",
+    "@electron-forge/plugin-webpack": "^7.3.1",
+    "@electron-forge/shared-types": "^7.3.1",
+    "@electron/fuses": "^1.7.0",
+    "@types/node": "^20.12.2",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "@vercel/webpack-asset-relocator-loader": "1.7.3",
+    "css-loader": "^6.0.0",
+    "electron": "29.1.6",
+    "eslint": "^8.0.1",
+    "eslint-plugin-import": "^2.25.0",
+    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "node-loader": "^2.0.0",
+    "style-loader": "^3.0.0",
+    "ts-loader": "^9.2.2",
+    "ts-node": "^10.0.0",
+    "typescript": "~4.5.4",
+    "webpack": "^5.91.0"
+  },
+  "keywords": [],
+  "author": {
+    "name": "dev",
+    "email": "jzx710328466@gmail.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "antd": "^5.16.0",
+    "electron-squirrel-startup": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

src/app.tsx

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

src/index.css

@@ -0,0 +1,7 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif;
+  margin: auto;
+  max-width: 38rem;
+  padding: 2rem;
+}

src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>测试项目</title>
+
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

src/index.ts

@@ -0,0 +1,64 @@
+import { app, BrowserWindow, Menu, ipcMain } from 'electron';
+import { uploadFile } from './utils/upload';
+
+declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
+declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
+
+// Handle creating/removing shortcuts on Windows when installing/uninstalling.
+if (require('electron-squirrel-startup')) {
+  app.quit();
+}
+
+const createWindow = (): void => {
+  Menu.setApplicationMenu(null) 
+  ipcMain.handle('ping', () => 'pong')
+  const mainWindow = new BrowserWindow({
+    height: 600,
+    width: 800,
+    webPreferences: {
+      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY
+    },
+  });
+
+  ipcMain.on('set-title', (event, title) => {
+    const webContents = event.sender
+    const win = BrowserWindow.fromWebContents(webContents)
+    win.setTitle(title)
+  })
+
+  ipcMain.on('upload', (_event, filePath) => {
+    // 在后台线程中处理文件上传
+    uploadFile(filePath);
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+
+  // Open the DevTools.
+  mainWindow.webContents.openDevTools();
+};
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and import them here.

src/pages/home/index.tsx

@@ -0,0 +1,46 @@
+import { message, Upload, UploadProps } from 'antd'
+
+const { Dragger } = Upload;
+
+const props: UploadProps = {
+  name: 'file',
+  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'
+  },
+  onChange(info) {
+    const { status } = info.file;
+    if (status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully.`);
+    } else if (status === 'error') {
+      message.error(`${info.file.name} file upload failed.`);
+    }
+  },
+  onDrop(e) {
+    console.log('Dropped files', e.dataTransfer.files);
+  },
+};
+
+export default () => {
+
+  return (
+    <div>
+      <Dragger {...props}>
+        <p className="ant-upload-drag-icon">
+          ✋
+        </p>
+        <p className="ant-upload-text">文件拖拽到这上传</p>
+      </Dragger>
+    </div>
+  )
+}

src/preload.ts

@@ -0,0 +1,14 @@
+// See the Electron documentation for details on how to use preload scripts:
+// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
+import { contextBridge, ipcRenderer } from 'electron'
+
+contextBridge.exposeInMainWorld('versions', {
+  node: () => process.versions.node,
+  chrome: () => process.versions.chrome,
+  electron: () => process.versions.electron,
+})
+
+contextBridge.exposeInMainWorld('baseAPI', {
+  setTitle: (title: string) => ipcRenderer.send('set-title', title),
+  uploadFile: (filePath: string) => ipcRenderer.send('upload', filePath),
+})

src/renderer.ts

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

src/utils/upload.ts

@@ -0,0 +1,29 @@
+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'; // 请替换为实际的上传地址
+
+  console.log('fileStream', fileStream)
+
+  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);
+  });
+
+  fileStream.on('error', (err) => {
+    console.error('Failed to open file stream:', err);
+  });
+}

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "allowJs": true,
+    "module": "commonjs",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "*": ["node_modules/*"]
+    }
+  },
+  "include": ["src/**/*", "*.d.ts", "**/*.ts"]
+}

webpack.main.config.ts

@@ -0,0 +1,20 @@
+import type { Configuration } from 'webpack';
+
+import { rules } from './webpack.rules';
+import { plugins } from './webpack.plugins';
+
+export const mainConfig: Configuration = {
+  /**
+   * This is the main entry point for your application, it's the first file
+   * that runs in the main process.
+   */
+  entry: './src/index.ts',
+  // Put your normal webpack config below here
+  module: {
+    rules,
+  },
+  plugins,
+  resolve: {
+    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
+  },
+};

webpack.plugins.ts

@@ -0,0 +1,10 @@
+import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+export const plugins = [
+  new ForkTsCheckerWebpackPlugin({
+    logger: 'webpack-infrastructure',
+  }),
+];

webpack.renderer.config.ts

@@ -0,0 +1,19 @@
+import type { Configuration } from 'webpack';
+
+import { rules } from './webpack.rules';
+import { plugins } from './webpack.plugins';
+
+rules.push({
+  test: /\.css$/,
+  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+});
+
+export const rendererConfig: Configuration = {
+  module: {
+    rules,
+  },
+  plugins,
+  resolve: {
+    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
+  },
+};

webpack.rules.ts

@@ -0,0 +1,31 @@
+import type { ModuleOptions } from 'webpack';
+
+export const rules: Required<ModuleOptions>['rules'] = [
+  // Add support for native node modules
+  {
+    // We're specifying native_modules in the test because the asset relocator loader generates a
+    // "fake" .node file which is really a cjs file.
+    test: /native_modules[/\\].+\.node$/,
+    use: 'node-loader',
+  },
+  {
+    test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
+    parser: { amd: false },
+    use: {
+      loader: '@vercel/webpack-asset-relocator-loader',
+      options: {
+        outputAssetBase: 'native_modules',
+      },
+    },
+  },
+  {
+    test: /\.tsx?$/,
+    exclude: /(node_modules|\.webpack)/,
+    use: {
+      loader: 'ts-loader',
+      options: {
+        transpileOnly: true,
+      },
+    },
+  },
+];