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

docs: 同步 v1.2.0 文档（搜索替换 + 文件树）

Browse Source
This commit is contained in:
thzxx
2026-05-21 11:39:07 +08:00
parent 543af93802
commit 2010f9dff5
2 changed files with 108 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+61 -22
View File
@@ -2,7 +2,7 @@
## 1. 项目概述
MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程序。基于 Electron 框架构建，提供简洁现代的用户界面，支持多标签页、Markdown 文件的打开、编辑和实时预览，支持亮色/暗色主题切换。
MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程序。基于 Electron 框架构建，提供简洁现代的用户界面，支持多标签页、Markdown 文件的打开、编辑和实时预览，支持亮色/暗色主题切换，支持搜索替换和文件树侧边栏。
## 2. 技术架构
@@ -24,6 +24,7 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
│ - 窗口管理 │
│ - 文件系统操作 (fs) │
│ - 文件监听 (fs.watch) │
│ - 目录树读取与监听 │
│ - 未保存提醒拦截 │
│ - IPC 通信主端 │
└──────────────┬──────────────────────────┘
@@ -39,6 +40,8 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
│ - 多标签页管理 │
│ - UI 渲染（亮色/暗色主题） │
│ - Markdown 编辑与预览 │
│ - 搜索替换（高亮、正则、大小写） │
│ - 文件树侧边栏 │
│ - 拖拽文件处理 │
│ - 快捷键处理 │
│ - 用户设置持久化 (localStorage) │
@@ -102,6 +105,24 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
- CSS 变量驱动，一键切换整套配色
- 主题偏好持久化（localStorage）
9. **搜索替换**
- Ctrl+F 打开搜索栏，Ctrl+H 打开搜索+替换栏
- 实时高亮所有匹配项，当前匹配用不同颜色标识
- Enter / Shift+Enter 导航下一个/上一个匹配
- 区分大小写（Alt+C）、正则表达式（Alt+R）切换
- 替换当前（Ctrl+Shift+G）、全部替换（Ctrl+Shift+H）
- 自动将选中文本填充到搜索框
- Esc 关闭搜索栏
10. **文件树侧边栏**
- 工具栏按钮打开文件夹选择对话框
- 递归读取目录结构，只显示 .md/.markdown/.txt 文件
- 自动跳过 node_modules、.git、dist 等无关目录
- 点击文件夹展开/折叠，点击文件在新标签页打开
- 已打开的文件自动切换到对应标签
- fs.watch 监听目录变化，自动刷新树
- 侧边栏折叠状态持久化（localStorage）
### 3.2 UI 设计
#### 色彩方案（亮色）
@@ -139,23 +160,26 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
#### 布局
```
┌──────────────────────────────────────────────────────────────────┐
│ MarkLite - filename.md ─ □ ✕ │
├──────────────────────────────────────────────────────────────────┤
│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │
├──────────────────────────────────────────────────────────────────┤
│ [file1.md] [file2.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] [未命名] [+] │
├──────────────────────────────────────────────────────────────────────────┤
│ ⚠️ 文件已被外部程序修改 [重新加载] [忽略] │
├──────────┬─────────────────────────┬─────────────────────────────────────┤
│ 资源管理器│ │ │
│ ▼ project │ 🔍 查找... 2/5 │ Title │
│ 📁 src │ [替换... ] [替换][全部]│ ─────── │
│ 📄 file1│ │ │
│ 📄 file2│ 1 # Title │ Title │
│ 📁 lib │ 2 │ ─────── │
│ │ 3 content... │ content... │
│ │ 4 │ │
├──────────┴─────────────────────────┴─────────────────────────────────────┤
│ filename.md │ UTF-8 │ Markdown │ 1.2 KB │ 行 3, 列 1 │
└──────────────────────────────────────────────────────────────────────────┘
```
## 4. 文件结构
@@ -166,9 +190,9 @@ MarkLite/
├── main.js # Electron 主进程
├── preload.js # 预加载脚本（IPC 桥接）
├── renderer/
│ ├── index.html # 主页面结构
│ ├── style.css # UI 样式（含暗色主题、标签栏）
│ └── renderer.js # 渲染进程逻辑（标签页、编辑、预览）
│ ├── index.html # 主页面结构（含侧边栏、搜索栏）
│ ├── style.css # UI 样式（亮色/暗色主题、侧边栏、搜索栏）
│ └── renderer.js # 渲染进程逻辑（标签页、编辑、预览、搜索、文件树）
├── lib/
│ ├── marked.min.js # Markdown 解析库（离线）
│ ├── highlight.min.js # 代码高亮库（离线）
@@ -197,6 +221,10 @@ MarkLite/
| `file:reload` | 无 | `{ success, content, filePath }` | 重新加载当前文件 |
| `tab:switched` | `filePath` | 无 | 通知主进程切换活动文件 |
| `window:forceClose` | 无 | 无 | 强制关闭窗口（跳过未保存检查） |
| `dir:readTree` | `dirPath` | `{ success, tree, rootPath }` | 递归读取目录树 |
| `dir:openDialog` | 无 | `string \| null` | 打开文件夹选择对话框 |
| `dir:watch` | `dirPath` | 无 | 监听目录变化 |
| `dir:unwatch` | 无 | 无 | 停止监听目录变化 |
### 5.2 主进程 → 渲染进程（send）
@@ -210,6 +238,7 @@ MarkLite/
| `menu:viewMode` | `mode` | 菜单切换视图模式 |
| `window:confirmClose` | 无 | 请求确认关闭 |
| `window:closing` | 无 | 窗口即将关闭 |
| `sidebar:dirChanged` | 无 | 目录结构变化，通知渲染进程刷新树 |
## 6. 标签页数据模型
@@ -239,7 +268,8 @@ MarkLite/
{
"darkMode": false,
"viewMode": "split",
"splitRatio": 50
"splitRatio": 50,
"sidebarCollapsed": false
}
```
@@ -248,6 +278,7 @@ MarkLite/
| `darkMode` | boolean | 暗色主题开关 |
| `viewMode` | string | 视图模式：`split` / `editor` / `preview` |
| `splitRatio` | number | 分屏比例（20~80） |
| `sidebarCollapsed` | boolean | 侧边栏是否折叠 |
## 8. Markdown 渲染支持
@@ -280,6 +311,14 @@ MarkLite/
| `Ctrl + 1` | 编辑 + 预览（分屏） |
| `Ctrl + 2` | 纯编辑模式 |
| `Ctrl + 3` | 纯预览模式 |
| `Ctrl + F` | 搜索 |
| `Ctrl + H` | 搜索并替换 |
| `Enter` / `Shift+Enter` | 下一个 / 上一个匹配 |
| `Alt + C` | 切换区分大小写 |
| `Alt + R` | 切换正则表达式 |
| `Ctrl + Shift + G` | 替换当前匹配 |
| `Ctrl + Shift + H` | 全部替换 |
| `Esc` | 关闭搜索栏 |
## 10. 构建与发布