MetonaTeam/MarkLite
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

更新 README.md 和 DESIGN.md：多标签页、暗色主题、文件监听等 v1.1.0 功能

Browse Source
This commit is contained in:
thzxx
2026-05-18 13:35:23 +08:00
parent 5ff89edd2b
commit fe478edfde
2 changed files with 113 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+71 -37
View File
@@ -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` 打包：