Linux 相关支持；首次连接本地服务器添加重试机制；上传大小添加限制

ttqftech · ttqftech · commit 045efd8cf478 · 2024-03-29T00:45:00.000+08:00
diff --git a/config/pkg.linux.config.json b/config/pkg.linux.config.json
@@ -0,0 +1,8 @@
+{
+	"scripts": [],
+	"assets": [],
+	"targets": [
+		"node16-linux-x64"
+	],
+	"outputPath": "app/backend"
+}
diff --git a/electron-builder.json5 b/electron-builder.json5
@@ -14,39 +14,63 @@
     "!**/*.map"
   ],
   "extraFiles": [
-    {
-      "from": "app/backend/index.exe",
-      "to": "FFBoxService.exe",
-    },
-    {
-      "from": "app/backend/index",
-      "to": "Resources/FFBoxService",
-    },
-    {
-      "from": "FFBoxHelper.exe",
-      "to": "FFBoxHelper.exe",
-    },
     {
       "from": "LICENSE",
       "to": "LICENSE",
     },
   ],
-  "mac": {
+  "win": {
     "artifactName": "${productName}_${version}.${ext}",
     "target": [
-      "dmg"
-    ]
+      {
+        "target": "dir",
+        "arch": ["x64"],
+      }
+    ],
+    "extraFiles": [
+      {
+        "from": "app/backend/index.exe",
+        "to": "FFBoxService.exe",
+      },
+      {
+        "from": "FFBoxHelper.exe",
+        "to": "FFBoxHelper.exe",
+      },
+    ],
   },
