Merge pull request 'electron' (#48) from electron into main

Reviewed-on: https://gitea.fleyx.com/fanxb/open-renamer/pulls/48

README.md

@@ -2,7 +2,11 @@
 
 ![预览图](https://s3.fleyx.com/picbed/2022/11/18386180128d01eb1a59b8eacf652895.png)
 
-renamer 的开源实现版本，BS 应用，支持 arm/x86 部署使用
-已打包镜像到 dockerhub 中:[hub.docker.com/r/fleyx/open-renamer](https://hub.docker.com/r/fleyx/open-renamer)
+renamer 的开源实现版本，BS 应用，支持 arm/x86 部署使用,两种使用方式：
+
+1. 部署容器到 nas
+   已打包到 dockerhub 中:[hub.docker.com/r/fleyx/open-renamer](https://hub.docker.com/r/fleyx/open-renamer)
+
+2. 下载桌面应用使用,目前仅支持 windows，后续计划支持 mac,linux[下载地址](https://github.com/FleyX/open-renamer/releases/latest)
 
 [点击查看参考文档](https://blog.fleyx.com/blog/detail/20221130)

electron/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+openRenamerBackend
+build
+.idea
+*.exe

electron/.npmrc

@@ -0,0 +1 @@
+electron_mirror=https://npmmirror.com/mirrors/electron/

electron/build.sh

@@ -0,0 +1,11 @@
+cd ../openRenamerFront
+yarn
+npm run build
+cd ../openRenamerBackend
+yarn
+tsc
+rm -rf ./static/js
+rm -rf ./static/css
+cp -r ../openRenamerFront/dist/* ./static
+cd ../electron
+npm run build

electron/main.js

@@ -0,0 +1,129 @@
+// main.js
+// 控制应用生命周期和创建原生浏览器窗口的模组
+const {app, BrowserWindow, Menu} = require('electron')
+const path = require('path')
+const fs = require('fs');
+const {spawn} = require('child_process');
+const net = require('net');
+const log = require('electron-log');
+
+
+const userHome = process.env.HOME || process.env.USERPROFILE;
+const dataPath = path.join(userHome, "openRenamer");
+
+log.transports.file.resolvePathFn = () => path.join(dataPath, 'logs/main.log');
+
+async function createWindow() {
+    // 隐藏菜单栏
+    Menu.setApplicationMenu(null)
+    // 创建浏览器窗口
+    const win = new BrowserWindow({
+        //width: 800,   //窗口宽度,单位像素. 默认是 800
+        //height: 600,  //窗口高度,单位像素. 默认是 600
+        icon: './logo.ico', // 设置窗口左上角的图标
+        show: false, //窗口创建的时候是否显示. 默认为 true
+        webPreferences: {
+            nodeIntegration: true, // 是否完整支持node。默认为 true
+            preload: path.join(__dirname, 'preload.js')  //界面的其它脚本运行之前预先加载一个指定脚本。
+        }
+    })
+    // 下面这两行代码配合上面 new BrowserWindow 里面的 show: false，可以实现打开时窗口最大化
+    win.maximize()
+    win.show()
+    log.info(__dirname);
+    let port = await startBackend()
+    // 并且为你的应用加载index.html
+    // win.loadFile('./dist/index.html')
+    log.info("backend service started")
+    win.loadURL(`http://localhost:` + port);
+    // win.webContents.openDevTools()
+}
+
+// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
+// 部分 API 在 ready 事件触发后才能使用。
+app.whenReady().then(createWindow)
+// 当所有窗口都被关闭后退出
+app.on('windows-all-closed', () => {
+    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
+    // 否则绝大部分应用及其菜单栏会保持激活。
+    if (process.platform !== 'darwin') {
+        app.quit()
+    }
+})
+app.on('activate', () => {
+    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
+    // 通常在应用程序中重新创建一个窗口。
+    if (BrowserWindow.getAllWindows().length === 0) {
+        createWindow()
+    }
+})
+
+/**
+ * 启动后台服务
+ * @returns {Promise<number>}
+ */
+async function startBackend() {
+    let port = 51000;
+    while (true) {
+        let ok = await checkPort(port);
+        if (ok) {
+            break;
+        }
+        port = port + 1;
+    }
+    log.info("start check folder exist", __dirname, __filename)
+    let exist = fs.existsSync("openRenamerBackend");
+    const childProcess = spawn('node', [(exist ? '' : '../') + 'openRenamerBackend/dist/index.js'], {
+        env: {
+            "PORT": port,
+            "DATA_PATH": dataPath
+        }
+    });
+
+    childProcess.stdout.on('data', (data) => {
+        log.info(`stdout: ${data}`);
+    });
+
+    childProcess.stderr.on('data', (data) => {
+        log.error(`stderr: ${data}`);
+    });
+
+    childProcess.on('close', (code) => {
+        log.info(`child process exited with code ${code}`);
+    });
+    log.info("check service start");
+    while (true) {
+        await sleep(100);
+        let success = !(await checkPort(port));
+        if (success) {
+            log.info("service start");
+            break;
+        }
+    }
+    return port;
+}
+
+/**
+ * 判断端口是否可用
+ * @param port
+ * @returns {Promise<unknown>}
+ */
+function checkPort(port) {
+    return new Promise((resolve, reject) => {
+        let server = net.createServer().listen(port);
+        server.on("listening", function () {
+            server.close();
+            resolve(true);
+        })
+        server.on("error", function (err) {
+            console.error(err);
+            resolve(false);
+        })
+    })
+}
+
+function sleep(time) {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => resolve(), time);
+    })
+}

electron/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "electron",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron .",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "electron-builder --win --x64"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "electron": "^28.0.0",
+    "electron-builder": "^24.9.1"
+  },
+  "build": {
+    "productName": "openRenamer",
+    "appId": "openRenamer.app",
+    "directories": {
+      "output": "build"
+    },
+    "files": [
+      "main.js",
+      "preload.js"
+    ],
+    "extraFiles": [
+      {
+        "from": "../openRenamerBackend",
+        "to": "openRenamerBackend"
+      }
+    ],
+    "copyright": "open-renamer",
+    "nsis": {
+      "oneClick": false,
+      "allowElevation": true,
+      "allowToChangeInstallationDirectory": true,
+      "installerIcon": "./renamer.ico",
+      "uninstallerIcon": "./renamer.ico",
+      "installerHeaderIcon": "./renamer.ico",
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true,
+      "shortcutName": "openRenamer"
+    },
+    "win": {
+      "icon": "./renamer.ico",
+      "target": [
+        "nsis",
+        "zip"
+      ],
+      "extraFiles": [
+        {
+          "from": "windows/node.exe",
+          "to": "node.exe"
+        }
+      ]
+    },
+    "mac": {
+      "target": [
+        "dmg",
+        "zip"
+      ]
+    },
+    "linux": {
+      "icon": "build/icons"
+    }
+  },
+  "dependencies": {
+    "electron-log": "^5.0.1"
+  }
+}

electron/preload.js

@@ -0,0 +1,12 @@
+// preload.js
+// 所有Node.js API都可以在预加载过程中使用。
+// 它拥有与Chrome扩展一样的沙盒。
+window.addEventListener('DOMContentLoaded', () => {
+    const replaceText = (selector, text) => {
+        const element = document.getElementById(selector)
+        if (element) element.innerText = text
+    }
+    for (const dependency of ['chrome', 'node', 'electron']) {
+        replaceText(`${dependency}-version`, process.versions[dependency])
+    }
+})

electron/readme.md

@@ -0,0 +1 @@
+需要下载windows版的node.js压缩包，将其中的node.exe 放到windowes目录下