115 lines
4.6 KiB
Markdown
115 lines
4.6 KiB
Markdown
|
# Huangzhijun's Reader — Web 版（MyReader-Web）
|
|||
|
|
|
|||
|
|
本工程是桌面版 **[MyReader](../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 组合键**（见下） |
|
|||
|
|
| 安装包 / 系统托盘 | ✅ | ❌ |
|
|||
|
|
|
|||
|
|
## 设计思路
|
|||
|
|
|
|||
|
|
1. **UI 与逻辑复用**
|
|||
|
|
自 `MyReader/src/renderer/src` 复制全部前端模块（`App.tsx`、`EditorPane`、`markdown.ts`、`PreviewArticle` 等），保证交互与桌面版一致。
|
|||
|
|
|
|||
|
|
2. **平台适配层**
|
|||
|
|
`src/platform/browserApi.ts` 实现与 Electron `preload` 相同的 `window.myreader` 接口；`src/platform/webVfs.ts` 用虚拟路径（如 `/项目名/笔记.md`）映射 `FileSystemDirectoryHandle` / `FileSystemFileHandle`。
|
|||
|
|
|
|||
|
|
3. **启动注入**
|
|||
|
|
`main.tsx` 在渲染前调用 `installBrowserApi()`，无需 Electron。
|
|||
|
|
|
|||
|
|
4. **安全与能力边界**
|
|||
|
|
浏览器无法任意访问磁盘；须用户通过「打开」「打开文件夹」授权。未授权路径无法读写。推荐使用 **Chrome / Edge 桌面版** 以获得完整文件夹 API。
|
|||
|
|
|
|||
|
|
## 环境要求
|
|||
|
|
|
|||
|
|
- **Node.js** ≥ 20.10
|
|||
|
|
- 现代浏览器（推荐 Chrome / Edge 最新版）
|
|||
|
|
|
|||
|
|
## 安装与运行
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd F:\coding\MyReader-Web
|
|||
|
|
npm install
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
开发服务器默认端口 **1234**。若被占用，Vite 会自动尝试下一可用端口，终端会打印实际地址（例如 `http://localhost:1235`）。
|
|||
|
|
|
|||
|
|
生产构建与本地预览：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
npm run preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`npm run preview` 同样优先使用 1234 端口（占用时自动递增）。
|
|||
|
|
|
|||
|
|
## 使用步骤
|
|||
|
|
|
|||
|
|
1. 执行 `npm run dev`，浏览器打开提示的本地地址。
|
|||
|
|
2. 点击 **「打开文件夹」**（侧栏）或工具栏 **「打开」** 选择 Markdown 文件。
|
|||
|
|
3. 使用 **「视图」** 或 `Ctrl+E` 在编辑 / 阅读 / 分栏间切换。
|
|||
|
|
4. 调整工具栏右侧 **行距、字体、背景**。
|
|||
|
|
5. **保存** / **另存为** 在已授权文件上写回磁盘；新文件通过保存对话框创建。
|
|||
|
|
6. 插入图片时使用工具栏；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`
|