125 lines
6.8 KiB
Markdown
125 lines
6.8 KiB
Markdown
# Huangzhijun's Reader
|
||
|
||
本地 Markdown 阅读与编辑器（Electron + Vite + React + CodeMirror 6）。侧重「长文阅读体验」与「轻量编辑」：多标签、会话恢复、侧栏文件树与大纲、阅读/编辑/分栏三模式、外观与行距可调。
|
||
|
||
## 功能特性
|
||
|
||
### 核心功能
|
||
- **多标签编辑**：支持同时打开多个 Markdown 文件，标签页可拖拽排序
|
||
- **三种视图模式**：编辑 / 阅读 / 分栏（编辑+预览），一键切换
|
||
- **文件树浏览**：打开本地文件夹，侧栏展示目录结构，点击 `.md` / `.txt` 文件即可打开
|
||
- **会话恢复**：关闭应用后重新打开，自动恢复上次的标签页、视图模式、外观设置
|
||
- **文件历史**：记录最近打开过的 Markdown 文件路径，方便快速访问
|
||
|
||
### 编辑功能
|
||
- **Markdown 格式工具栏**：分组展示常用格式按钮（标题、格式、元素、列表、其他）
|
||
- **语法高亮**：编辑器内 Markdown 语法高亮，代码块语言高亮
|
||
- **图片插入**：支持插入本地图片，自动解析相对路径
|
||
- **表格编辑**：支持 Markdown 表格的快速插入与格式化
|
||
- **Mermaid 图表**：支持在 Markdown 中编写 Mermaid 语法，预览时自动渲染
|
||
|
||
### 阅读体验
|
||
- **多套背景主题**：提供多种阅读背景（含「Kindle 纸感」等），可自由切换
|
||
- **字体选择**：支持多种中文字体，阅读区与编辑区字体独立设置
|
||
- **行距调节**：阅读视图行距可精细调节（1.0–3.0）
|
||
- **预览宽度调节**：阅读模式下可拖动调整正文最大宽度
|
||
- **大纲导航**：自动解析文档标题层级，点击跳转到对应位置
|
||
|
||
### 新增功能（v0.2.0）
|
||
- **自动保存**：开启后，编辑内容在 3 秒无操作后自动保存到文件（仅对有文件路径的标签生效）
|
||
- **拖放打开**：支持从系统文件管理器拖放 `.md` / `.txt` 文件到编辑区直接打开
|
||
- **导出 HTML**：将当前 Markdown 文档导出为独立 HTML 文件，包含基本样式
|
||
- **文档内搜索**：`Ctrl+F` 打开搜索栏，支持在编辑/阅读/分栏三种模式下搜索文档内容
|
||
- **状态栏**：底部状态栏显示当前文档的行数、字符数（含/不含空白）、词数统计
|
||
- **拖放视觉反馈**：拖放文件到编辑区时显示虚线边框高亮
|
||
|
||
## 设计思路
|
||
|
||
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 路径记入「历史」列表，与真实文件删除无关。自动保存开关状态持久化到 `localStorage`。
|
||
|
||
## 使用步骤
|
||
|
||
1. **安装依赖**：在项目根目录执行 `npm install`。
|
||
2. **开发运行**：`npm run dev`，在 Electron 窗口内使用。
|
||
3. **打开文档**：
|
||
- 工具栏「打开」选择 `.md` 文件
|
||
- 侧栏「打开文件夹」后点击文件树中的 `.md` / `.txt` 文件
|
||
- 从历史记录点选
|
||
- **拖放** `.md` / `.txt` 文件到编辑区
|
||
4. **视图切换**：工具栏「视图」按钮或 `Ctrl+E` 在 **编辑 / 阅读 / 分栏** 间循环切换。
|
||
5. **外观调整**：工具栏右侧可调节阅读行距、字体、背景（含「Kindle 纸感」等）。
|
||
6. **图片插入**：编辑模式下用工具栏插入本地图片；保存路径为 `file://` 或相对路径时，预览会按规则解析显示。
|
||
7. **Mermaid 图表**：使用 ` ```mermaid ` 围栏编写 Mermaid 语法即可在预览中渲染。
|
||
8. **自动保存**：工具栏「自动保存：开/关」按钮或 `Ctrl+Shift+F` 切换自动保存。
|
||
9. **导出 HTML**：工具栏「导出 HTML」按钮或 `Ctrl+Shift+E` 导出当前文档。
|
||
10. **文档搜索**：`Ctrl+F` 打开搜索栏，输入关键词后按 `Enter` 或点击 `↓` 按钮查找。
|
||
11. **构建与打包**：`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+Shift+O` | 打开文件夹 |
|
||
| `Ctrl+Shift+R` | 刷新文件树 |
|
||
|
||
### 标签管理
|
||
| 快捷键 | 功能 |
|
||
|--------|------|
|
||
| `Ctrl+N` | 新建标签 |
|
||
| `Ctrl+W` | 关闭当前标签 |
|
||
| `Ctrl+Tab` | 切换到下一个标签 |
|
||
| `Ctrl+Shift+Tab` | 切换到上一个标签 |
|
||
| `Ctrl+1`–`9` | 切换到第 1–9 个标签 |
|
||
|
||
### 视图与面板
|
||
| 快捷键 | 功能 |
|
||
|--------|------|
|
||
| `Ctrl+E` | 循环切换视图模式（编辑/阅读/分栏） |
|
||
| `Ctrl+B` | 显示/隐藏侧栏 |
|
||
| `Ctrl+Shift+1` | 侧栏切换到文件树 |
|
||
| `Ctrl+Shift+2` | 侧栏切换到历史记录 |
|
||
| `Ctrl+Shift+3` | 侧栏切换到大纲 |
|
||
|
||
### 工具
|
||
| 快捷键 | 功能 |
|
||
|--------|------|
|
||
| `Ctrl+F` | 打开/关闭文档搜索 |
|
||
| `Ctrl+Shift+F` | 切换自动保存 |
|
||
| `Ctrl+Shift+E` | 导出为 HTML |
|
||
| `Esc` | 关闭搜索栏 |
|
||
|
||
侧栏可隐藏、可拖动右边缘调整宽度；阅读模式下可拖动预览区右缘调整正文最大宽度。编辑、分栏模式下顶部有 **Markdown 格式工具栏**（按功能分组）。侧栏文件列表 **右键**：重命名（文件/文件夹）、删除（仅文件）。
|
||
|
||
## 技术栈
|
||
|
||
Electron 35、electron-vite、React 19、CodeMirror 6、markdown-it、highlight.js、DOMPurify、mermaid。
|
||
|
||
---
|
||
|
||
仓库 npm 包名仍为 `myreader`；安装后显示名与窗口标题为 **Huangzhijun's Reader**。 |