Huangzhijun's Reader

本地 Markdown 阅读与编辑（Electron + Vite + React + CodeMirror 6）。侧重「长文阅读体验」与「轻量编辑」：多标签、会话恢复、侧栏文件树与大纲、阅读/编辑/分栏三模式、外观与行距可调。

设计思路

进程与数据
主进程负责文件系统对话框、读写目录、路径解析与窗口生命周期；预加载脚本通过 contextBridge 暴露受限 API，渲染进程不开启 nodeIntegration，在隔离前提下使用本地文件能力。
渲染与 Markdown
使用 markdown-it + 插件（表格、Mermaid 围栏等）生成 HTML，再经 DOMPurify 白名单消毒后注入预览。相对路径图片在渲染阶段结合当前文件路径解析为 file:// URL；开发环境下页面为 http(s) 源时，通过主窗口 webSecurity: false 允许从页面加载本地 file:// 图片（典型 Electron 本地阅读器权衡）。
阅读体验
背景与字体通过 html 上的 data-bg / data-font 切换 CSS 变量，预览区单独使用 --preview-bg、--font-preview 等，与侧栏/工具栏解耦。阅读行距使用 --preview-line-height，与字体选择独立。Mermaid 图在源码中写入 data-mermaid-src，便于分栏宽度变化后恢复文本并重绘。
分栏同步
编辑器与预览共享文档字符串；预览 DOM 为块级元素打上源行号，用于大纲跳转与分栏滚动对齐。
持久化
标签内容与未保存状态、当前背景/字体等写入 localStorage（会话键 myreader-session-v1）；打开过的 Markdown 路径记入「历史」列表，与真实文件删除无关。

安装依赖：在项目根目录执行 npm install。
开发运行：npm run dev，在 Electron 窗口内使用。
打开文档：工具栏「打开」、侧栏「打开文件夹」后点击 .md 文件，或从历史记录点选。
视图：工具栏「视图」或使用 Ctrl+E 在 编辑 / 阅读 / 分栏 间切换。
外观：工具栏右侧 阅读行距、字体、背景（含「Kindle 纸感」等）按需调整。
图片：编辑模式下用工具栏插入本地图片；保存路径为 file:// 或相对路径时，阅读/分栏预览会按上文规则解析显示。
图表：在 Markdown 中使用 ```mermaid 围栏编写 Mermaid 语法即可在预览中渲染。
构建与打包：npm run build 输出到 out/；npm run dist 构建并生成 Windows 安装包至 release/。

侧栏可隐藏、可拖动右边缘调整宽度；阅读模式下可拖动预览区右缘调整正文最大宽度。编辑、分栏模式下顶部有 Markdown 格式工具栏。侧栏文件列表右键：重命名（文件/文件夹）、删除（仅文件）。

Electron 35、electron-vite、React 19、CodeMirror 6、markdown-it、highlight.js、DOMPurify、mermaid。

仓库 npm 包名仍为 myreader；安装后显示名与窗口标题为 Huangzhijun's Reader。