MyReader/README.md

# 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**。