{"id":23916945,"url":"https://github.com/hughfenghen/opfs-finder","last_synced_at":"2026-06-12T22:32:14.876Z","repository":{"id":270574712,"uuid":"900218528","full_name":"hughfenghen/opfs-finder","owner":"hughfenghen","description":"使用 AI + OPFS 在浏览器中实现 MacOS Finder。Implement MacOS Finder in the browser using AI + OPFS.","archived":false,"fork":false,"pushed_at":"2025-01-08T02:28:50.000Z","size":564,"stargazers_count":68,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T19:43:38.656Z","etag":null,"topics":["ai","browser","filesystem","opfs","opfs-tools","web"],"latest_commit_sha":null,"homepage":"https://hughfenghen.github.io/opfs-finder/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hughfenghen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-08T07:24:28.000Z","updated_at":"2025-02-16T18:47:19.000Z","dependencies_parsed_at":"2025-01-01T14:29:59.990Z","dependency_job_id":null,"html_url":"https://github.com/hughfenghen/opfs-finder","commit_stats":null,"previous_names":["hughfenghen/opfs-finder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hughfenghen/opfs-finder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hughfenghen%2Fopfs-finder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hughfenghen%2Fopfs-finder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hughfenghen%2Fopfs-finder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hughfenghen%2Fopfs-finder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hughfenghen","download_url":"https://codeload.github.com/hughfenghen/opfs-finder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hughfenghen%2Fopfs-finder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34265491,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","browser","filesystem","opfs","opfs-tools","web"],"created_at":"2025-01-05T12:16:23.665Z","updated_at":"2026-06-12T22:32:12.846Z","avatar_url":"https://github.com/hughfenghen.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# opfs-finder\n\n中文 | [English](./README_US.md)\n\n使用 AI + OPFS 在浏览器中实现 MacOS Finder，未来也许会尝试在浏览器中模拟操作系统。\n\n![preview img](./preview.png)\n\n立即体验 \u003chttps://hughfenghen.github.io/opfs-finder\u003e\n\n## 作者碎碎念\n\n我在开发 [WebAV][1] 项目（用于在浏览器中处理音视频）时，处理较大的音视频文件必须依赖文件系统，不能像常规的 Web App 把数据全部加载到内存中；  \n为了配合 WebAV 处理音视频，封装且顺便开源了 [opfs-tools][2] 项目，用于方便文件操作。\n\n[OPFS][4] 相当于浏览器给每个网站开辟了一个私有的存储空间，Web 开发者借助这个 API 在私有空间中创建、读写文件，不需要用户授权且性能更好；  \n目前在各个浏览器中已得到较好的兼容性支持，详情可阅读[Web 文件系统（OPFS 及工具）介绍][3]。\n\n我非常高兴 Web 能开放出非常接近操作系统的文件 API，预测 OPFS API 在未来会有很大的应用潜力；  \n打算实现一个能展现 OPFS 能力的“产品”来加速该技术的普及，同时借该项目来完善 opfs-tools 的 API。\n\n偶然想到可以模仿每天使用的 Finder（MacOS 系统文件管理）APP，这样即使没有视觉设计师也能实现不错的视觉效果；  \n未来 Web 系统的 App 越来越复杂，越加深度依赖文件系统（OPFS），说不定该项目能成为第三方网站的文件管理器；  \n或实现打开/预览文本、音视频文件等功能，在浏览器中模拟真实的操作系统；  \n至于目前有什么用？谁知道、谁能想到你会在一个网页中放一些什么奇怪的文件呢[doge]？（该项目中的文件是由浏览器管理，用户文件系统中找不到，也不会上传）\n\n最开始对于是否开启本项目还是有点犹豫的，因为本项目主要工作是去实现“比较无聊”的页面交互逻辑；  \n想着逐渐火热的 AI 辅助编程，正好需要试试它成色几何，结果是相当地惊艳，**本项目 95% 的代码由 AI 实现**；  \n于是把项目启动阶段的重要提示语都放到了 [Prompts 文档](./prompts.md)，可作为 AI 辅助编程初学者参考；  \n对本项目或者 AI 辅助编程感兴趣的同学，可将 TODO List 作为练习题，鼓励使用 AI 来实现功能，测试功能后发起 PR。\n\n### 总结\n\n- [OPFS][4] 是浏览器中的文件系统 API，高性能且无需用户授权，[详见文章][3]\n- [opfs-tools][2] 是基于 OPFS 的开源项目，提供非常便捷、操作文件的 API\n- opfs-finder（本项目）模仿 Finder App，在浏览器中运行\n- 本项目动机\n  - 为了展现 OPFS 的能力，加速该技术的普及\n  - 为了完善 opfs-tools 的 API\n  - 为了学习、应用 AI 技术，辅助实现常见、无聊的功能，[Prompts 文档](./prompts.md)\n- 鼓励感兴趣的同学使用 AI 实现 TODO List 并发起 PR\n- 该项目的用途\n  - 成为未来复杂 Web 应用的文件管理器\n  - 在浏览器中模拟操作系统（如：文档编辑器，图片查看器，纯 Web 的本地视频播放器）\n\n## 运行项目\n\n1. clone 项目到本地\n2. 执行 `pnpm i`\n3. 执行 `pnpm dev`\n\n## TODO List\n\n### 样式\n\n- [ ] 文件大小移除小数点后的 0\n- [ ] 隐藏 . 开头的文件\n- [ ] 窗口设定最小宽度，避免文件列表折行\n\n### 功能\n\n- [ ] 文件夹添加颜色标签\n- [ ] 跨窗口拖动（移动）文件\n- [ ] 监听文件夹变化，动态更新列表\n- [ ] 挂载系统文件目录\n- [ ] 文件夹列表排序方式\n- [ ] 发布到 NPM，方便第三方使用\n- [ ] 打开文本文件、图片、音视频文件\n\n## 附录\n\n- [WebAV][1] 在浏览器中创建/编辑音视频文件\n- [opfs-tools][2] 便捷、高性能的 API 操作 OPFS 文件\n- [Web 文件系统（OPFS 及工具）介绍][3]\n- [OPFS(Origin private file system)][4] MDN 文档\n\n[1]: https://github.com/bilibili/WebAV\n[2]: https://github.com/hughfenghen/opfs-tools\n[3]: https://hughfenghen.github.io/posts/2024/03/14/web-storage-and-opfs/\n[4]: https://developer.mozilla.org/zh-CN/docs/Web/API/File_System_API/Origin_private_file_system\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhughfenghen%2Fopfs-finder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhughfenghen%2Fopfs-finder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhughfenghen%2Fopfs-finder/lists"}