diff --git a/README.md b/README.md index 87d9606..10166ef 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,342 @@ -# 有源标靶上位机软件 +# FlexometerSetup -## 快速开始 +> 基于 Electron + React + Vite 开发的传感器监测应用程序 -### 安装 +![License](https://img.shields.io/badge/license-MIT-blue.svg) +![Platform](https://img.shields.io/badge/platform-Windows%20%7C%20macOS%20%7C%20Linux-lightgrey.svg) +![Version](https://img.shields.io/badge/version-1.0.0-green.svg) -1. 克隆仓库 +--- + +## 📖 目录 + +- [用户指南](#用户指南) +- [开发者文档](#开发者文档) + +--- + +## 👥 用户指南 + +### 系统要求 + +- **操作系统**: Windows 10/11, macOS 10.15+, Ubuntu 18.04+ +- **内存**: 4GB RAM 以上 +- **存储空间**: 200MB 可用空间 + +### 安装方法 + +1. 从 [Releases](../../releases) 页面下载最新版本的安装包 +2. 运行安装程序，按照向导完成安装 +3. 安装完成后，从桌面快捷方式或开始菜单启动应用 + +### 主要功能 + +#### 🔍 设备管理 + +- **设备搜索**: 自动扫描局域网内的传感器设备 +- **设备连接**: 支持 TCP 连接，实时监控设备状态 +- **设备断开**: 安全断开设备连接 + +#### 📊 数据监控 + +- **实时数据显示**: 支持多传感器同时监控 +- **数据可视化**: Chart.js 图表展示传感器数据趋势 +- **历史数据**: 保存最近 10 个数据点的历史记录 + +#### ⚙️ 系统设置 + +- **基本参数配置**: + - 图像发送时间间隔 + - 零点计数设置 + - 数据帧率调节 + - 阈值参数配置 +- **系统功能**: + - 系统清零使能 + - 图像发送控制（开始/停止） +- **存储设置**: 自定义数据存储路径 + +#### 🔧 测量点管理 + +- **传感器配置**: 实时加载和设置传感器参数 +- **数据覆盖更新**: 每次加载时更新传感器列表 +- **状态监控**: 实时显示设备连接状态 + +### 使用说明 + +1. **首次使用** + - 启动应用后，点击"搜索设备"发现网络中的传感器 + - 选择目标设备，点击"连接"建立通信 + +2. **数据监控** + - 连接成功后，在"挠度采集"页面可查看实时数据 + - 数据会自动更新，支持多传感器同时显示 + +3. **参数配置** + - 在"系统设置"页面可调整各项参数 + - 修改参数后点击"设置"按钮保存 + +4. **数据存储** + - 应用会自动记录实时数据和报警数据 + - 可在存储设置中自定义保存路径 + +### 故障排除 + +**设备连接失败** + +- 检查设备和计算机是否在同一网络 +- 确认设备 IP 地址和端口号正确 +- 重启应用和设备后重试 + +**数据显示异常** + +- 检查设备连接状态 +- 确认传感器配置是否正确 +- 查看日志文件排查问题 + +**应用崩溃或无响应** + +- 重启应用 +- 检查系统资源使用情况 +- 联系技术支持 + +### 技术支持 + +- **作者**: cles +- **主页**: [https://blog.clesbit.top](https://blog.clesbit.top) +- **邮箱**: 208023732@qq.com +- **问题反馈**: 请在项目仓库提交 Issue + +--- + +## 🛠️ 开发者文档 + +### 技术栈 + +- **前端框架**: React 18 +- **构建工具**: Vite +- **桌面框架**: Electron +- **状态管理**: Zustand +- **UI 框架**: Ant Design +- **图表库**: Chart.js +- **样式**: CSS Modules +- **打包工具**: electron-builder + +### 项目结构 -```bash -git clone https://gitea.anxinyun.cn/qinjian/FlexometerSetup.git ``` +electron-app/ +├── build/ # 构建资源（图标等） +├── src/ +│ ├── main/ # 主进程代码 +│ │ ├── index.js # 主进程入口 +│ │ └── ipcRouter.js # IPC 路由处理 +│ ├── preload/ # 预加载脚本 +│ │ └── index.js +│ └── renderer/ # 渲染进程代码 +│ ├── index.html # HTML 模板 +│ └── src/ +│ ├── App.jsx # 应用主组件 +│ ├── main.jsx # 渲染进程入口 +│ ├── components/ # React 组件 +│ ├── stores/ # Zustand 状态管理 +│ └── common/ # 公共模块 +├── dist/ # 构建输出目录 +├── electron-builder.yml # 打包配置 +├── electron.vite.config.mjs # Vite 配置 +└── package.json +``` + +### 开发环境搭建 + +#### 环境要求 -2. 安装依赖 +- Node.js 16.0+ +- npm 或 yarn + +#### 安装依赖 ```bash -cd FlexometerSetup +# 克隆项目 +git clone +cd electron-app + +# 安装依赖 npm install ``` -3. 开发 +#### 开发命令 ```bash +# 启动开发服务器 npm run dev + +# 代码格式化 +npm run format + +# 代码检查 +npm run lint + +# 构建项目 +npm run build + +# 打包为可执行文件（不生成安装包） +npm run build:unpack + +# 打包为 Windows 安装包 +npm run build:win + +# 打包为 macOS 安装包 +npm run build:mac + +# 打包为 Linux 安装包 +npm run build:linux ``` -4. 打包应用 +### 核心模块说明 + +#### IPC 通信 (`ipcRouter.js`) + +负责主进程与渲染进程之间的通信，包括： + +- 设备搜索和连接管理 +- TCP 数据传输处理 +- 传感器参数配置 +- 系统功能控制 + +主要事件类型： + +```javascript +// 设备管理 +DEVICE_SEARCH // 设备搜索 +DEVICE_CONNECT // 设备连接 +DEVICE_DISCONNECT // 设备断开 + +// 数据传输 +RESULT_REPLY // 传感器数据 +IMAGE_REPLY // 图像数据 + +// 参数配置 +SENSORS_GET / SET // 传感器配置 +IMAGE_SEND_TIME_GET / SET // 图像发送间隔 +// ... 其他参数 +``` + +#### 状态管理 (`stores/`) + +使用 Zustand 管理全局状态： + +- `deviceStore.js`: 设备连接状态 +- `rectangleStore.js`: 矩形选择状态 + +#### UI 组件 (`components/`) + +主要组件模块： + +- `DeflectionCollection/`: 挠度数据采集和可视化 +- `ImageCollection/`: 图像采集显示 +- `MeasurementPointSetting/`: 测量点配置 +- `SystemSettings/`: 系统参数设置 +- `SiderHeader/`: 侧边栏头部 + +### 日志系统 + +使用 `electron-log` 记录应用日志： + +- **开发环境**: 日志保存在项目根目录 `logs/main.log` +- **生产环境**: 日志保存在用户数据目录 +- **日志内容**: IPC 命令、TCP 响应、错误信息等 + +### 网络通信 + +#### UDP 设备发现 + +- 端口: 2230 +- 广播地址: 255.255.255.255 +- 超时: 1s [1s内如果有设备继续响应则重置超时计时器] + +#### TCP 数据传输 + +- 默认端口: 2233 +- 协议: JSON over TCP +- 消息格式: `{"command": "xxx", "type": "xxx", "values": "xxx"}\n\n` + +### 构建和部署 + +#### 图标配置 + +将图标文件放入 `build/` 目录： + +- Windows: `icon.ico` (256x256, 多分辨率) +- macOS: `icon.icns` +- Linux: `icon.png` (512x512) + +#### 打包配置 + +主要配置在 `electron-builder.yml`： + +```yaml +appId: com.freesun.app +productName: FlexometerSetup +directories: + buildResources: build + +win: + executableName: FlexometerSetup + +nsis: + oneClick: false # 启用安装向导 + allowToChangeInstallationDirectory: true # 允许选择安装路径 + createDesktopShortcut: always # 创建桌面快捷方式 +``` + +#### 发布流程 + +1. **本地构建测试** + + ```bash + npm run build:win + ``` + +2. **创建 Release** + - 在代码仓库创建新的 Release + - 上传生成的 `setup.exe` 安装包 + - 添加版本说明和更新日志 + +### 开发规范 + +#### 代码风格 + +- 使用 Prettier 格式化代码 +- 使用 ESLint 进行代码检查 +- 组件文件使用 PascalCase 命名 +- 样式文件使用 CSS Modules + +#### 提交规范 + +使用语义化提交信息： -```bash -npm run build:目标平台 -# 目标平台可选：win32, linux, mac详见 package.json ``` +feat: 添加新功能 +fix: 修复问题 +docs: 更新文档 +style: 代码格式调整 +refactor: 代码重构 +test: 添加测试 +chore: 构建或工具相关 +``` + +#### 分支管理 + +- `main`: 主分支，用于发布 +- `develop`: 开发分支 +- `feature/*`: 功能分支 +- `hotfix/*`: 热修复分支 + +### 贡献指南 + +1. Fork 项目仓库 +2. 创建功能分支 (`git checkout -b feature/amazing-feature`) +3. 提交更改 (`git commit -m 'feat: add amazing feature'`) +4. 推送到分支 (`git push origin feature/amazing-feature`) +5. 创建 Pull Request + diff --git a/build/icon.ico b/build/icon.ico index 72c391e..9e95508 100644 Binary files a/build/icon.ico and b/build/icon.ico differ diff --git a/build/icon.png b/build/icon.png index 5cd6c18..26add1e 100644 Binary files a/build/icon.png and b/build/icon.png differ diff --git a/electron-builder.yml b/electron-builder.yml index d453588..a663218 100644 --- a/electron-builder.yml +++ b/electron-builder.yml @@ -1,5 +1,5 @@ -appId: com.electron.app -productName: electron-app +appId: com.freesun.app +productName: FlexometerSetup directories: buildResources: build files: @@ -11,8 +11,10 @@ files: asarUnpack: - resources/** win: - executableName: electron-app + executableName: FlexometerSetup nsis: + oneClick: false + allowToChangeInstallationDirectory: true artifactName: ${name}-${version}-setup.${ext} shortcutName: ${productName} uninstallDisplayName: ${productName} diff --git a/resources/icon.png b/resources/icon.png index 5cd6c18..26add1e 100644 Binary files a/resources/icon.png and b/resources/icon.png differ diff --git a/src/main/index.js b/src/main/index.js index 75aa1bd..d186eaf 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -40,7 +40,7 @@ function createWindow() { app.whenReady().then(() => { log.info('Electron 应用已启动') - electronApp.setAppUserModelId('com.electron') + electronApp.setAppUserModelId('com.freesun') app.on('browser-window-created', (_, window) => { optimizer.watchWindowShortcuts(window)