修复 Windows 上转码完成后无法双击打开文件；新增服务器与客户端版本不匹配提示

Author: ttqftech

package.json

@@ -1,6 +1,6 @@
 {
   "name": "FFBox",
-  "version": "4.1.0-alpha",
+  "version": "4.1.0",
   "description": "",
   "main": "app/main/index.cjs",
   "scripts": {

src/backend/FFBoxService.ts

@@ -135,7 +135,7 @@ export class FFBoxService extends (EventEmitter as new () => TypedEventEmitter<F
 			// 本地文件直接获取媒体信息
 			this.getFileMetadata(id, task, filePath);
 		} else {
-			task.outputFile = fGenerator.concatFilePath(task.after.output, undefined, `${new Date().getTime()}${randomString(3)}`);
+			task.outputFile = fGenerator.getOutputPathRemote(task.after.output, `${new Date().getTime()}${randomString(3)}`);
 			task.paraArray = getFFmpegParaArray(task.after, true, undefined, undefined, task.outputFile);
 			// 网络文件等待上传完成后再另行调用获取媒体信息
 			task.status = TaskStatus.TASK_INITIALIZING;
@@ -616,7 +616,7 @@ export class FFBoxService extends (EventEmitter as new () => TypedEventEmitter<F
 			const filePath = task.after.input.files[0].filePath;
 			if (task.remoteTask) {
 				// 如果修改了输出格式，需要重新计算 outputFile
-				task.outputFile = fGenerator.concatFilePath(task.after.output, undefined, `${new Date().getTime()}${randomString(3)}`);
+				task.outputFile = fGenerator.getOutputPathRemote(task.after.output, `${new Date().getTime()}${randomString(3)}`);
 				task.paraArray = getFFmpegParaArray(task.after, true, undefined, undefined, task.outputFile);
 			} else {
 				task.paraArray = getFFmpegParaArray(task.after, true);

src/common/constants.ts

@@ -1,11 +1,11 @@
 export const version = (() => {
-    let ret = '4.1_alpha';
+    let ret = '4.1';
     if (!buildInfo) {
         ret += ' *'
     } else if (buildInfo.isDev) {
         ret += ` ${buildInfo.gitCommit}`
     }
     return ret;
 })();
-export const buildNumber = 11;
-//	1.0	1.1	2.0	2.1	2.2	2.3	2.4 2.5 2.6 3.0 4.0
+export const buildNumber = 12;
+//	1.0	1.1	2.0	2.1	2.2	2.3	2.4 2.5 2.6 3.0 4.0 4.1

src/common/getFFmpegParaArray.ts

@@ -28,5 +28,5 @@ export function getFFmpegParaArrayOutputPath(outputParams: OutputParams) {
 	const inputFilePath = outputParams.input.files[0] && outputParams.input.files[0].filePath;
 	const outputBaseName = trimExt(basename(inputFilePath || '[输出文件名]'));
 	const outputDir = dirname(inputFilePath || '[输出目录]');
-	return fGenerator.concatFilePath(outputParams.output, outputDir, outputBaseName);
+	return fGenerator.getOutputPathLocal(outputParams.output, outputDir, outputBaseName);
 }

src/common/params/formats.ts

@@ -135,9 +135,9 @@ const hwaccels: Hwaccel[] = [
 
 const generator = {
 	/**
-	 * 连接并补充扩展名的文件名（fileDir 为空则仅输出带扩展名的文件名）
+	 * 连接并补充扩展名的文件名
 	 */
-	concatFilePath: function (outputParams: OutputParams_output, fileDir: string, fileBasename: string) {
+	getOutputPathLocal: function (outputParams: OutputParams_output, fileDir: string, fileBasename: string) {
 		let extension;
 		if (outputParams.format.length && outputParams.format !== '无') {
 			let format = formats.find((item) => {
@@ -149,11 +149,25 @@ const generator = {
 				extension = outputParams.format;
 			}
 		}
-		let filePath = '';
-		if (fileDir) {
-			filePath += `${fileDir}${fileDir.endsWith('/') ? '' : '/'}`;
+		let outputFileName = outputParams.filename;
+		outputFileName = outputFileName.replace(/\[filedir\]/g, fileDir);
+		outputFileName = outputFileName.replace(/\[filebasename\]/g, fileBasename);
+		outputFileName = outputFileName.replace(/\[fileext\]/g, extension);
+		return outputFileName;
+	},
+	getOutputPathRemote: function (outputParams: OutputParams_output, fileBasename: string) {
+		let extension;
+		if (outputParams.format.length && outputParams.format !== '无') {
+			let format = formats.find((item) => {
+				return item.value === outputParams.format;
+			});
+			if (format) {
+				extension = format.extension;
+			} else {	// 用户手动输入的格式
+				extension = outputParams.format;
+			}
 		}
-		filePath += fileBasename;
+		let filePath = fileBasename;
 		if (extension) {
 			filePath += `.${extension}`;
 		}

src/common/types.ts

@@ -179,7 +179,7 @@ export interface Task {
 	cmdData: string;
 	errorInfo: Array<string>;
 	// notifications: Array<Notification>;
-	outputFile: string;		// 对于本地任务，表示生成文件的绝对路径；对于远程任务，省略文件夹名 mergeUploaded 后生成。如无则为 ''
+	outputFile: string;		// 对于本地任务，表示生成文件的绝对路径；对于远程任务，则为 basename（自动生成的字符串） + ext，在 taskAdd 和调节参数之后生成文件名。
 }
 
 export interface ServiceTask extends Task {

src/main/index.ts

@@ -248,17 +248,7 @@ class ElectronApp {
 
 		// 打开文件
 		ipcMain.on('openFile', (event, url: string) => {
-			switch (getOs()) {
-				case 'MacOS':
-					exec(url);
-					break;
-				case 'Windows':
-					exec(url);
-					break;
-				case 'Linux':
-					exec(url);
-					break;
-			}
+			shell.openPath(url);
 		});
 
 		// 闪烁任务栏图标

src/renderer/src/containers/MainFrame/MainArea/ListArea/TaskItem.tsx

@@ -297,6 +297,7 @@ export const TaskItem = defineComponent((props: Props) => {
 	});
 	onMounted(() => {
 		window.addEventListener('resize', windowWidthListener.value);
+		windowWidthListener.value();
 	});
 	onBeforeUnmount(() => {
 		window.removeEventListener('resize', windowWidthListener.value);

src/renderer/src/stores/appStore.ts

@@ -2,6 +2,7 @@ import { VNodeRef } from 'vue';
 import { defineStore } from 'pinia';
 import CryptoJS from 'crypto-js';
 import { Notification, NotificationLevel, OutputParams, TaskStatus, TransferStatus, WorkingStatus } from '@common/types';
+import { version } from '@common/constants'; 
 import { Server } from '@renderer/types';
 import { defaultParams } from "@common/defaultParams";
 import { ServiceBridge, ServiceBridgeStatus } from '@renderer/bridges/serviceBridge'
@@ -527,7 +528,12 @@ export const useAppStore = defineStore('app', {
 				fetch(`http://${server.entity.ip}:${server.entity.port}/version`, { method: 'get' }),
 				fetch(`http://${server.entity.ip}:${server.entity.port}/properties`, { method: 'get' }),
 			]).then(([versionResponse, propertiesResponse]) => {
-				versionResponse.text().then((text) => server.data.version = text);
+				versionResponse.text().then((text) => {
+					server.data.version = text;
+					if (text !== version) {{
+						Popup({ message: '服务器版本与客户端版本不匹配，可能会导致部分操作异常，请谨慎操作', level: NotificationLevel.warning });
+					}}
+				});
 				propertiesResponse.json().then((obj) => {
 					server.data.os = obj.os;
 					server.data.isSandboxed = obj.isSandboxed;

日志.md

@@ -1394,7 +1394,7 @@ Linux 适配，核心问题依然是两个：FFBoxService 和 ffmpeg 调用。
 
 这个 commit 大体先放这么多。
 
-……
+---
 
 对了，上次没提到我为什么又开始更新 FFBox 了。
 或许是因为，现在六月份了吧。年初所想到的一些想法又因为上述的一些原因需要冷静（主要是懒）而没有执行，这个就另说了。只是在没有更新的这段时间里，我似乎没有为这个世界留下什么痕迹。最近一段时间发生的事情又因为需要冷静（主要是懒）而至今没有记录。那这几个月以来差不多是一事无成了吧。那别的事情没有动力，FFBox 更新这种常规的东西总可以吧？毕竟，开发日志现在也被我当一小部分日记来用了🌚。
@@ -1435,7 +1435,7 @@ Vue 3 响应式的实现原理是 Proxy。比如说要用 ref 或者 reactive 
 这下妨碍 TaskItem 开发的问题大致就解决了。再回去看那个尝试用 tsx 的 .vue 组件，发现类型不报错了。不知道是我中途 debug 时给 vscode 升级了 TypeScript 的缘故还是我把 Vue 从 3.3 升级到 3.4 又改了 tsconfig 的缘故。反正它类型不报错了。
 以后再试试用 tsx 写 .vue 文件。
 
-……
+---
 
 做好上面这些基础工作之后，今天做了一下 TaskItem 的优化：命令行输出支持自动滚到底、剩余时间数位更改、秒和帧取消横条值显示。
 
@@ -1475,7 +1475,7 @@ TaskItem 的优化还在进行中～
 
 我并不需要通过打赏这种形式获得收入，因为在大环境下，拥有一份工作会比这性价比更高。但我希望我的用户跟我一样，是讲究“性价比”的🌚。
 
-……
+---
 
 回到技术上。
 
@@ -1487,3 +1487,31 @@ TaskItem 的优化还在进行中～
 
 很遗憾，Chromium 开发者工具的实测表明，TaskItem 改为 tsx setup 函数前后，性能几乎没有任何变化。唯一能看到的变化是，新版 TaskItem 的火焰图里看不到那些 dashboardCalc 之类的我自己写的函数了，时间都是花在 Vue 组件的更新上。
 几个小时前我主动看了一下知乎上关于 Vue 和 React 性能的争议，有人指出 Vue pub sub 机制的耗时不一定比 React diff 的耗时少。我持保留意见，毕竟我没读过这两家的源代码，但是我感官上依然认为 Vue 的执行速度要快多了，因为我做过的 React 项目至少有 2 个给我卡的感觉，而 Vue 项目，我指 FFBox，我从来没觉得卡过😏。
+
+## 2024-06-23
+
+不知不觉，又到了 6 月 23 日了。时光流逝得飞快呀，可是却似乎什么都没做……
+不久前才想起来快到 6 月 23 日了呢，就如同前两个星期那样，直到周四晚上才想起来下周一是端午。去年差不多也是这样啊，我想腾那么点时间出来，去我的大学探望一下我的同学们——那些今年毕业的、大三的，其中就包括了那个她。
+“那个她”早已离去。剩下的今年大四的同学们，其实认识得也没有多少。我要去见证他们的毕业典礼吗？似乎不用了。我似乎只是把高中代入了他们而已，却差点忘记大家（包括我）对这大学并不留恋，毕业典礼根本就不算什么事。
+所以啊，这事错过就错过了。“可惜”已经永远刻在历史里了。
+
+那今年呢？
+关于我的大学，已经不太会有更多延续的事情发生了。而我的高中，记忆早就已沉淀完成。6 月 23 日，是“毕业”日，是 onestop 分镜 7.5 日，是第五部的发布日，是消砖块视频的发布日和高数重考前一日，是 onestop 的发布日，是故日，是我离开大学的前一日，是 FFBox 3.0 的发布日。
+原来我或主动或被动地给这个日期赋予过这么多意义🙈。在 7 年间，仅有 2023 年的 6 月 23 日是空白的。
+这个日期早已并不具备什么现实意义了。但在这枯燥的生活中，还是多创造点意义吧。
+那么，虽然这不是我大四同学的毕业日，但是我祝你们，还有她，毕业快乐！
+
+---
+
+回到正题。我几天前就定好了 4.1 版本在这天发布。那 commit 的内容呢？按照我以往的惯例，一个 commit 会包含不少的更新。但这次我并没有想到还要做什么更新上去。接近发版日了，最坏情况就是更个版本号完事。
+
+结果突然就被我发现了 bug：本地模式转码完成后双击无法打开输出文件。
+那这就得看看是从什么时候这功能开始失效了。结果，我倒回 3.0 版本，发现也是不行的，代码也没变过。好家伙，这功能已经失效这么长时间了。
+问题出在了两个点上：第一点是主进程里打开文件用了 child_process.exec，而正确的方法应该是 shell.openPath。这个好改。第二点是打开文件的路径没对，当初加了“输出文件名”之后，并没有把相关的规则应用到 task.outputFile。
+越是早期写的代码，现在越难看懂。我这次要改的代码，连注释都不是特别能看懂，命名也是奇奇怪怪的，path、dir、name 都分不清。我大致是把这部分工作留到后期加多输入功能的时候做了吧。现在临发布，先勉强修好它。
+实测结果是，Windows 是 OK 的，但 mac 和 Linux 上改了照样不行。mac 上返回的错误信息是 `Failed to open path`，deepin 上就更牛逼了，开发模式下连窗口都打不开，Linux 生态我实在搞不来。那就不适配了。
+
+然后还修了个 TaskItem 刚创建时没有检测窗口宽度的问题。
+还加了个服务器与客户端版本不匹配提示。这种提示我想做成弹窗样式的，给它配个小蓝的图片。配什么图我都想好了，但是现在临近发布，先不做，下个版本再做。
+
+祝各位使用愉快！