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。