diff --git a/DESIGN.md b/DESIGN.md index 1f3fb32..41a6a49 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -2,7 +2,7 @@ ## 1. 项目概述 -MarkLite 是一款轻量级的 Windows 本地 Markdown 阅读器桌面应用程序。基于 Electron 框架构建，提供简洁现代的用户界面，支持 Markdown 文件的打开、编辑和实时预览。支持亮色/暗色主题切换。 +MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程序。基于 Electron 框架构建，提供简洁现代的用户界面，支持多标签页、Markdown 文件的打开、编辑和实时预览，支持亮色/暗色主题切换。 ## 2. 技术架构 @@ -36,6 +36,7 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 阅读器桌面应用程 │ ┌──────────────▼──────────────────────────┐ │ Renderer Process (renderer/) │ +│ - 多标签页管理 │ │ - UI 渲染（亮色/暗色主题） │ │ - Markdown 编辑与预览 │ │ - 拖拽文件处理 │ @@ -55,39 +56,48 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 阅读器桌面应用程 ### 3.1 核心功能 -1. **文件打开** +1. **多标签页** + - Ctrl+T 新建空白标签 + - Ctrl+W 关闭当前标签（未保存时确认） + - Ctrl+Tab / Ctrl+Shift+Tab 切换标签 + - 点击标签切换，hover 显示关闭按钮 + - 同一文件不会重复打开（自动切换到已有标签） + - 每个标签独立保存：内容、滚动位置、光标位置、修改状态 + +2. **文件打开** - 工具栏 → 打开按钮（支持 .md / .txt / .markdown） - - 拖拽文件到窗口打开 + - 拖拽文件到窗口打开（支持多文件同时拖入） - 支持 Windows 文件关联（双击 .md 文件打开） - 支持命令行参数传入文件路径 -2. **文件保存** +3. **文件保存** - Ctrl+S 快捷键保存 - 工具栏 → 保存按钮 - Ctrl+Shift+S 另存为 -3. **实时预览** +4. **实时预览** - 左侧编辑器 + 右侧预览（默认分屏模式） - 编辑 150ms 防抖后更新预览 - 基于 DOM 位置映射的滚动同步 -4. **视图模式** +5. **视图模式** - 编辑+预览（Split View）— Ctrl+1 - 纯编辑模式 — Ctrl+2 - 纯预览模式 — Ctrl+3 - 记忆上次使用的视图模式（localStorage） -5. **文件修改检测** - - 主进程通过 `fs.watch` 监听当前打开文件 +6. **文件修改检测** + - 主进程通过 `fs.watch` 监听当前活动标签的文件 - 外部修改时显示黄色提示横幅 - 支持「重新加载」或「忽略」 + - 切换标签时自动切换监听目标 -6. **未保存提醒** - - 关闭窗口时检测未保存修改 +7. **未保存提醒** + - 关闭窗口时检测所有标签的未保存修改 - 弹出确认对话框，防止误操作 - 主进程 5 秒超时兜底，防止渲染进程无响应时窗口卡死 -7. **暗色主题** +8. **暗色主题** - 工具栏右侧月亮/太阳图标切换 - CSS 变量驱动，一键切换整套配色 - 主题偏好持久化（localStorage） @@ -129,23 +139,23 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 阅读器桌面应用程 #### 布局 ``` -┌──────────────────────────────────────────────────────────┐ -│ MarkLite - filename.md ─ □ ✕ │ -├──────────────────────────────────────────────────────────┤ -│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │ -├──────────────────────────────────────────────────────────┤ -│ ⚠️ 文件已被外部程序修改 [重新加载] [忽略] │ -├────────────────────┬─────────────────────────────────────┤ -│ │ │ -│ 1 # Title │ Title │ -│ 2 │ ─────── │ -│ 3 content... │ content... │ -│ │ │ -│ │ │ -│ │ │ -├────────────────────┴─────────────────────────────────────┤ -│ filename.md │ UTF-8 │ Markdown │ 1.2 KB │ 行 3, 列 1 │ -└──────────────────────────────────────────────────────────┘ +┌──────────────────────────────────────────────────────────────────┐ +│ MarkLite - filename.md ─ □ ✕ │ +├──────────────────────────────────────────────────────────────────┤ +│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │ +├──────────────────────────────────────────────────────────────────┤ +│ [file1.md] [file2.md] [未命名] [+] │ +├──────────────────────────────────────────────────────────────────┤ +│ ⚠️ 文件已被外部程序修改 [重新加载] [忽略] │ +├────────────────────────────┬─────────────────────────────────────┤ +│ │ │ +│ 1 # Title │ Title │ +│ 2 │ ─────── │ +│ 3 content... │ content... │ +│ │ │ +├────────────────────────────┴─────────────────────────────────────┤ +│ filename.md │ UTF-8 │ Markdown │ 1.2 KB │ 行 3, 列 1 │ +└──────────────────────────────────────────────────────────────────┘ ``` ## 4. 文件结构 @@ -157,8 +167,8 @@ MarkLite/ ├── preload.js # 预加载脚本（IPC 桥接） ├── renderer/ │ ├── index.html # 主页面结构 -│ ├── style.css # UI 样式（含暗色主题） -│ └── renderer.js # 渲染进程逻辑 +│ ├── style.css # UI 样式（含暗色主题、标签栏） +│ └── renderer.js # 渲染进程逻辑（标签页、编辑、预览） ├── lib/ │ ├── marked.min.js # Markdown 解析库（离线） │ ├── highlight.min.js # 代码高亮库（离线） @@ -185,13 +195,15 @@ MarkLite/ | `file:getCurrentPath` | 无 | `string \| null` | 获取当前文件路径 | | `file:stats` | `filePath` | `{ success, size, mtime }` | 获取文件元信息 | | `file:reload` | 无 | `{ success, content, filePath }` | 重新加载当前文件 | +| `tab:switched` | `filePath` | 无 | 通知主进程切换活动文件 | | `window:forceClose` | 无 | 无 | 强制关闭窗口（跳过未保存检查） | ### 5.2 主进程 → 渲染进程（send） | 通道 | 数据 | 说明 | |------|------|------| -| `file:opened` | `{ filePath, content }` | 文件已打开 | +| `file:openInTab` | `{ filePath, content }` | 在新标签中打开文件 | +| `file:opened` | `{ filePath, content }` | 文件已打开（兼容旧路径） | | `file:externallyModified` | `filePath` | 文件被外部修改 | | `menu:save` | 无 | 菜单触发保存 | | `menu:saveAs` | 无 | 菜单触发另存为 | @@ -199,7 +211,27 @@ MarkLite/ | `window:confirmClose` | 无 | 请求确认关闭 | | `window:closing` | 无 | 窗口即将关闭 | -## 6. 数据持久化 +## 6. 标签页数据模型 + +每个标签页在渲染进程中维护独立状态： + +```javascript +{ + id: Number, // 唯一标识 + filePath: String | null, // 文件路径（未命名标签为 null） + content: String, // 编辑器内容 + isModified: Boolean, // 是否已修改 + scrollTop: Number, // 编辑器滚动位置 + scrollLeft: Number, + selectionStart: Number, // 光标选区 + selectionEnd: Number, + previewScrollTop: Number // 预览面板滚动位置 +} +``` + +切换标签时自动保存当前状态、恢复目标状态。 + +## 7. 数据持久化 通过 `localStorage` 存储用户偏好，key 为 `marklite-settings`： @@ -217,7 +249,7 @@ MarkLite/ | `viewMode` | string | 视图模式：`split` / `editor` / `preview` | | `splitRatio` | number | 分屏比例（20~80） | -## 7. Markdown 渲染支持 +## 8. Markdown 渲染支持 支持标准 Markdown 和 GFM（GitHub Flavored Markdown）： @@ -234,20 +266,22 @@ MarkLite/ - 水平线 - HTML 内联 -## 8. 快捷键 +## 9. 快捷键 | 快捷键 | 功能 | |:-------|:-----| +| `Ctrl + T` | 新建标签页 | +| `Ctrl + W` | 关闭当前标签页 | +| `Ctrl + Tab` | 切换到下一个标签页 | +| `Ctrl + Shift + Tab` | 切换到上一个标签页 | | `Ctrl + O` | 打开文件 | | `Ctrl + S` | 保存文件 | | `Ctrl + Shift + S` | 另存为 | | `Ctrl + 1` | 编辑 + 预览（分屏） | | `Ctrl + 2` | 纯编辑模式 | | `Ctrl + 3` | 纯预览模式 | -| `F12` | 开发者工具 | -| `Ctrl + R` | 重新加载 | -## 9. 构建与发布 +## 10. 构建与发布 使用 `electron-builder` 打包： diff --git a/README.md b/README.md index 3b600ac..f9966bd 100644 --- a/README.md +++ b/README.md @@ -5,19 +5,19 @@

