feat: 添加本地开发支持，更新配置和文档

README.md

@@ -4,9 +4,34 @@
 
 - 请确保在开发环境中，`server/tcpProxy/index.js` 文件中的 `TCP_HOST` 设置为下位机的实际 IP 地址
 - 提交代码前，请将 `TCP_HOST` 设置回去
-- 确保在生产环境中，`client\src\sections\wuyuanbiaoba\components\CameraView.jsx`,摄像头流的 streamUrl 指向正确的地址
+- 确保在生产环境中，[摄像头流地址](./client/src/sections/wuyuanbiaoba/components/CameraView.jsx),摄像头流的 streamUrl 指向正确的地址
 - 提交代码前，请将 `streamUrl` 设置回去
 
+## 本地开发
+
+### 启动开发服务器
+
+```bash
+# 普通开发模式
+npm start
+
+# 本地开发模式（使用 localdev 环境标识）
+npm run start:dev
+
+# 自定义端口启动（默认端口为 5000）
+npm start -- --port 3000
+```
+
+### 环境配置
+
+项目使用 `config.cjs` 进行配置，支持以下环境变量：
+
+- `NODE_ENV`: 运行环境（development | production）
+- `PORT`: 服务端口（默认 5000）
+- `API`: API 代理目标地址
+
+本地开发模式（`npm run start:dev`）会自动设置 `FS_FLAG=localdev` 环境变量。
+
 ## 部署说明
 
 ### 部署步骤
@@ -14,8 +39,6 @@
 **特别注意**
 确保下位机已经安装了 nodejs 环境,并且版本在 20 以上(推荐v20.19.3)，注意，nodejs 环境必须是 root 用户可用的，服务自启动需要 systemd 的操作权限。
 
-
-
 1. 从项目的 [release](https://gitea.anxinyun.cn/qinjian/wuyuanbiaoba_web/releases) 页面下载最新的打包文件,如 `wuyuanbiaoba-web-x.x.x.tar.gz`
 2. 上传到服务器的临时目录,如 `~/deploy/`(这里最好建立一个新的目录存放压缩文件)
 3. 进入该目录,解压文件 `tar -xzf wuyuanbiaoba-web-x.x.x.tar.gz`
@@ -25,8 +48,23 @@
 7. 部署完成后,可以通过 `sudo systemctl status wuyuanbiaoba-web.service` 查看服务状态
 8. 查看日志 `journalctl -u wuyuanbiaoba-web.service -f`
 
-
 ### 离线版本说明
+
 针对设备无法联网的情况，提供离线安装包，离线安装包包含了所有的依赖包，无需联网即可完成安装。
+
 **！！！！注意，依然需要nodejs环境**
+
 离线安装包的部署步骤与在线版本相同，只需下载离线安装包 `wuyuanbiaoba-web-x.x.x-offline.tar.gz` 即可。
+
+## 构建打包
+
+```bash
+# 构建生产版本
+npm run build
+
+# 打包在线版本
+npm run pack
+
+# 打包离线版本
+npm run pack:offline
+```

client/src/sections/wuyuanbiaoba/components/CameraView.jsx

@@ -54,10 +54,12 @@ const CameraView = ({
    const maxScale = 4.0;
    const scaleStep = 0.1;
    const maxRectangles = 5;
-
+   let streamUrl = `http://${window.location.hostname}:2240/video_flow`;
    // 摄像头流地址
-   const streamUrl = `http://${window.location.hostname}:2240/video_flow`; // 生产用
-   // const streamUrl = `http://10.8.30.179:2240/video_flow`; //开发用
+   if (window.env && window.env.FS_FLAG === "localdev") {
+      streamUrl = `http://10.8.30.179:2240/video_flow`; //开发用
+   }
+   console.log(streamUrl,'测试')
 
    // 应用变换
    const applyTransform = () => {
@@ -289,7 +291,9 @@ const CameraView = ({
 
       const videoRect = screenToVideoCoordinates(x, y, w, h);
       if (videoRect && rectangles.length < maxRectangles) {
-         const nextIndex = Number(rectangles[rectangles.length - 1]?.id) ? Number(rectangles[rectangles.length - 1]?.id)-100+1 : 1;
+         const nextIndex = Number(rectangles[rectangles.length - 1]?.id)
+            ? Number(rectangles[rectangles.length - 1]?.id) - 100 + 1
+            : 1;
          const fixedId = `10${nextIndex}`;
          // 根据选中的模板预设参数
          const templateParams = selectedTemplate
@@ -298,8 +302,7 @@ const CameraView = ({
                  name: `T_${nextIndex}` || selectedTemplate.name,
                  radius: selectedTemplate.physicalRadius || 40.0,
                  isReferencePoint: selectedTemplate.isBaseline || false,
-                 gradientThreshold:
-                    selectedTemplate.gradientThresholdValue,
+                 gradientThreshold: selectedTemplate.gradientThresholdValue,
                  anchorThreshold: selectedTemplate.anchorThresholdValue,
                  gaussianBlurThreshold: selectedTemplate.gaussianBlur || 3,
                  binaryThreshold: selectedTemplate.binaryThreshold || 120,

config.cjs

@@ -1,5 +1,8 @@
 const path = require('path')
-
+const flag = process.env.npm_lifecycle_script.includes('--mode localdev') ? 'localdev' : null;
+if (flag) {
+   process.env.FS_FLAG = flag;
+}
 module.exports = {
    env: process.env.NODE_ENV || 'development',  // 运行环境 development | production
    port: process.env.PORT || 5000, // 服务端口
@@ -8,6 +11,7 @@ module.exports = {
    scripts: [// 需引入的静态脚本文件
       '/client/assets/script/peace.js'
    ],
+   flag: flag, // 自定义环境标识
    proxy: [{ // 代理配置
       path: '/_api',
       target: process.env.API,

package.json

@@ -5,6 +5,7 @@
    "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "start": "peace-rc start",
+      "start:dev": "peace-rc start --mode localdev",
       "build": "peace-rc build",
       "pack": "rm -rf build && rm -f *.tar.gz && bash script/package-app.sh",
       "pack:offline":"bash script/pack-remote.sh"

server/tcpProxy/index.js

@@ -1,12 +1,14 @@
 const net = require('net');
 const WebSocket = require('ws');
 // TCP代理配置
-const TCP_HOST = '127.0.0.1'; // 因为下位机和上位机在同一台机器上，所以使用localhost
-// const TCP_HOST = '10.8.30.179'; //开发环境配置，开发时请解开这行注释，并且与下位机开发人员确认IP地址，提交代码别忘记注释掉
+let TCP_HOST = '127.0.0.1'; // 因为下位机和上位机在同一台机器上，所以使用localhost
 const TCP_PORT = 2230;
-
 // 创建独立的WebSocket服务器用于TCP代理
 function setupTcpProxy(conf) {
+   if(conf && conf.flag === 'localdev') {
+      TCP_HOST = '10.8.30.179' //本地开发配置
+   }
+   console.log(`TCP代理目标地址: ${TCP_HOST}:${TCP_PORT}`);
    // 从配置中获取端口，如果没有则使用默认端口
    const wsPort = (conf && conf.port) ? Number(conf.port) + 1 : 5001; // WebSocket端口比HTTP端口大1