diff --git a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx b/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx index e058b81..89c069b 100644 --- a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.jsx +++ b/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 [measureDistance, setMeasureDistance] = useState(10) // 测点距离 + const [lensDistance, setLensDistance] = useLocalStorage('lensDistance', 50) + const [measureDistance, setMeasureDistance] = useLocalStorage('measureDistance', 10) // 计算系数函数 const calculateCoefficient = (measureDist, lensDist) => { diff --git a/src/renderer/src/hooks/useLocalStorage.js b/src/renderer/src/hooks/useLocalStorage.js new file mode 100644 index 0000000..8f973c3 --- /dev/null +++ b/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