MarkLite

- 轻量级 Windows 本地 Markdown 阅读器 + 轻量级 Windows 本地 Markdown 编辑器

Platform Electron License - Version + Version

- 基于 Electron 构建，开箱即用的 Markdown 桌面阅读器。
- 支持实时预览、代码高亮、拖拽打开，界面简洁现代。 + 基于 Electron 构建，开箱即用的 Markdown 桌面编辑器。
+ 多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开。

--- @@ -26,39 +26,43 @@ | 功能 | 说明 | |------|------| -| 📂 **文件打开** | 菜单打开 / 拖拽打开 / 文件关联（双击 .md） | +| 📑 **多标签页** | 同时打开多个文件，Ctrl+T 新建、Ctrl+W 关闭、Ctrl+Tab 切换 | +| 📂 **文件打开** | 按钮打开 / 拖拽打开 / 文件关联（双击 .md） | | ✏️ **实时编辑** | 左侧编辑器，支持 Tab 缩进、行号显示、光标位置 | | 👁 **实时预览** | 右侧预览面板，编辑即渲染，滚动同步 | | 🔤 **代码高亮** | 基于 highlight.js，支持 180+ 种编程语言语法高亮 | | 🎨 **三种视图** | 分屏模式 / 纯编辑 / 纯预览，自由切换 | | 📐 **分屏调节** | 拖拽中间分隔条，自由调整编辑区与预览区比例 | +| 🌙 **暗色主题** | 一键切换亮色/暗色主题，偏好自动记忆 | +| 🔔 **文件监听** | 外部修改文件时自动提示，支持重新加载 | | 💾 **文件保存** | 保存 / 另存为，支持 .md 和 .txt 格式 | | ⌨️ **快捷键** | 完整的键盘快捷键支持，操作高效 | -| 🖥️ **原生菜单** | 文件、视图、帮助菜单，符合桌面应用习惯 | | 📦 **NSIS 安装包** | 一键打包为 Windows exe 安装程序 | ## 📸 界面预览 ``` -┌──────────────────────────────────────────────────────────┐ -│ 📄 MarkLite - README.md ─ □ ✕ │ -├──────────────────────────────────────────────────────────┤ -│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ -├────────────────────────┬─────────────────────────────────┤ -│ │ │ -│ 1 # MarkLite │ MarkLite │ -│ 2 │ ───────────── │ -│ 3 一款轻量级的... │ │ -│ 4 │ 一款轻量级的 Windows 本地 │ -│ 5 ## 功能特性 │ Markdown 阅读器桌面应用... │ -│ 6 │ │ -│ 7 - 📝 实时编辑 │ ■ 实时编辑 │ -│ 8 - 👁 实时预览 │ ■ 实时预览 │ -│ 9 - 🔤 代码高亮 │ ■ 代码高亮 │ -│ │ │ -├────────────────────────┴─────────────────────────────────┤ -│ README.md │ UTF-8 │ Markdown │ 行 9, 列 12 │ -└──────────────────────────────────────────────────────────┘ +┌──────────────────────────────────────────────────────────────────┐ +│ MarkLite - README.md ─ □ ✕ │ +├──────────────────────────────────────────────────────────────────┤ +│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │ +├──────────────────────────────────────────────────────────────────┤ +│ [README.md] [DESIGN.md] [main.js] [+] │ +├────────────────────────────┬─────────────────────────────────────┤ +│ │ │ +│ 1 # MarkLite │ MarkLite │ +│ 2 │ ───────────── │ +│ 3 一款轻量级的... │ │ +│ 4 │ 一款轻量级的 Windows 本地 │ +│ 5 ## 功能特性 │ Markdown 编辑器桌面应用... │ +│ 6 │ │ +│ 7 - 📝 实时编辑 │ ■ 实时编辑 │ +│ 8 - 👁 实时预览 │ ■ 实时预览 │ +│ 9 - 🔤 代码高亮 │ ■ 代码高亮 │ +│ │ │ +├────────────────────────────┴─────────────────────────────────────┤ +│ README.md │ UTF-8 │ Markdown │ 2.1 KB │ 行 9, 列 12 │ +└──────────────────────────────────────────────────────────────────┘ ``` ## 🚀 快速开始 @@ -93,20 +97,22 @@ npm run build npm run build:portable ``` -打包完成后，安装包位于 `dist/` 目录。 +打包完成后，安装包位于 `dist/` 目录。详见 [DEVSETUP.md](DEVSETUP.md)。 ## ⌨️ 快捷键 | 快捷键 | 功能 | |:-------|:-----| +| `Ctrl + T` | 新建标签页 | +| `Ctrl + W` | 关闭当前标签页 | +| `Ctrl + Tab` | 切换到下一个标签页 | +| `Ctrl + Shift + Tab` | 切换到上一个标签页 | | `Ctrl + O` | 打开文件 | | `Ctrl + S` | 保存文件 | | `Ctrl + Shift + S` | 另存为 | | `Ctrl + 1` | 编辑 + 预览（分屏） | | `Ctrl + 2` | 纯编辑模式 | | `Ctrl + 3` | 纯预览模式 | -| `F12` | 开发者工具 | -| `Ctrl + R` | 重新加载 | ## 🛠️ 技术栈 @@ -123,12 +129,12 @@ npm run build:portable ``` MarkLite/ ├── package.json # 项目配置 & electron-builder 打包配置 -├── main.js # Electron 主进程（窗口、菜单、文件系统） +├── main.js # Electron 主进程（窗口、文件系统、IPC） ├── preload.js # 预加载脚本（安全 IPC 桥接） ├── renderer/ │ ├── index.html # 主页面结构 -│ ├── style.css # UI 样式（现代简洁设计） -│ └── renderer.js # 渲染进程逻辑（编辑、预览、拖拽） +│ ├── style.css # UI 样式（亮色/暗色主题） +│ └── renderer.js # 渲染进程逻辑（标签页、编辑、预览） ├── lib/ │ ├── marked.min.js # marked.js（本地离线） │ ├── highlight.min.js # highlight.js（本地离线） @@ -136,6 +142,7 @@ MarkLite/ ├── assets/ │ └── icon.ico # 应用图标（多尺寸） ├── DESIGN.md # 架构设计文档 +├── DEVSETUP.md # 开发环境配置指南 ├── LICENSE # MIT 许可证 └── README.md # 项目说明 ``` @@ -145,7 +152,7 @@ MarkLite/ ``` ┌─────────────────────────────────────┐ │ Main Process (main.js) │ -│ 窗口管理 · 文件系统 · 原生菜单 · IPC │ +│ 窗口管理 · 文件系统 · 文件监听 · IPC │ └──────────────┬──────────────────────┘ │ contextBridge (安全隔离) ┌──────────────▼──────────────────────┐ @@ -155,11 +162,12 @@ MarkLite/ │ ┌──────────────▼──────────────────────┐ │ Renderer Process (renderer/) │ -│ UI 渲染 · 编辑器 · 预览 · 拖拽 · 快捷键 │ +│ 标签页 · 编辑器 · 预览 · 暗色主题 │ +│ 拖拽 · 快捷键 · localStorage │ └─────────────────────────────────────┘ ``` -> 安全策略：`contextIsolation: true` + `nodeIntegration: false`，渲染进程无法直接访问 Node.js API。 +> 安全策略：`contextIsolation: true` + `nodeIntegration: false` + CSP，渲染进程无法直接访问 Node.js API。 ## 📝 支持的 Markdown 语法