代码初始化

2026-05-15 16:35:31 +08:00
commit b56c63e166
31 changed files with 12969 additions and 0 deletions
@@ -0,0 +1,57 @@
+# 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**。