-  "win": {
+  "mac": {
+    "artifactName": "${productName}_${version}.${ext}",
     "target": [
       {
-        "target": "dir",
-        "arch": [
-          "x64"
-        ]
+        "target": "dmg",
+        'arch': ["arm64"],
       }
     ],
-    "artifactName": "${productName}_${version}.${ext}"
+    "extraFiles": [
+      {
+        "from": "app/backend/index",
+        "to": "Resources/FFBoxService",
+      },
+    ],
+  },
+  "linux": {
+    "target": [
+      {
+        "target": "AppImage",
+        "arch": ["x64"],
+      },
+      {
+        "target": "deb",
+        "arch": ["x64"],
+      },
+    ],
+    "artifactName": "${productName}_${version}.${ext}",
+    "extraFiles": [
+      {
+        "from": "app/backend/index",
+        "to": "FFBoxService",
+      },
+    ],
   },
   "nsis": {
     "oneClick": false,
diff --git a/package.json b/package.json
@@ -15,10 +15,14 @@
     "build:backend": "node scripts/build-backend.mjs",
     "pkg:backend:win": "pkg --config ./config/pkg.win.config.json ./app/backend/index.cjs",
     "pkg:backend:mac": "pkg --config ./config/pkg.mac.config.json ./app/backend/index.cjs",
+    "pkg:backend:linux": "pkg --config ./config/pkg.linux.config.json ./app/backend/index.cjs",
     "package": "electron-builder",
     "build:everything": "npm run build:frontend && npm run build:backend && npm run package"
   },
-  "author": "",
+  "author": {
+    "name": "滔滔清风",
+    "email": "ttqf.tech@qq.com"
+  },
   "license": "ISC",
   "devDependencies": {
     "@types/crypto-js": "^4.1.1",
diff --git a/scripts/build-backend.mjs b/scripts/build-backend.mjs
@@ -9,8 +9,7 @@ const backendConfig = path.resolve('config/vite.backend.ts');
 // const backendConfig = path.join(__dirname, '../config/vite.backend.ts');
 // const backendConfig = require(path.join(__dirname, '../config/vite.backend.ts'));
 
-const isMacOS = process.platform === 'darwin';
-const npmExecutablePath = isMacOS ? 'npm' : 'npm.cmd';
+const npmExecutablePath = process.platform === 'win32' ? 'npm.cmd' : 'npm';
 
 // 颜色信息可参考 https://misc.flogisoft.com/bash/tip_colors_and_formatting
 function wrapColor(color, msg) {
@@ -55,7 +54,8 @@ async function buildBackend() {
 		configFile: backendConfig,
 		mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
 	});
-	const buildProcess = spawnSync(npmExecutablePath, ['run', `pkg:backend:${isMacOS ? 'mac' :　'win'}`], { stdio: 'inherit' });
+	const cmdName = process.platform === 'win32' ? 'win' : (process.platform === 'darwin' ? 'mac' : 'linux');
+	const buildProcess = spawnSync(npmExecutablePath, ['run', `pkg:backend:${cmdName}`], { stdio: 'inherit' });
 	// buildProcess.once('exit', process.exit);
 }
 
diff --git a/scripts/dev-frontend.mjs b/scripts/dev-frontend.mjs
@@ -13,9 +13,6 @@ const rendererConfig = path.resolve('config/vite.renderer.ts');
 const query = new URLSearchParams(import.meta.url.split('?')[1]);
 const debug = query.has('debug');
 
-const isMacOS = process.platform === 'darwin';
-const npmExecutablePath = isMacOS ? 'npm' : 'npm.cmd';
-
 // 颜色信息可参考 https://misc.flogisoft.com/bash/tip_colors_and_formatting
 function wrapColor(color, msg) {
 	const colorString = [49, 41, 42, 43, 46, 104][['default', 'red', 'green', 'yellow', 'cyan', 'light blue'].indexOf(color) || 0];
diff --git a/src/backend/FFBoxService.ts b/src/backend/FFBoxService.ts
@@ -65,13 +65,25 @@ export class FFBoxService extends (EventEmitter as new () => TypedEventEmitter<F
 	public async initFFmpeg(): Promise<void> {
 		console.log(getTimeString(new Date()), '检查 FFmpeg 路径和版本。');
 		if (process.platform === 'darwin') {
-			await fsPromise.access(path.join(process.execPath, 'ffmpeg'), fs.constants.R_OK).then((result) => {
-				this.ffmpegPath = path.join(process.execPath, 'ffmpeg');
+			await fsPromise.access(path.join(process.execPath, '../ffmpeg'), fs.constants.X_OK).then((result) => {
+				this.ffmpegPath = path.join(process.execPath, '../ffmpeg'); // 【程序目录】沙箱运行模式，service 与 ffmpeg 处在同一层级
 			}).catch(() => {});
-			await fsPromise.access('/usr/local/bin/ffmpeg', fs.constants.R_OK).then((result) => {
-				this.ffmpegPath = '/usr/local/bin/ffmpeg';
+			await fsPromise.access('/usr/local/bin/ffmpeg', fs.constants.X_OK).then((result) => {
+				this.ffmpegPath = '/usr/local/bin/ffmpeg'; // 【系统目录】macOS 只允许用户往 /usr/local/bin/ 放东西（而不能是 /usr/bin/），且此种情况下需要完整路径才能引用
 			}).catch(() => {});
 		}
+		if (process.platform === 'linux') {
+			await fsPromise.access(path.join(process.execPath, '../ffmpeg'), fs.constants.X_OK).then((result) => {
+				// 【程序目录】deb 沙箱运行模式。service 与 ffmpeg 处在同一目录（/opt/FFBox/）
+				this.ffmpegPath = path.join(process.execPath, '../ffmpeg');
+			}).catch(() => {});
+			await fsPromise.access(path.join(process.cwd(), 'ffmpeg'), fs.constants.X_OK).then((result) => {
+				this.ffmpegPath = path.join(process.cwd(), 'ffmpeg'); // 【程序目录】AppImage 沙箱运行模式，读取 .AppImage 同级目录
+			}).catch(() => {});
+			// 【系统目录】Linux 下 /usr/local/bin/ 和 /usr/bin/ 里的东西均能被直接引用，包括终端执行和沙箱执行，因此此处不需要进行处理
+			// console.log('路径', process.execPath, process.cwd(), __dirname, this.ffmpegPath);
+			// this.ffmpegVersion = `路径 ${process.execPath}, ${process.cwd()}, ${__dirname}, ${this.ffmpegPath}`;
+		}
 		const ffmpeg = new FFmpeg(this.ffmpegPath, 1);
 		ffmpeg.on('data', ({ content }) => {
 			this.setCmdText(-1, content);
diff --git a/src/main/index.ts b/src/main/index.ts
@@ -25,6 +25,7 @@ class ElectronApp {
 	mountAppEvents(): void {
 		// 本程序是启动的第二个实例时，将因获不到锁而退出
 		if (!app.requestSingleInstanceLock()) {
+			console.log('FFBox 已启动，暂不支持启动第二个实例');
 			app.quit();
 			process.exit(0);
 		}
@@ -51,6 +52,13 @@ class ElectronApp {
 				this.createMainWindow();
 			}
 		});
+		app.on('window-all-closed', () => {
+			// FFBoxService 进程尽管没有指定 detached
+			// 但在 macOS 上，主进程退出不会导致 service 退出；在 linux 上，主进程调用了 app.exit() 之后依然会等待 service 退出
+			// 故保险起见主动关闭
+			this.service?.sendSig(9);
+			app.exit();
+		});
 
 		// Set app user model id for windows
 		// electronApp.setAppUserModelId('com.electron');
@@ -160,11 +168,42 @@ class ElectronApp {
 		// this.electronStore = new ElectronStore();
 	}
 
-	createService(): Promise<void> {
+	async createService(): Promise<void> {
 		this.service = new ProcessInstance();
 		// 目前做不了进程分离，因为启动的时候会瞬间弹一个黑框，十分不优雅。等后期给选项让用户决定行为再去做：https://github.com/nodejs/node/issues/21825
 		// return this.service.start('FFBoxService.exe', [], { detached: true, stdio: 'ignore', windowsHide: true, shell: false });
-		return this.service.start(getOs() === 'Windows' ? 'FFBoxService.exe' : path.join(process.resourcesPath, 'FFBoxService')).then(() => osBridge.sendLoadStatus('service'));
+		let servicePath = '';
+		if (getOs() === 'Windows') {
+			servicePath = 'FFBoxService.exe';
+		} else if (getOs() === 'MacOS') {
+			servicePath = path.join(process.resourcesPath, 'FFBoxService');
+		} else if (getOs() === 'Linux') {
+			// this.mainWindow.webContents.send('debugMessage', 'service 路径', process.execPath, __dirname, __filename, process.cwd(), path.join(process.execPath, '../FFBoxService'));
+			await fs.access('./FFBoxService', fs.constants.X_OK).then((result) => {
+				servicePath = './FFBoxService'; // 通过终端直接执行
+			}).catch(() => {});
+			await fs.access(path.join(process.cwd(), 'FFBoxService'), fs.constants.X_OK).then((result) => {
+				servicePath = path.join(process.cwd(), 'FFBoxService'); // 无沙箱双击执行、通过终端直接执行
+			}).catch(() => {});	
+			await fs.access(path.join(process.execPath, '../FFBoxService'), fs.constants.X_OK).then((result) => {
+				servicePath = path.join(process.execPath, '../FFBoxService'); // AppImage 双击执行（/tmp 目录）、deb 安装后双击执行（/opt/FFBox/）
+			});
+		}
+		// this.mainWindow.webContents.send('debugMessage', '选出路径', servicePath);
+		return new Promise((resolve, reject) => {
+			this.service.start(servicePath).then(() => {
+				// 需要加一点延迟才报告成功，主要是因为 service 启动 server 需要一定时间，待 server 启动好之后才让 renderer 去连接
+				// 在 Windows 中可能不需要加这个延时，但是在 macOS 和 Linux 上似乎都是需要的
+				// 另外，调试过程中发现，如果尝试使用 debugMessage 把调试消息发送给 renderer，当程序忙的时候 renderer 并不一定会按实际顺序去显示，因此需要适当增加延时以验证 Promise 正常工作
+				// 150ms 延迟在 Linux 上很可能不够。但目前的设计是在 renderer 那边自动重试，主进程尽快报告完成。
+				setTimeout(() => {
+					osBridge.sendLoadStatus('service');
+					resolve(undefined);
+				}, 150);
+			}).catch(() => {
+				reject();
+			});
+		});
 	}
 
 	mountIpcEvents(): void {
@@ -251,9 +290,7 @@ class ElectronApp {
 		});
 
 		// 启动一个 ffboxService，这个 ffboxService 目前钦定监听 localhost:33269，而 serviceBridge 会连接此 service
-		ipcMain.on('startService', () => {
-			this.createService();
-		});
+		ipcMain.handle('startService', () => this.createService());
 
 		// osBridge 系列
 		ipcMain.on('triggerSystemMenu', () => osBridge.triggerSystemMenu());
diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
@@ -14,14 +14,19 @@ import nodeBridge from './bridges/nodeBridge';
 
 const appStore = useAppStore();
 
-onMounted(() => {
+onMounted(async () => {
 	// 初始化本地服务器
-	if (location.href.startsWith('file')) {
-		nodeBridge.startService();
-	}
-	const localServerId = appStore.addServer();
+	const firstServerId = appStore.addServer();
 	if (nodeBridge.env === 'electron') {
-		appStore.initializeServer(localServerId, 'localhost', 33269);
+		// electron 环境自动连接 localhost
+		if (location.href.startsWith('file')) {
+			// 打包后的 electron 环境首先启动 service 再连接
+			nodeBridge.startService().finally(() => {
+				appStore.initializeServer(firstServerId, 'localhost', 33269, 3); // 4 次连接机会
+			});
+		} else {
+			appStore.initializeServer(firstServerId, 'localhost', 33269);
+		}
 	}
 
 	// 挂载退出确认
@@ -72,9 +77,9 @@ onMounted(() => {
 			gp.audio = await nodeBridge.localStorage.get('audio') || gp.audio;
 			gp.output = await nodeBridge.localStorage.get('output') || gp.output;
 
-			appStore.frontendSettings = await nodeBridge.localStorage.get('frontendSettings') || appStore.frontendSettings;
-			appStore.applyFrontendSettings(false);
 		}
+		appStore.frontendSettings = await nodeBridge.localStorage.get('frontendSettings') || appStore.frontendSettings;
+		appStore.applyFrontendSettings(false);
 	})();
 
 	setTimeout(() => {
diff --git a/src/renderer/src/bridges/nodeBridge.ts b/src/renderer/src/bridges/nodeBridge.ts
@@ -206,8 +206,8 @@ export default {
 		window.jsb?.ipcRenderer?.send('openDevTools');
 	},
 
-	startService(): void {
-		window.jsb?.ipcRenderer?.send('startService');
+	startService(): Promise<void> {
+		return window.jsb?.ipcRenderer?.invoke('startService');
 	},
 
 	setBlurBehindWindow(on = true): void {
diff --git a/src/renderer/src/containers/MainFrame/MainArea/ListArea.vue b/src/renderer/src/containers/MainFrame/MainArea/ListArea.vue
@@ -147,9 +147,9 @@ const onDrop = (event: DragEvent) => {	// 此函数触发四次 taskList update
 					<div style="height: 12px" />
 					<p>1. 在<a @click="handleDownloadFFmpegClicked"> FFmpeg 官网</a>下载适用于 <span>{{ appStore.currentServer.data.os || '对应操作系统' }}</span> 的程序</p>
 					<p v-if="['Windows', 'unknown'].includes(appStore.currentServer.data.os)">　　2.1. 选择一：将 ffmpeg 可执行文件所在路径放至于环境变量中</p>
-					<p v-if="['Windows', 'unknown'].includes(appStore.currentServer.data.os)">　　2.2. 选择二：将 ffmpeg 可执行文件放入 FFBox 可执行程序路径</p>
-					<p v-if="appStore.currentServer.data.os === 'MacOS'">　　2.1. 选择一：将 ffmpeg 可执行文件放入 /usr/local/bin</p>
-					<p v-if="appStore.currentServer.data.os === 'MacOS'">　　2.2. 选择二：将 ffmpeg 可执行文件放入 {{ appStore.currentServer.data.isSandboxed ? 'FFBox.app/Contents/Resources' : 'FFBoxService 可执行程序路径' }}</p>
+					<p v-if="['MacOS', 'Linux'].includes(appStore.currentServer.data.os)">　　2.1. 选择一：将 ffmpeg 可执行文件放入 /usr/local/bin</p>
+					<p v-if="['Windows', 'Linux', 'unknown'].includes(appStore.currentServer.data.os)">　　2.2. 选择二：将 ffmpeg 可执行文件放入 FFBox 可执行程序相同目录</p>
+					<p v-if="appStore.currentServer.data.os === 'MacOS'">　　2.2. 选择二：将 ffmpeg 可执行文件放入 {{ appStore.currentServer.data.isSandboxed ? 'FFBox.app/Contents/Resources' : 'FFBoxService 可执行程序相同目录' }}</p>
 					<div style="height: 4px" />
 					<p>完成以上操作后，重启{{ appStore.currentServer.entity.ip === 'localhost' ? '本软件' : ' FFBoxService ' }}即可开始使用</p>
 					<div style="height: 12px" />
diff --git a/src/renderer/src/containers/MainFrame/MainArea/ListArea/TaskItem.module.less b/src/renderer/src/containers/MainFrame/MainArea/ListArea/TaskItem.module.less
@@ -342,7 +342,7 @@
 					height: calc(100% - 4px);
 					resize: none;
 					color: var(--33);
-					font-family: Consolas,monaco,"黑体","苹方-简","苹方",Roboto;
+					font-family: Consolas,monaco,"Noto Mono","黑体","苹方-简","苹方",Roboto;
 					font-weight: 400;
 					font-size: 12px;
 					line-height: 13px; // 52 / 4
diff --git a/src/renderer/src/containers/MainFrame/MainArea/ParaBox.vue b/src/renderer/src/containers/MainFrame/MainArea/ParaBox.vue
@@ -291,7 +291,7 @@ const getButtonColorStyle = (index: number) => ({ color: appStore.paraSelected =
 					height: 100%;
 					resize: none;
 					color: var(--33);
-					font-family: Consolas,monaco,"黑体","苹方-简","苹方",Roboto;
+					font-family: Consolas,monaco,"Noto Mono","黑体","苹方-简","苹方",Roboto;
 					font-weight: 400;
 					font-size: 12px;
 					line-height: 13px; // 52 / 4
diff --git a/src/renderer/src/stores/appStore.ts b/src/renderer/src/stores/appStore.ts
@@ -79,7 +79,7 @@ export const useAppStore = defineStore('app', {
 				},
 			},
 			frontendSettings: {
-				colorTheme: 'themeDark',
+				colorTheme: 'themeLight',
 			},
 			showGlobalParams: true,
 			unreadNotificationCount: 0,
@@ -94,7 +94,7 @@ export const useAppStore = defineStore('app', {
 			availablePresets: [],
 			downloadMap: new Map(),
 			machineCode: '',
-			functionLevel: 50,
+			functionLevel: 20,
 		};
 	},
 	getters: {
@@ -111,6 +111,7 @@ export const useAppStore = defineStore('app', {
 		 */
 		addTasks (files: FileList) {
 			function checkAndUploadFile(file: File, id: number) {
+				file.size
 				const reader = new FileReader();
 				reader.readAsBinaryString(file);
 				reader.addEventListener('loadend', () => {
@@ -193,6 +194,15 @@ export const useAppStore = defineStore('app', {
 				setTimeout(() => {	// v2.4 版本开始完全可以不要延时，但是太生硬，所以加个动画
 					console.log('添加任务', file.path);
 					let isRemote = server.entity.ip !== 'localhost';
+					const limitedFileSizeMB = isRemote ? (这.functionLevel >= 60 ? 192 : 127) : Infinity;
+					// 超过约 200MB 的文件在进行 CryptoJS.SHA1 时会导致页面崩溃
+					if (file.size > limitedFileSizeMB * 1000 * 1000) {
+						Popup({
+							message: `${file.name} 文件大小超过 ${limitedFileSizeMB} MB，暂不支持上传操作`,
+							level: 2,
+						});
+						return;
+					}
 					let promise: Promise<number> = 这.addTask(trimExt(file.name), isRemote ? '' : file.path);
 					if (isRemote) {
 						promise.then((id) => {
@@ -555,7 +565,7 @@ export const useAppStore = defineStore('app', {
 		/**
 		 * 初始化服务器连接并挂载事件监听
 		 */
-		initializeServer(serverId: string, ip: string, port: number) {
+		initializeServer(serverId: string, ip: string, port: number, retryCount = 0) {
 			const 这 = useAppStore();
 			const server = 这.servers.find((server) => server.data.id === serverId) as Server;
 			const entity = server.entity;
@@ -613,9 +623,16 @@ export const useAppStore = defineStore('app', {
 				这.pushMsg(`已断开服务器 ${server.data.name} 的连接`, NotificationLevel.warning);
 			});
 			entity.on('error', () => {
-				console.log(`服务器 ${server.entity.ip} 连接出错，建议检查网络连接或防火墙`);
+				if (!retryCount) {
+					console.log(`服务器 ${server.entity.ip} 连接出错，建议检查网络连接或防火墙`);
+					这.pushMsg(`服务器 ${server.data.name} 连接出错，建议检查网络连接或防火墙`, NotificationLevel.error);
+				} else {
+					console.log(`服务器 ${server.entity.ip} 连接失败，剩余重试次数 ${retryCount}`);
+					setTimeout(() => {
+						这.initializeServer(serverId, ip, port, retryCount - 1);
+					}, 150);
+				}
 				destroy();
-				这.pushMsg(`服务器 ${server.data.name} 连接出错，建议检查网络连接或防火墙`, NotificationLevel.error);
 			});
 		},
 		/**
diff --git a/日志.md b/日志.md
diff --git a/需求池.md b/需求池.md
