feat: 添加 useLocalStorage 钩子以支持持久化状态管理

src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx

@@ -12,7 +12,7 @@ import useRectangleStore from '../../stores/rectangleStore'
 import useDeviceStore from '../../stores/deviceStore'
 import { useState, useMemo, useEffect, useCallback } from 'react'
 import { IPC_EVENT } from '../../common/ipcEvents'
-
+import useLocalStorage from '../../hooks/useLocalStorage'
 function MeasurementPointSetting() {
   // 从Zustand store获取矩形数据和设置方法
   const rectangleData = useRectangleStore((state) => state.rectangleData)
@@ -29,8 +29,8 @@ function MeasurementPointSetting() {
   })
 
   // 系数计算相关状态
-  const [lensDistance, setLensDistance] = useState(50) // 镜头焦距
+  const [lensDistance, setLensDistance] = useLocalStorage('lensDistance', 50)
-  const [measureDistance, setMeasureDistance] = useState(10) // 测点距离
+  const [measureDistance, setMeasureDistance] = useLocalStorage('measureDistance', 10)
 
   // 计算系数函数
   const calculateCoefficient = (measureDist, lensDist) => {

src/renderer/src/hooks/useLocalStorage.js

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * useLocalStorage hook
+ * @param {string} key localStorage key
+ * @param {any} initialValue 默认值
+ * @returns {[any, Function]} [value, setValue]
+ */
+function useLocalStorage(key, initialValue) {
+	// 读取 localStorage
+	const readValue = () => {
+		try {
+			const item = window.localStorage.getItem(key)
+			return item !== null ? JSON.parse(item) : initialValue
+		} catch {
+			return initialValue
+		}
+	}
+
+	const [storedValue, setStoredValue] = useState(readValue)
+
+	// 更新 localStorage
+	const setValue = (value) => {
+		try {
+			const valueToStore = value instanceof Function ? value(storedValue) : value
+			setStoredValue(valueToStore)
+			window.localStorage.setItem(key, JSON.stringify(valueToStore))
+		} catch {
+			setStoredValue(value)
+		}
+	}
+
+	// 监听 key 变化或外部 localStorage 变化
+	useEffect(() => {
+		setStoredValue(readValue())
+		// 监听 localStorage 变化（多标签页同步）
+		const handleStorage = (event) => {
+			if (event.key === key) {
+				setStoredValue(readValue())
+			}
+		}
+		window.addEventListener('storage', handleStorage)
+		return () => window.removeEventListener('storage', handleStorage)
+	}, [key])
+
+	return [storedValue, setValue]
+}
+
+export default useLocalStorage