4.0 版本发布前准备（修正图标与 LICENSE 问题；更新 readme）

Author: ttqftech

electron-builder.json5

@@ -21,6 +21,7 @@
   ],
   "win": {
     "artifactName": "${productName}_${version}.${ext}",
+    "icon": "256.png",
     "target": [
       {
         "target": "dir",
@@ -40,6 +41,7 @@
   },
   "mac": {
     "artifactName": "${productName}_${version}.${ext}",
+    "icon": "512.png",
     "target": [
       {
         "target": "dmg",
@@ -54,6 +56,8 @@
     ],
   },
   "linux": {
+    "artifactName": "${productName}_${version}.${ext}",
+    "icon": "256.icns",
     "target": [
       {
         "target": "AppImage",
@@ -64,7 +68,6 @@
         "arch": ["x64"],
       },
     ],
-    "artifactName": "${productName}_${version}.${ext}",
     "extraFiles": [
       {
         "from": "app/backend/index",

package.json

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

readme.md

@@ -1,15 +1,68 @@
-# 您好！👋
+# FFBox 👋
 
-## ARE YOU OK ? 🙋
+一个多媒体转码百宝箱 / 一个 FFmpeg 的套壳  
 
-### I'm very happy to ...
+软件介绍请转到 [FFBox 官网](http://ffbox.ttqf.tech/)。
 
-    See you here!
+![软件截图](https://github.com/ttqftech/FFBox/assets/31009285/8659b34d-4aac-4caa-9ea3-dfdb81ce1f68)
 
-**不过 4.0 版本仍在开发中，各方面都在 under construction...**
+## 工程简介
 
-    我把默认分支切到 4.0+，是为了让 FFBox 看起来没有停更 _(:з」∠)_
+您现在看到的是 3.x 版本的 readme 文件。FFBox 在不同的大版本之间，使用的技术/框架存在区别。若需查阅版本对应的 readme，建议切换到对应分支。
 
-*您可以切到 3.0+ 分支阅览一年前就已经做完的 3.0 版的代码*
+- `1.x 版本`：经典的“html + css + js”前端三件套，没有工程化和模块化。
+- `2.x 版本`：使用 vue 2 进行工程化、模块化开发。主要控制逻辑集中在状态管理器上。
+- `3.x 版本`：更好的高聚低耦与工程结构，服务与 UI 分离，引入 TypeScript，支持远程控制。
+- `4.x 版本`：全新界面，使用更新、更多样的技术架构，自行编写开发与打包脚本，彻底分离前后端。
 
-***也可以到 `日志.md` 去看 4.0 版本的最新开发进度啦~ 🤣***
+## 准备自行编译
+
+由于这里不是前端课堂，此处当然不会有手把手的详细指南🌚。以下会列出一些需要的东西，您可自行了解：
+
+1. `Visual Studio Code`：这是本项目推荐使用的编辑器。本项目已为该编辑器进行了启动后端等相关任务的编写。
+2. `node.js`：它是一个 JavaScript 运行环境，主要用于项目的编译。建议使用 `nvm`，当项目运行不起来的时候可尝试使用它来切换一下 node.js 的版本。
+3. `pnpm`：它是本项目推荐使用的依赖管理器。
+4. `pnpm set registry ___` `pnpm set ELECTRON_MIRROR`：如果您无法正常下载依赖，请配置源。
+5. `Visual Studio 2022`：如果您要在 Windows 平台上编译 FFBoxHelper，那么这是必须的。
+
+## FFmpeg
+
+本项目并不自带 FFmpeg。如果您没有 FFmpeg，那么 FFBox 只能为您展示启动命令，不能进行转码工作。您需要在 [FFmpeg 下载页面](http://ffmpeg.org/download.html) 下载 FFmpeg 后，根据 FFBox 的指示，将其放入系统路径（推荐）或程序目录中。
+
+## 开发与打包流程
+
+```mermaid
+flowchart TB
+  subgraph DFmjs[dev-frontend.mjs]
+    IPE1[injectProcessEnv] --> CSR["createServer(renderer)"] --> watchPreload --> watchMain
+  end
+  subgraph BBmjs[build-backend.mjs]
+    IPE2[injectProcessEnv] --> BB1["buildBackend"]
+  end
+  subgraph BBmjs2[build-backend.mjs]
+    IPE3[injectProcessEnv] --> BB2["buildBackend"]
+  end
+  subgraph BFmjs[build-frontend.mjs]
+    IPE4[injectProcessEnv] --> buildMain --> buildPreload --> buildRenderer
+  end
+  subgraph VCLaunchB["vscode launch 编译调试后端 (vite)"]
+    VSTask["vscode task 启动"] --> BBmjs2
+  end
+  subgraph 生产前端["生产前端【npm run build:frontend】"]
+    BFmjs
+  end
+  subgraph 生产后端["生产后端【npm run build:backend】"]
+    BBmjs --> PB[pkg:backend]
+  end
+  subgraph 开发前端["开发前端【npm run dev:frontend】"]
+    DFmjs
+  end
+  subgraph 开发后端["开发后端【vscode F5】"]
+    VCLaunchB
+  end
+
+  注1[注意 Windows Helper 需要使用 VS 手动编译并放入项目根目录]
+  开发("开发") --> 开发后端 --> 开发前端
+  打包("打包") --> 生产后端 & 生产前端 --> pkg["npm run package"]
+  注1 --> 开发 & 打包[打包【npm run build:everything】]
+```

src/common/constants.ts

@@ -1,5 +1,5 @@
 export const version = (() => {
-    let ret = '4.0_gamma';
+    let ret = '4.0';
     if (!buildInfo) {
         ret += ' *'
     } else if (buildInfo.isDev) {

src/main/index.ts

@@ -316,10 +316,28 @@ class ElectronApp {
 
 		// 读取 LICENSE 文件
 		ipcMain.handle('readLicense', () => {
-			return new Promise((resolve) => {
-				fs.readFile('./LICENSE', { encoding: 'utf-8' }).then((data) => {
+			return new Promise(async (resolve) => {
+				let licensePath = '';
+				if (getOs() === 'Windows') {
+					licensePath = './LICENSE';
+				} else if (getOs() === 'MacOS') {
+					licensePath = path.join(process.resourcesPath, '../LICENSE');
+				} else if (getOs() === 'Linux') {
+					// this.mainWindow.webContents.send('debugMessage', 'service 路径', process.execPath, __dirname, __filename, process.cwd(), path.join(process.execPath, '../FFBoxService'));
+					await fs.access('./LICENSE', fs.constants.R_OK).then((result) => {
+						licensePath = './LICENSE'; // 通过终端直接执行
+					}).catch(() => {});
+					await fs.access(path.join(process.cwd(), 'LICENSE'), fs.constants.R_OK).then((result) => {
+						licensePath = path.join(process.cwd(), 'LICENSE'); // 无沙箱双击执行、通过终端直接执行
+					}).catch(() => {});	
+					await fs.access(path.join(process.execPath, '../LICENSE'), fs.constants.R_OK).then((result) => {
+						licensePath = path.join(process.execPath, '../LICENSE'); // AppImage 双击执行（/tmp 目录）、deb 安装后双击执行（/opt/FFBox/）
+					});
+				}		
+				fs.readFile(licensePath, { encoding: 'utf-8' }).then((data) => {
 					const cipherText = CryptoJS.SHA1(data);
-					if (cipherText.toString() === '4e994ccf17287387cf8bf155ad40f30ad5ca5f38') {
+					if (['c10a2191115c97595e0f0bbb4a127547c9ebb59e', '4e994ccf17287387cf8bf155ad40f30ad5ca5f38'].includes(cipherText.toString())) {
+						// 两个校验码，适配 LF 换行符和 CRLF 换行符
 						resolve(data);
 					} else {
 						resolve(undefined);

src/renderer/src/stores/appStore.ts

@@ -64,7 +64,7 @@ export const useAppStore = defineStore('app', {
 			showMenuCenter: 0,
 			showInfoCenter: false,
 			paraSelected: 1,
-			draggerPos: 0.6,
+			draggerPos: 0.57,
 			taskViewSettings: {
 				showParams: true,
 				showDashboard: true,

日志.md

@@ -1401,3 +1401,11 @@ Linux 适配，核心问题依然是两个：FFBoxService 和 ffmpeg 调用。
 另外，在开发过程中，也顺带修了个小 bug：FFBoxService 启动速度赶不上 renderer 启动速度，导致第一次登录显示失败。
 另外，在 deepin 开发环境下，无法正常启动渲染进程，会报错。这个错误后关闭程序的功能以后再去做了。
 另外也增加了文件大小 100MB 的上传限制，避免 CryptoJS 把页面搞崩。
+
+## 2024-04-01
+
+最后的几天，都在忙着做 FFBox 官网的页面啦～
+
+最后把三个平台的图标配置补充了一下（其中 deepin 的 Linux 不支持 png 图标，需要用 icns），另外发现了 Linux 和 macOS 上 LICENSE 读取不正常，修了一下，完事啦～
+
+祝大家使用愉快！