Excelbuilder/Agents/OPFS-持久化文件管理系统设计方案.md

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。