要实现“原始工程保存”，需用 native file system api 直接读写本地磁盘目录：先检测并启用 file system access api，再通过 showdirectorypicker 获取目录句柄并持久化权限，接着构建本地文件树，最后编辑时直接写回原文件。
要通过 Native File System API 构建支持“原始工程保存”的前端编辑器，关键不是把文件存到服务器，而是让编辑器直接读写用户本地磁盘上的真实目录结构——就像 VS Code 那样打开一个文件夹、编辑、保存即生效，无需导出/上传/同步等中间步骤。
启用并校验 File System Access API 支持
该 API 目前仅在 Chromium 内核浏览器（Chrome 86+、Edge 86+、新版 Opera）中稳定可用，且需 HTTPS 或 localhost 环境。使用前应做运行时检测：
- 检查
window.showDirectoryPicker是否存在，不存在则降级提示或禁用工程模式 - 避免在非安全上下文（如 HTTP 页面）中调用，否则会静默失败
- 首次调用需由用户手势触发（如点击按钮），不能在页面加载时自动执行
选择并持久化工程根目录
用户点击“打开文件夹”后，调用 showDirectoryPicker() 获取 FileSystemDirectoryHandle，这是后续所有操作的入口。建议立即保存该句柄到 localStorage（需配合 self.indexedDB 或 Permissions API 持久化权限）：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 调用
directoryHandle.requestPermission({mode: 'readwrite'})显式申请读写权限 - 将 handle 存入 IndexedDB（因 localStorage 只能存字符串，而 handle 不可序列化）
- 下次启动时尝试用
navigator.permissions.query({name: 'storage-access'})和已存句柄恢复访问，避免重复弹窗
构建可交互的本地文件树
拿到目录句柄后，递归遍历子项生成虚拟文件树。注意两点实际约束：
- 不支持跨目录跳转（如
../），所有路径必须从根 handle 向下遍历 - 遍历时需过滤系统隐藏文件（如
.git、.DS_Store），但保留.vscode等配置目录供编辑器识别 - 为每个
FileSystemFileHandle缓存其getFile()结果（含内容与最后修改时间），避免频繁读取影响响应速度
实现真正的“所见即所得”编辑与保存
编辑器内容变更后，保存动作应直接写回原文件，而非生成新副本：
- 对文本文件：用
fileHandle.createWritable()获取FileSystemWritableFileStream，调用write()+close() - 支持 UTF-8 编码写入，注意处理 BOM；二进制文件（如图片）需用
ArrayBuffer流式写入 - 保存成功后，主动触发
fileHandle.getFile()更新缓存，并广播文件变更事件（用于更新编辑器标签页状态、脏标记等） - 若用户修改了未保存文件又切换到其他文件，需拦截导航并提示“文件尚未保存”
不复杂但容易忽略：整个流程不依赖后端存储，也不需要打包或导出操作。用户关掉浏览器再打开，只要权限未被撤销，就能继续在同一个本地路径上编辑、保存、新建文件——这才是真正意义上的“原始工程保存”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
