数据大屏：VueUse 的组合式 API
大屏适配场景：useWindowSize + useDebounce（核心）
这是最核心的组合，用于大屏自适应容器组件的窗口尺寸监听和防抖处理：
- **
useWindowSize**：替代了原生的window.addEventListener('resize', fn)，它能直接返回当前窗口的width和height响应式数据，不用自己手动维护状态。比如在自适应组件中，我直接通过const { width: windowWidth, height: windowHeight } = useWindowSize()就能获取实时窗口尺寸，省去了手动绑定 / 解绑事件的代码。 - **
useDebounce**：用于包装窗口 resize 的处理逻辑，实现防抖。比如把计算缩放比例的函数传入useDebounce，得到防抖后的函数，避免高频触发计算。
实时数据场景：useIntervalFn + useThrottle
大屏需要实时轮询获取数据（比如设备状态、报警信息），我用到了这两个 API：
useIntervalFn：替代了原生的setInterval和clearInterval，它内置了自动清理的逻辑（组件卸载时自动停止定时器），避免内存泄漏。比如轮询获取设备数据时，我用useIntervalFn(() => { getDeviceData() }, 5000)，不用在onUnmounted中手动清除定时器。useThrottle：用于处理图表的鼠标 hover 事件（比如地图 hover 显示详情），防止高频触发接口请求，设置节流间隔为 300ms，平衡交互响应和性能。
状态持久化场景：useLocalStorage + useSessionStorage
大屏的全局配置（比如是否开启自适应、图表自动刷新时间）需要持久化，我用到了这两个 API：
- **
useLocalStorage**：把 Pinia 中的全局配置状态和本地存储绑定，比如const autoRefresh = useLocalStorage('screen-auto-refresh', true)，这样页面刷新后配置不会丢失，比自己写localStorage.getItem/setItem更简洁，还能自动实现响应式。- **
useSessionStorage**：用于存储临时的用户操作状态（比如当前选中的区域），仅在当前会话有效，避免污染本地存储。
