58 lines
3.6 KiB
Markdown
58 lines
3.6 KiB
Markdown
# Huangzhijun's Reader
|
||
|
||
本地 Markdown 阅读与编辑（Electron + Vite + React + CodeMirror 6）。侧重「长文阅读体验」与「轻量编辑」：多标签、会话恢复、侧栏文件树与大纲、阅读/编辑/分栏三模式、外观与行距可调。
|
||
|
||
## 设计思路
|
||
|
||
1. **进程与数据**
|
||
主进程负责文件系统对话框、读写目录、路径解析与窗口生命周期；预加载脚本通过 `contextBridge` 暴露受限 API，渲染进程不开启 `nodeIntegration`，在隔离前提下使用本地文件能力。
|
||
|
||
2. **渲染与 Markdown**
|
||
使用 `markdown-it` + 插件（表格、Mermaid 围栏等）生成 HTML，再经 DOMPurify 白名单消毒后注入预览。相对路径图片在渲染阶段结合当前文件路径解析为 `file://` URL；开发环境下页面为 `http(s)` 源时，通过主窗口 **`webSecurity: false`** 允许从页面加载本地 `file://` 图片（典型 Electron 本地阅读器权衡）。
|
||
|
||
3. **阅读体验**
|
||
背景与字体通过 `html` 上的 `data-bg` / `data-font` 切换 CSS 变量，预览区单独使用 `--preview-bg`、`--font-preview` 等，与侧栏/工具栏解耦。阅读行距使用 `--preview-line-height`，与字体选择独立。Mermaid 图在源码中写入 `data-mermaid-src`，便于分栏宽度变化后恢复文本并重绘。
|
||
|
||
4. **分栏同步**
|
||
编辑器与预览共享文档字符串；预览 DOM 为块级元素打上源行号，用于大纲跳转与分栏滚动对齐。
|
||
|
||
5. **持久化**
|
||
标签内容与未保存状态、当前背景/字体等写入 `localStorage`（会话键 `myreader-session-v1`）；打开过的 Markdown 路径记入「历史」列表，与真实文件删除无关。
|
||
|
||
## 使用步骤（简述）
|
||
|
||
1. **安装依赖**：在项目根目录执行 `npm install`。
|
||
2. **开发运行**：`npm run dev`，在 Electron 窗口内使用。
|
||
3. **打开文档**：工具栏「打开」、侧栏「打开文件夹」后点击 `.md` 文件，或从历史记录点选。
|
||
4. **视图**：工具栏「视图」或使用 `Ctrl+E` 在 **编辑 / 阅读 / 分栏** 间切换。
|
||
5. **外观**：工具栏右侧 **阅读行距**、**字体**、**背景**（含「Kindle 纸感」等）按需调整。
|
||
6. **图片**：编辑模式下用工具栏插入本地图片；保存路径为 `file://` 或相对路径时，阅读/分栏预览会按上文规则解析显示。
|
||
7. **图表**：在 Markdown 中使用 ` ```mermaid ` 围栏编写 Mermaid 语法即可在预览中渲染。
|
||
8. **构建与打包**：`npm run build` 输出到 `out/`；`npm run dist` 构建并生成 Windows 安装包至 `release/`。
|
||
|
||
## 脚本
|
||
|
||
| 命令 | 说明 |
|
||
|------|------|
|
||
| `npm run dev` | 开发调试 |
|
||
| `npm run build` | 构建到 `out/` |
|
||
| `npm run typecheck` | TypeScript 检查 |
|
||
| `npm run dist` | 构建并打 Windows 安装包（`release/`） |
|
||
|
||
## 快捷键（与应用菜单一致）
|
||
|
||
- `Ctrl+O` 打开，`Ctrl+S` 保存，`Ctrl+Shift+S` 另存为
|
||
- `Ctrl+T` 新标签，`Ctrl+W` 关闭标签
|
||
- `Ctrl+Tab` / `Ctrl+Shift+Tab` 切换标签
|
||
- `Ctrl+E`：在 **编辑 / 阅读 / 分栏** 三种视图间循环切换
|
||
|
||
侧栏可隐藏、可拖动右边缘调整宽度；阅读模式下可拖动预览区右缘调整正文最大宽度。编辑、分栏模式下顶部有 **Markdown 格式工具栏**。侧栏文件列表 **右键**：重命名（文件/文件夹）、删除（仅文件）。
|
||
|
||
## 技术栈摘要
|
||
|
||
Electron 35、electron-vite、React 19、CodeMirror 6、markdown-it、highlight.js、DOMPurify、mermaid。
|
||
|
||
---
|
||
|
||
仓库 npm 包名仍为 `myreader`；安装后显示名与窗口标题为 **Huangzhijun's Reader**。
|