37 lines
1.5 KiB
Markdown
37 lines
1.5 KiB
Markdown
# 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`。
|