Huangzhijun's Reader — Web 版（MyReader-Web）

本工程是桌面版 MyReader 的 1:1 功能 Web 移植，同一套 React 界面与 Markdown 能力，在浏览器中运行。桌面版基于 Electron，本工程基于 Vite + React，通过浏览器 File System Access API（及降级方案）替代 Electron 的本地文件 IPC。

与 MyReader 的对应关系

能力	MyReader (Electron)	MyReader-Web
多标签、脏标记、关闭前保存提示	✅	✅
编辑 / 阅读 / 分栏三视图	✅	✅
侧栏：文件树、历史、大纲	✅	✅
工具栏：打开/保存/另存为/新标签/视图切换	✅	✅
背景 23 种、字体 32 种、阅读行距	✅	✅
CodeMirror 编辑 + 格式工具栏	✅	✅
Markdown 预览、GFM 表格、代码高亮	✅	✅
Mermaid / 流程图	✅	✅
本地图片插入与预览	`file://`	`blob:`（浏览器）
会话恢复（localStorage）	✅	✅（路径需仍可访问）
原生菜单与快捷键	系统菜单	Ctrl 组合键（见下）
安装包 / 系统托盘	✅	❌

设计思路

UI 与逻辑复用
自 MyReader/src/renderer/src 复制全部前端模块（App.tsx、EditorPane、markdown.ts、PreviewArticle 等），保证交互与桌面版一致。
平台适配层
src/platform/browserApi.ts 实现与 Electron preload 相同的 window.myreader 接口；src/platform/webVfs.ts 用虚拟路径（如 /项目名/笔记.md）映射 FileSystemDirectoryHandle / FileSystemFileHandle。
启动注入
main.tsx 在渲染前调用 installBrowserApi()，无需 Electron。
安全与能力边界
浏览器无法任意访问磁盘；须用户通过「打开」「打开文件夹」授权。未授权路径无法读写。推荐使用 Chrome / Edge 桌面版 以获得完整文件夹 API。

环境要求

Node.js ≥ 20.10
现代浏览器（推荐 Chrome / Edge 最新版）

安装与运行

cd F:\coding\MyReader-Web
npm install
npm run dev

开发服务器默认端口 1234。若被占用，Vite 会自动尝试下一可用端口，终端会打印实际地址（例如 http://localhost:1235）。

生产构建与本地预览：

npm run build
npm run preview

npm run preview 同样优先使用 1234 端口（占用时自动递增）。

使用步骤

执行 npm run dev，浏览器打开提示的本地地址。
点击 「打开文件夹」（侧栏）或工具栏 「打开」 选择 Markdown 文件。
使用 「视图」 或 Ctrl+E 在编辑 / 阅读 / 分栏间切换。
调整工具栏右侧 行距、字体、背景。
保存 / 另存为 在已授权文件上写回磁盘；新文件通过保存对话框创建。
插入图片时使用工具栏；Web 版以 blob URL 嵌入，请与 .md 同目录保存图片或改用相对路径 + 已打开文件夹。

快捷键（Web）

快捷键	功能
Ctrl+O	打开文件
Ctrl+S	保存
Ctrl+Shift+S	另存为
Ctrl+T	新标签
Ctrl+W	关闭标签
Ctrl+E	切换视图模式
Ctrl+Tab	下一标签
Ctrl+Shift+Tab	上一标签

项目结构

MyReader-Web/
├── index.html
├── vite.config.ts          # 端口 1234（可自动换端口）
├── package.json
├── public/
└── src/
    ├── App.tsx             # 主界面（与 MyReader 同源）
    ├── platform/
    │   ├── browserApi.ts   # window.myreader 浏览器实现
    │   └── webVfs.ts       # 虚拟路径 + 文件句柄
    ├── types/ipc-types.ts
    └── …                   # 其余与 MyReader 渲染层一致

已知差异（相对桌面版）

无系统菜单栏；依赖页面内按钮与上表快捷键。
关闭浏览器标签时，若有未保存内容，使用 beforeunload 提示（行为因浏览器而异）。
会话恢复中的路径若文件夹未再次授权，可能无法自动重新打开。
Safari / Firefox 对 showDirectoryPicker 支持有限，文件夹浏览可能不可用。
内链打开本地非 Markdown 文件、任意 file:// 图片等仍受浏览器安全策略限制。

维护说明

桌面版功能更新后，可将 MyReader/src/renderer/src 下同名文件同步复制到本工程 src/，并检查是否新增 window.myreader 接口——若有，须在 platform/browserApi.ts 中一并实现。

显示名称：Huangzhijun's Reader (Web)
同源项目：F:\coding\MyReader

4.6 KiB Raw Permalink Blame History Unescape Escape