# OPFS 持久化文件管理系统设计方案

## Summary
- 当前数据只存在 Vue 内存中，刷新会丢失。
- 新增浏览器端 OPFS 文件管理层，把设备数据和基本变量数据自动保存到浏览器私有文件系统中。
- 页面刷新后优先从 OPFS 读取；如果 OPFS 没有数据，再使用默认 JSON。

## Key Changes
- 新增 OPFS 存储工具：
  - 提供加载、保存、重置、导出、导入方法。
- 页面加载流程调整：
  - `created` 或 `mounted` 时异步读取 OPFS。
  - 如果 OPFS 有有效数据则直接加载。
  - 没有数据时使用默认 JSON，并写入 OPFS 作为初始文件。
- 自动保存策略：
  - 设备新增、编辑、删除后自动保存。
  - 变量新增、编辑、复制、删除后自动保存。
- 新增状态提示：
  - 顶部显示当前存储状态和最近保存时间。
- 增加文件管理按钮：
  - `导出配置JSON`
  - `导入配置JSON`
  - `恢复默认数据`

## Test Plan
- 新增设备后刷新页面，设备仍存在。
- 编辑设备后刷新页面，修改仍存在。
- 新增变量后刷新页面，变量仍存在。
- 删除变量后刷新页面，被删除变量不会恢复。
- 点击 `导出配置JSON` 能下载当前配置。
- 导入配置 JSON 后刷新页面，导入的数据仍存在。

## Assumptions
- OPFS 保存的是浏览器本地私有文件。
- 数据只需要本机浏览器持久化，不需要后端数据库。
- OPFS 不可用时可降级到 `localStorage`。