# 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`