diff --git a/DESIGN.md b/DESIGN.md index 41a6a49..9db2217 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -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. 构建与发布 diff --git a/README.md b/README.md index 7c64e20..3d92777 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@

基于 Electron 构建，开箱即用的 Markdown 桌面编辑器。
- 多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开。 + 多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开 · 搜索替换 · 文件树。

--- @@ -36,33 +36,35 @@ | 🌙 **暗色主题** | 一键切换亮色/暗色主题，偏好自动记忆 | | 🔔 **文件监听** | 外部修改文件时自动提示，支持重新加载 | | 💾 **文件保存** | 保存 / 另存为，支持 .md 和 .txt 格式 | +| 🔍 **搜索替换** | Ctrl+F 搜索、Ctrl+H 替换，支持高亮匹配、大小写、正则表达式 | +| 📁 **文件树** | 侧边栏浏览项目目录，点击打开文件，自动刷新 | | ⌨️ **快捷键** | 完整的键盘快捷键支持，操作高效 | | 📦 **NSIS 安装包** | 一键打包为 Windows exe 安装程序 | ## 📸 界面预览 ``` -┌──────────────────────────────────────────────────────────────────┐ -│ 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 │ -└──────────────────────────────────────────────────────────────────┘ +┌──────────────────────────────────────────────────────────────────────────┐ +│ MarkLite - README.md ─ □ ✕ │ +├──────────────────────────────────────────────────────────────────────────┤ +│ 📁 打开 │ 💾 保存 │ ⬜ 分屏 │ ✏️ 编辑 │ 👁 预览 │ 🌙 │ +├──────────────────────────────────────────────────────────────────────────┤ +│ [README.md] [DESIGN.md] [main.js] [+] │ +├──────────┬─────────────────────────┬─────────────────────────────────────┤ +│ 资源管理器│ │ │ +│ ▼ MarkLite│ 🔍 查找... 3/12 │ MarkLite │ +│ 📁 src │ [替换... ] [替换][全部]│ ───────────── │ +│ 📄 README│ │ │ +│ 📄 DESIGN│ 1 # MarkLite │ 一款轻量级的 Windows 本地 │ +│ 📁 lib │ 2 │ Markdown 编辑器桌面应用... │ +│ 📁 assets│ 3 一款轻量级的... │ │ +│ │ 4 │ ■ 实时编辑 │ +│ │ 5 ## 功能特性 │ ■ 实时预览 │ +│ │ 6 │ ■ 代码高亮 │ +│ │ 7 - 📝 实时编辑 │ │ +├──────────┴─────────────────────────┴─────────────────────────────────────┤ +│ README.md │ UTF-8 │ Markdown │ 2.1 KB │ 行 9, 列 12 │ +└──────────────────────────────────────────────────────────────────────────┘ ``` ## 🚀 快速开始 @@ -113,6 +115,14 @@ npm run build:portable | `Ctrl + 1` | 编辑 + 预览（分屏） | | `Ctrl + 2` | 纯编辑模式 | | `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) │ -│ 窗口管理 · 文件系统 · 文件监听 · IPC │ -└──────────────┬──────────────────────┘ +┌──────────────────────────────────────────┐ +│ Main Process (main.js) │ +│ 窗口管理 · 文件系统 · 文件监听 · IPC │ +│ 目录树读取 · 侧边栏目录监听 │ +└──────────────┬───────────────────────────┘ │ contextBridge (安全隔离) -┌──────────────▼──────────────────────┐ -│ Preload Script (preload.js) │ -│ 安全 API 桥接层 │ -└──────────────┬──────────────────────┘ +┌──────────────▼───────────────────────────┐ +│ Preload Script (preload.js) │ +│ 安全 API 桥接层 │ +└──────────────┬───────────────────────────┘ │ -┌──────────────▼──────────────────────┐ -│ Renderer Process (renderer/) │ -│ 标签页 · 编辑器 · 预览 · 暗色主题 │ -│ 拖拽 · 快捷键 · localStorage │ -└─────────────────────────────────────┘ +┌──────────────▼───────────────────────────┐ +│ Renderer Process (renderer/) │ +│ 标签页 · 编辑器 · 预览 · 暗色主题 │ +│ 搜索替换 · 文件树侧边栏 · 拖拽 · 快捷键 │ +│ localStorage │ +└──────────────────────────────────────────┘ ``` > 安全策略：`contextIsolation: true` + `nodeIntegration: false` + CSP，渲染进程无法直接访问 Node.js API。