From 881d5edcef19ed992351baf3643d62e04a79ca42 Mon Sep 17 00:00:00 2001
From: cles <208023732@qq.com>
Date: Fri, 5 Sep 2025 10:03:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E8=BF=9E=E6=8E=A5=E9=80=BB=E8=BE=91=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?IP=E5=9C=B0=E5=9D=80=E6=A0=BC=E5=BC=8F=E9=AA=8C=E8=AF=81?=
 =?UTF-8?q?=E5=92=8C=E8=AE=BE=E5=A4=87=E9=80=89=E6=8B=A9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  1 -
 .../MeasurementPointSetting.jsx               | 58 +++++++++++++------
 .../components/SiderHeader/SiderHeader.jsx    | 40 +++++++++----
 3 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 10166ef..61da68a 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
 
 > 基于 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)
 
diff --git a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx b/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx
index 3d9600d..9a76014 100644
--- a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx
+++ b/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx
@@ -10,7 +10,7 @@ import {
 } from '@ant-design/icons'
 import useRectangleStore from '../../stores/rectangleStore'
 import useDeviceStore from '../../stores/deviceStore'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import { IPC_EVENT } from '../../common/ipcEvents'
 
 function MeasurementPointSetting() {
@@ -25,10 +25,29 @@ function MeasurementPointSetting() {
   const [formData, setFormData] = useState({
     location: 1, // 测点位置
     description: '', // 测点描述
-    coefficient: 0, // 计算系数
     baseTarget: 'n' // 基准标靶
   })
 
+  // 系数计算相关状态
+  const [lensDistance, setLensDistance] = useState(50) // 镜头焦距
+  const [measureDistance, setMeasureDistance] = useState(10) // 测点距离
+
+  // 计算系数函数
+  const calculateCoefficient = (measureDist, lensDist) => {
+    if (!lensDist || lensDist <= 0) return 0
+    return Number(((measureDist / lensDist) * 2.24).toFixed(6))
+  }
+
+  // 处理镜头焦距变化
+  const handleLensDistanceChange = (value) => {
+    setLensDistance(value)
+  }
+
+  // 处理测点距离变化
+  const handleMeasureDistanceChange = (value) => {
+    setMeasureDistance(value)
+  }
+
   // 测点列表状态
   const [sensorList, setSensorList] = useState([])
 
@@ -39,6 +58,11 @@ function MeasurementPointSetting() {
   const [loadingSensors, setLoadingSensors] = useState(false)
   const [settingSensors, setSettingSensors] = useState(false)
 
+  // 使用useMemo计算系数，当镜头焦距或测点距离变化时自动重新计算
+  const calculatedCoefficient = useMemo(() => {
+    return calculateCoefficient(measureDistance, lensDistance)
+  }, [measureDistance, lensDistance])
+
   // 根据选中的传感器更新矩形数据
   const updateRectangleFromSensor = (sensorKey) => {
     if (!sensorKey) {
@@ -110,7 +134,7 @@ function MeasurementPointSetting() {
       children: [
         { key: `${newSensorKey}-1`, name: '测点位置', value: formData.location },
         { key: `${newSensorKey}-2`, name: '测点描述', value: formData.description },
-        { key: `${newSensorKey}-3`, name: '计算系数', value: formData.coefficient },
+        { key: `${newSensorKey}-3`, name: '计算系数', value: calculatedCoefficient },
         {
           key: `${newSensorKey}-4`,
           name: '基准标靶',
@@ -132,7 +156,6 @@ function MeasurementPointSetting() {
     setFormData((prev) => ({
       location: prev.location + 1, // 自动递增位置
       description: '',
-      coefficient: 0,
       baseTarget: 'n'
     }))
   }
@@ -416,10 +439,10 @@ function MeasurementPointSetting() {
           <span className={styles.label}>计算系数:</span>
           <InputNumber
             className={styles.numberInput}
-            value={formData.coefficient}
-            onChange={(value) => handleFormChange('coefficient', value)}
-            precision={4}
-            style={{ flex: 1 }}
+            value={calculatedCoefficient}
+            readOnly
+            precision={6}
+            style={{ flex: 1, backgroundColor: '#f5f5f5' }}
           />
         </Flex>
 
@@ -486,15 +509,15 @@ function MeasurementPointSetting() {
 
         <Flex className={styles.formRow}>
           <span className={styles.label}>镜头焦距:</span>
-          <Select
-            className={styles.select}
-            defaultValue="50"
+          <InputNumber
+            className={styles.numberInput}
+            value={lensDistance}
+            onChange={handleLensDistanceChange}
+            min={0.001}
+            precision={3}
             style={{ flex: 1 }}
-            options={[
-              { value: '50', label: '50' },
-              { value: '125', label: '125' },
-              { value: '200', label: '200' }
-            ]}
+            status={!lensDistance || lensDistance <= 0 ? 'error' : ''}
+            placeholder="请输入大于0的数值"
           />
         </Flex>
 
@@ -502,7 +525,8 @@ function MeasurementPointSetting() {
           <span className={styles.label}>测点距离:</span>
           <InputNumber
             className={styles.numberInput}
-            defaultValue={10}
+            value={measureDistance}
+            onChange={handleMeasureDistanceChange}
             precision={4}
             style={{ flex: 1 }}
           />
diff --git a/src/renderer/src/components/SiderHeader/SiderHeader.jsx b/src/renderer/src/components/SiderHeader/SiderHeader.jsx
index 589473a..88177e9 100644
--- a/src/renderer/src/components/SiderHeader/SiderHeader.jsx
+++ b/src/renderer/src/components/SiderHeader/SiderHeader.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import styles from './SiderHeader.module.css'
-import { Flex, Select, Button, Input, Spin, message } from 'antd'
+import { Flex, Button, Input, message, AutoComplete } from 'antd'
 import { IPC_EVENT } from '../../common/ipcEvents.js'
 import useDeviceStore from '../../stores/deviceStore'
 import {
@@ -98,15 +98,27 @@ function SiderHeader({ showSystemSettings = true }) {
 
   // 连接/断开设备
   const handleConnectOrDisconnect = () => {
+    console.log('点击连接，当前selectedDevice:', selectedDevice, '端口:', devicePort)
+
     if (connected) {
       // 已连接，断开
       window.electron.ipcRenderer.send(IPC_EVENT.DEVICE_DISCONNECT, { ip: connected })
     } else {
       // 未连接，连接
       if (!selectedDevice || !devicePort) {
-        message.error('请选择设备并填写端口')
+        message.error('请输入或选择设备IP地址并填写端口')
+        return
+      }
+
+      // IP格式验证
+      const ipPattern =
+        /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
+      if (!ipPattern.test(selectedDevice)) {
+        message.error('请输入有效的IP地址格式 (例如: 192.168.1.100)')
         return
       }
+
+      console.log('发送连接请求:', { ip: selectedDevice, port: devicePort })
       window.electron.ipcRenderer.send(IPC_EVENT.DEVICE_CONNECT, {
         ip: selectedDevice,
         port: devicePort
@@ -117,9 +129,6 @@ function SiderHeader({ showSystemSettings = true }) {
   // 除断开连接按钮外，其他UI是否禁用
   const uiDisabled = !!connected
 
-  // 调试信息
-  console.log('connected:', connected, 'uiDisabled:', uiDisabled)
-
   return (
     <Flex vertical>
       <Flex className={styles.header}>
@@ -131,21 +140,29 @@ function SiderHeader({ showSystemSettings = true }) {
           <Flex align="center">
             <VideoCameraFilled className={styles.icon} />
             <span className={styles.label}>设备列表:</span>
-            <Select
+            <AutoComplete
               className={styles.deviceSelect}
-              placeholder="请选择设备"
-              loading={searching}
+              placeholder="搜索设备或输入IP地址"
               value={selectedDevice}
               options={deviceList}
-              onChange={setSelectedDevice}
+              onChange={(value) => {
+                setSelectedDevice(value)
+              }}
+              onSelect={(value) => {
+                setSelectedDevice(value)
+              }}
               style={{ minWidth: 120, flex: 1 }}
-              notFoundContent={searching ? <Spin size="small" /> : '无设备'}
               disabled={searching || uiDisabled}
+              allowClear
+              filterOption={(inputValue, option) =>
+                option?.value?.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
+              }
             />
           </Flex>
+
           <Flex align="center">
-            <span className={styles.label}>设备端口:</span>
             <GoldFilled className={styles.icon} />
+            <span className={styles.label}>设备端口:</span>
             <Input
               className={styles.deviceInput}
               value={devicePort}
@@ -153,6 +170,7 @@ function SiderHeader({ showSystemSettings = true }) {
               disabled={uiDisabled}
             />
           </Flex>
+
           <Flex gap={8}>
             <Button
               className={styles.actionButton}