docs: 同步 v1.2.0 文档（搜索替换 + 文件树）
This commit is contained in:
thzxx
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
## 1. 项目概述
|
## 1. 项目概述
|
||||||
|
|
||||||
MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程序。基于 Electron 框架构建，提供简洁现代的用户界面，支持多标签页、Markdown 文件的打开、编辑和实时预览，支持亮色/暗色主题切换。
|
MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程序。基于 Electron 框架构建，提供简洁现代的用户界面，支持多标签页、Markdown 文件的打开、编辑和实时预览，支持亮色/暗色主题切换，支持搜索替换和文件树侧边栏。
|
||||||
|
|
||||||
## 2. 技术架构
|
## 2. 技术架构
|
||||||
|
|
||||||
@@ -24,6 +24,7 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
|
|||||||
│ - 窗口管理 │
|
│ - 窗口管理 │
|
||||||
│ - 文件系统操作 (fs) │
|
│ - 文件系统操作 (fs) │
|
||||||
│ - 文件监听 (fs.watch) │
|
│ - 文件监听 (fs.watch) │
|
||||||
|
│ - 目录树读取与监听 │
|
||||||
│ - 未保存提醒拦截 │
|
│ - 未保存提醒拦截 │
|
||||||
│ - IPC 通信主端 │
|
│ - IPC 通信主端 │
|
||||||
└──────────────┬──────────────────────────┘
|
└──────────────┬──────────────────────────┘
|
||||||
@@ -39,6 +40,8 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
|
|||||||
│ - 多标签页管理 │
|
│ - 多标签页管理 │
|
||||||
│ - UI 渲染（亮色/暗色主题） │
|
│ - UI 渲染（亮色/暗色主题） │
|
||||||
│ - Markdown 编辑与预览 │
|
│ - Markdown 编辑与预览 │
|
||||||
|
│ - 搜索替换（高亮、正则、大小写） │
|
||||||
|
│ - 文件树侧边栏 │
|
||||||
│ - 拖拽文件处理 │
|
│ - 拖拽文件处理 │
|
||||||
│ - 快捷键处理 │
|
│ - 快捷键处理 │
|
||||||
│ - 用户设置持久化 (localStorage) │
|
│ - 用户设置持久化 (localStorage) │
|
||||||
@@ -102,6 +105,24 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
|
|||||||
- CSS 变量驱动，一键切换整套配色
|
- CSS 变量驱动，一键切换整套配色
|
||||||
- 主题偏好持久化（localStorage）
|
- 主题偏好持久化（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 设计
|
### 3.2 UI 设计
|
||||||
|
|
||||||
#### 色彩方案（亮色）
|
#### 色彩方案（亮色）
|
||||||
@@ -139,23 +160,26 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
|
|||||||
#### 布局
|
#### 布局
|
||||||
|
|
||||||
```
|
```
|
||||||
┌──────────────────────────────────────────────────────────────────┐
|
┌──────────────────────────────────────────────────────────────────────────┐
|
||||||
│ MarkLite - filename.md ─ □ ✕ │
|
│ MarkLite - filename.md ─ □ ✕ │
|
||||||
├──────────────────────────────────────────────────────────────────┤
|
├──────────────────────────────────────────────────────────────────────────┤
|
||||||
│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │
|
│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │
|
||||||
├──────────────────────────────────────────────────────────────────┤
|
├──────────────────────────────────────────────────────────────────────────┤
|
||||||
│ [file1.md] [file2.md] [未命名] [+] │
|
│ [file1.md] [file2.md] [未命名] [+] │
|
||||||
├──────────────────────────────────────────────────────────────────┤
|
├──────────────────────────────────────────────────────────────────────────┤
|
||||||
│ ⚠️ 文件已被外部程序修改 [重新加载] [忽略] │
|
│ ⚠️ 文件已被外部程序修改 [重新加载] [忽略] │
|
||||||
├────────────────────────────┬─────────────────────────────────────┤
|
├──────────┬─────────────────────────┬─────────────────────────────────────┤
|
||||||
│ │ │
|
│ 资源管理器│ │ │
|
||||||
│ 1 # Title │ Title │
|
│ ▼ project │ 🔍 查找... 2/5 │ Title │
|
||||||
│ 2 │ ─────── │
|
│ 📁 src │ [替换... ] [替换][全部]│ ─────── │
|
||||||
│ 3 content... │ content... │
|
│ 📄 file1│ │ │
|
||||||
│ │ │
|
│ 📄 file2│ 1 # Title │ Title │
|
||||||
├────────────────────────────┴─────────────────────────────────────┤
|
│ 📁 lib │ 2 │ ─────── │
|
||||||
|
│ │ 3 content... │ content... │
|
||||||
|
│ │ 4 │ │
|
||||||
|
├──────────┴─────────────────────────┴─────────────────────────────────────┤
|
||||||
│ filename.md │ UTF-8 │ Markdown │ 1.2 KB │ 行 3, 列 1 │
|
│ filename.md │ UTF-8 │ Markdown │ 1.2 KB │ 行 3, 列 1 │
|
||||||
└──────────────────────────────────────────────────────────────────┘
|
└──────────────────────────────────────────────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
## 4. 文件结构
|
## 4. 文件结构
|
||||||
@@ -166,9 +190,9 @@ MarkLite/
|
|||||||
├── main.js # Electron 主进程
|
├── main.js # Electron 主进程
|
||||||
├── preload.js # 预加载脚本（IPC 桥接）
|
├── preload.js # 预加载脚本（IPC 桥接）
|
||||||
├── renderer/
|
├── renderer/
|
||||||
│ ├── index.html # 主页面结构
|
│ ├── index.html # 主页面结构（含侧边栏、搜索栏）
|
||||||
│ ├── style.css # UI 样式（含暗色主题、标签栏）
|
│ ├── style.css # UI 样式（亮色/暗色主题、侧边栏、搜索栏）
|
||||||
│ └── renderer.js # 渲染进程逻辑（标签页、编辑、预览）
|
│ └── renderer.js # 渲染进程逻辑（标签页、编辑、预览、搜索、文件树）
|
||||||
├── lib/
|
├── lib/
|
||||||
│ ├── marked.min.js # Markdown 解析库（离线）
|
│ ├── marked.min.js # Markdown 解析库（离线）
|
||||||
│ ├── highlight.min.js # 代码高亮库（离线）
|
│ ├── highlight.min.js # 代码高亮库（离线）
|
||||||
@@ -197,6 +221,10 @@ MarkLite/
|
|||||||
| `file:reload` | 无 | `{ success, content, filePath }` | 重新加载当前文件 |
|
| `file:reload` | 无 | `{ success, content, filePath }` | 重新加载当前文件 |
|
||||||
| `tab:switched` | `filePath` | 无 | 通知主进程切换活动文件 |
|
| `tab:switched` | `filePath` | 无 | 通知主进程切换活动文件 |
|
||||||
| `window:forceClose` | 无 | 无 | 强制关闭窗口（跳过未保存检查） |
|
| `window:forceClose` | 无 | 无 | 强制关闭窗口（跳过未保存检查） |
|
||||||
|
| `dir:readTree` | `dirPath` | `{ success, tree, rootPath }` | 递归读取目录树 |
|
||||||
|
| `dir:openDialog` | 无 | `string \| null` | 打开文件夹选择对话框 |
|
||||||
|
| `dir:watch` | `dirPath` | 无 | 监听目录变化 |
|
||||||
|
| `dir:unwatch` | 无 | 无 | 停止监听目录变化 |
|
||||||
|
|
||||||
### 5.2 主进程 → 渲染进程（send）
|
### 5.2 主进程 → 渲染进程（send）
|
||||||
|
|
||||||
@@ -210,6 +238,7 @@ MarkLite/
|
|||||||
| `menu:viewMode` | `mode` | 菜单切换视图模式 |
|
| `menu:viewMode` | `mode` | 菜单切换视图模式 |
|
||||||
| `window:confirmClose` | 无 | 请求确认关闭 |
|
| `window:confirmClose` | 无 | 请求确认关闭 |
|
||||||
| `window:closing` | 无 | 窗口即将关闭 |
|
| `window:closing` | 无 | 窗口即将关闭 |
|
||||||
|
| `sidebar:dirChanged` | 无 | 目录结构变化，通知渲染进程刷新树 |
|
||||||
|
|
||||||
## 6. 标签页数据模型
|
## 6. 标签页数据模型
|
||||||
|
|
||||||
@@ -239,7 +268,8 @@ MarkLite/
|
|||||||
{
|
{
|
||||||
"darkMode": false,
|
"darkMode": false,
|
||||||
"viewMode": "split",
|
"viewMode": "split",
|
||||||
"splitRatio": 50
|
"splitRatio": 50,
|
||||||
|
"sidebarCollapsed": false
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -248,6 +278,7 @@ MarkLite/
|
|||||||
| `darkMode` | boolean | 暗色主题开关 |
|
| `darkMode` | boolean | 暗色主题开关 |
|
||||||
| `viewMode` | string | 视图模式：`split` / `editor` / `preview` |
|
| `viewMode` | string | 视图模式：`split` / `editor` / `preview` |
|
||||||
| `splitRatio` | number | 分屏比例（20~80） |
|
| `splitRatio` | number | 分屏比例（20~80） |
|
||||||
|
| `sidebarCollapsed` | boolean | 侧边栏是否折叠 |
|
||||||
|
|
||||||
## 8. Markdown 渲染支持
|
## 8. Markdown 渲染支持
|
||||||
|
|
||||||
@@ -280,6 +311,14 @@ MarkLite/
|
|||||||
| `Ctrl + 1` | 编辑 + 预览（分屏） |
|
| `Ctrl + 1` | 编辑 + 预览（分屏） |
|
||||||
| `Ctrl + 2` | 纯编辑模式 |
|
| `Ctrl + 2` | 纯编辑模式 |
|
||||||
| `Ctrl + 3` | 纯预览模式 |
|
| `Ctrl + 3` | 纯预览模式 |
|
||||||
|
| `Ctrl + F` | 搜索 |
|
||||||
|
| `Ctrl + H` | 搜索并替换 |
|
||||||
|
| `Enter` / `Shift+Enter` | 下一个 / 上一个匹配 |
|
||||||
|
| `Alt + C` | 切换区分大小写 |
|
||||||
|
| `Alt + R` | 切换正则表达式 |
|
||||||
|
| `Ctrl + Shift + G` | 替换当前匹配 |
|
||||||
|
| `Ctrl + Shift + H` | 全部替换 |
|
||||||
|
| `Esc` | 关闭搜索栏 |
|
||||||
|
|
||||||
## 10. 构建与发布
|
## 10. 构建与发布
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
基于 Electron 构建，开箱即用的 Markdown 桌面编辑器。<br>
|
基于 Electron 构建，开箱即用的 Markdown 桌面编辑器。<br>
|
||||||
多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开。
|
多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开 · 搜索替换 · 文件树。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -36,33 +36,35 @@
|
|||||||
| 🌙 **暗色主题** | 一键切换亮色/暗色主题，偏好自动记忆 |
|
| 🌙 **暗色主题** | 一键切换亮色/暗色主题，偏好自动记忆 |
|
||||||
| 🔔 **文件监听** | 外部修改文件时自动提示，支持重新加载 |
|
| 🔔 **文件监听** | 外部修改文件时自动提示，支持重新加载 |
|
||||||
| 💾 **文件保存** | 保存 / 另存为，支持 .md 和 .txt 格式 |
|
| 💾 **文件保存** | 保存 / 另存为，支持 .md 和 .txt 格式 |
|
||||||
|
| 🔍 **搜索替换** | Ctrl+F 搜索、Ctrl+H 替换，支持高亮匹配、大小写、正则表达式 |
|
||||||
|
| 📁 **文件树** | 侧边栏浏览项目目录，点击打开文件，自动刷新 |
|
||||||
| ⌨️ **快捷键** | 完整的键盘快捷键支持，操作高效 |
|
| ⌨️ **快捷键** | 完整的键盘快捷键支持，操作高效 |
|
||||||
| 📦 **NSIS 安装包** | 一键打包为 Windows exe 安装程序 |
|
| 📦 **NSIS 安装包** | 一键打包为 Windows exe 安装程序 |
|
||||||
|
|
||||||
## 📸 界面预览
|
## 📸 界面预览
|
||||||
|
|
||||||
```
|
```
|
||||||
┌──────────────────────────────────────────────────────────────────┐
|
┌──────────────────────────────────────────────────────────────────────────┐
|
||||||
│ MarkLite - README.md ─ □ ✕ │
|
│ MarkLite - README.md ─ □ ✕ │
|
||||||
├──────────────────────────────────────────────────────────────────┤
|
├──────────────────────────────────────────────────────────────────────────┤
|
||||||
│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │
|
│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │
|
||||||
├──────────────────────────────────────────────────────────────────┤
|
├──────────────────────────────────────────────────────────────────────────┤
|
||||||
│ [README.md] [DESIGN.md] [main.js] [+] │
|
│ [README.md] [DESIGN.md] [main.js] [+] │
|
||||||
├────────────────────────────┬─────────────────────────────────────┤
|
├──────────┬─────────────────────────┬─────────────────────────────────────┤
|
||||||
│ │ │
|
│ 资源管理器│ │ │
|
||||||
│ 1 # MarkLite │ MarkLite │
|
│ ▼ MarkLite│ 🔍 查找... 3/12 │ MarkLite │
|
||||||
│ 2 │ ───────────── │
|
│ 📁 src │ [替换... ] [替换][全部]│ ───────────── │
|
||||||
│ 3 一款轻量级的... │ │
|
│ 📄 README│ │ │
|
||||||
│ 4 │ 一款轻量级的 Windows 本地 │
|
│ 📄 DESIGN│ 1 # MarkLite │ 一款轻量级的 Windows 本地 │
|
||||||
│ 5 ## 功能特性 │ Markdown 编辑器桌面应用... │
|
│ 📁 lib │ 2 │ Markdown 编辑器桌面应用... │
|
||||||
│ 6 │ │
|
│ 📁 assets│ 3 一款轻量级的... │ │
|
||||||
│ 7 - 📝 实时编辑 │ ■ 实时编辑 │
|
│ │ 4 │ ■ 实时编辑 │
|
||||||
│ 8 - 👁 实时预览 │ ■ 实时预览 │
|
│ │ 5 ## 功能特性 │ ■ 实时预览 │
|
||||||
│ 9 - 🔤 代码高亮 │ ■ 代码高亮 │
|
│ │ 6 │ ■ 代码高亮 │
|
||||||
│ │ │
|
│ │ 7 - 📝 实时编辑 │ │
|
||||||
├────────────────────────────┴─────────────────────────────────────┤
|
├──────────┴─────────────────────────┴─────────────────────────────────────┤
|
||||||
│ README.md │ UTF-8 │ Markdown │ 2.1 KB │ 行 9, 列 12 │
|
│ README.md │ UTF-8 │ Markdown │ 2.1 KB │ 行 9, 列 12 │
|
||||||
└──────────────────────────────────────────────────────────────────┘
|
└──────────────────────────────────────────────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
## 🚀 快速开始
|
## 🚀 快速开始
|
||||||
@@ -113,6 +115,14 @@ npm run build:portable
|
|||||||
| `Ctrl + 1` | 编辑 + 预览（分屏） |
|
| `Ctrl + 1` | 编辑 + 预览（分屏） |
|
||||||
| `Ctrl + 2` | 纯编辑模式 |
|
| `Ctrl + 2` | 纯编辑模式 |
|
||||||
| `Ctrl + 3` | 纯预览模式 |
|
| `Ctrl + 3` | 纯预览模式 |
|
||||||
|
| `Ctrl + F` | 搜索 |
|
||||||
|
| `Ctrl + H` | 搜索并替换 |
|
||||||
|
| `Enter` / `Shift+Enter` | 下一个 / 上一个匹配 |
|
||||||
|
| `Alt + C` | 切换区分大小写 |
|
||||||
|
| `Alt + R` | 切换正则表达式 |
|
||||||
|
| `Ctrl + Shift + G` | 替换当前匹配 |
|
||||||
|
| `Ctrl + Shift + H` | 全部替换 |
|
||||||
|
| `Esc` | 关闭搜索栏 |
|
||||||
|
|
||||||
## 🛠️ 技术栈
|
## 🛠️ 技术栈
|
||||||
|
|
||||||
@@ -150,21 +160,23 @@ MarkLite/
|
|||||||
## 🏗️ 架构设计
|
## 🏗️ 架构设计
|
||||||
|
|
||||||
```
|
```
|
||||||
┌─────────────────────────────────────┐
|
┌──────────────────────────────────────────┐
|
||||||
│ Main Process (main.js) │
|
│ Main Process (main.js) │
|
||||||
│ 窗口管理 · 文件系统 · 文件监听 · IPC │
|
│ 窗口管理 · 文件系统 · 文件监听 · IPC │
|
||||||
└──────────────┬──────────────────────┘
|
│ 目录树读取 · 侧边栏目录监听 │
|
||||||
|
└──────────────┬───────────────────────────┘
|
||||||
│ contextBridge (安全隔离)
|
│ contextBridge (安全隔离)
|
||||||
┌──────────────▼──────────────────────┐
|
┌──────────────▼───────────────────────────┐
|
||||||
│ Preload Script (preload.js) │
|
│ Preload Script (preload.js) │
|
||||||
│ 安全 API 桥接层 │
|
│ 安全 API 桥接层 │
|
||||||
└──────────────┬──────────────────────┘
|
└──────────────┬───────────────────────────┘
|
||||||
│
|
│
|
||||||
┌──────────────▼──────────────────────┐
|
┌──────────────▼───────────────────────────┐
|
||||||
│ Renderer Process (renderer/) │
|
│ Renderer Process (renderer/) │
|
||||||
│ 标签页 · 编辑器 · 预览 · 暗色主题 │
|
│ 标签页 · 编辑器 · 预览 · 暗色主题 │
|
||||||
│ 拖拽 · 快捷键 · localStorage │
|
│ 搜索替换 · 文件树侧边栏 · 拖拽 · 快捷键 │
|
||||||
└─────────────────────────────────────┘
|
│ localStorage │
|
||||||
|
└──────────────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
> 安全策略：`contextIsolation: true` + `nodeIntegration: false` + CSP，渲染进程无法直接访问 Node.js API。
|
> 安全策略：`contextIsolation: true` + `nodeIntegration: false` + CSP，渲染进程无法直接访问 Node.js API。
|
||||||
|
|||||||
Reference in New Issue
Block a user