MetonaTeam/MarkLite
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity
Files
v0.6.2
MarkLite/README.md
T
thzxx 073978d3ca feat: v0.6.2 — sqlark 0.7.4 升级(KVStore) + 14 项缺陷修复 + 多文件搜索 
- chore: 升级 @metona-team/metona-sqlark 0.4.4 → 0.7.4，存储后端迁移
  KVStore 引擎（内存索引+快照/日志，OPFS 落盘，jsdom 回退 memory），
  启动时自动删除旧 IndexedDB 库（aria-MarkLiteV2 / Dexie MarkLite），
  不做向下兼容
- fix: 保存竞态 — 快照比对后才清 isModified，防止保存期间的新输入被
  误清标记导致永不落盘（自动保存与手动保存均修复）
- fix: 另存为后标签重绑新路径（此前 Ctrl+S/自动保存仍写回旧文件），
  并同步最近文件与快照持久化
- fix: tabSwitched 只依赖活动文件路径（此前每次击键都触发 IPC 并
  重启主进程文件 watcher）
- fix: 主进程关闭兜底超时 5s→12s（长于 confirm 10s，防强杀丢编辑）
- fix: 外部修改检测覆盖非活动标签，banner 显示文件名，
  标签有未保存修改时显式提示不再静默
- fix: 导入备份后 flush + closeDatabase 再 reload（防 OPFS 未落盘丢数据），
  导入整体事务原子化（防半导入状态）
- fix: 文档大纲跳过代码块内标题；切换标签恢复光标位置
- fix: 首次启动主题跟随系统偏好（settings 无记录时 load 返回 null）
- fix: watcher error 恢复时重置 isSelfWriting，防外部修改通知被永久吞掉
- fix: 打开失败路径（最近文件/文件树/打开对话框）显式提示
- fix: 保存时保留原文件编码（UTF-16 LE/BE BOM 同编码写回）
- feat: 多文件搜索 — dir:search IPC + SearchPanel 弹层 + Ctrl+Shift+F，
  文件夹内递归搜索（大小写/正则，结果定位到行）
- feat: 标签恢复时与磁盘 mtime 比对，自动同步磁盘最新内容
- test: 新增 outlineUtils(6) / searchInDir(7) / updateTabFilePath(2) 测试
- docs: README/DESIGN 同步 kv 后端与版本号 v0.6.2
2026-08-15 21:18:05 +08:00

292 lines
13 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<p align="center">
<img src="assets/icon.ico" alt="MarkLite" width="128" height="128">
</p>
<h1 align="center">MarkLite</h1>
<p align="center">
<strong>轻量级 Windows 本地 Markdown 编辑器</strong>
</p>
<p align="center">
<img src="https://img.shields.io/badge/Platform-Windows%20x64-blue?style=flat-square&logo=windows" alt="Platform">
<img src="https://img.shields.io/badge/Electron-28-47848F?style=flat-square&logo=electron" alt="Electron">
<img src="https://img.shields.io/badge/TypeScript-5.6-3178C6?style=flat-square&logo=typescript" alt="TypeScript">
<img src="https://img.shields.io/badge/React-18-61DAFB?style=flat-square&logo=react" alt="React">
<img src="https://img.shields.io/badge/License-MIT-green?style=flat-square" alt="License">
<img src="https://img.shields.io/badge/Version-v0.6.2-orange?style=flat-square" alt="Version">
</p>
<p align="center">
基于 Electron + React + TypeScript 构建的现代化 Markdown 桌面编辑器。<br>
多标签页 · 实时预览 · 代码高亮 · 暗色主题 · 拖拽打开 · 搜索替换 · 文件树 · Mermaid 图表 · 状态持久化。
</p>
---
## ✨ 功能特性
| 功能 | 说明 |
|------|------|
| 📑 **多标签页** | 同时打开多个文件，Ctrl+T 新建、Ctrl+W 关闭、Ctrl+Tab MRU 切换 |
| 📂 **文件打开** | 按钮打开 / 拖拽打开 / 文件关联（双击 .md） / 命令行参数 |
| ✏️ **编辑器** | 基于 MetonaEditor 的代码+预览编辑器，内置解析器渲染、格式化工具栏、浮动格式栏、三模式切换（编辑/分屏/预览）、搜索替换、撤销重做、Zen 专注模式、粘贴图片转 base64 |
| 👁 **实时预览** | 分屏模式下左侧编辑、右侧实时预览，MetonaEditor 内置解析器渲染 |
| 🔤 **代码高亮** | MetonaEditor 内置零依赖高亮器（js / ts / python / bash / css / html / json 等 16 种语言） |
| 🎨 **三种视图** | 编辑模式 / 分屏模式 / 预览模式，自由切换 |
| 🌙 **暗色主题** | 一键切换亮色/暗色/暖色主题，偏好自动记忆（MetonaSqlark），编辑器主题同步切换 |
| 🔔 **文件监听** | 外部修改文件时自动提示，支持重新加载或忽略 |
| 💾 **文件保存** | 保存 / 另存为，支持 .md / .markdown / .txt 格式 |
| 🔍 **搜索替换** | Ctrl+F 搜索、Ctrl+H 替换，支持正则表达式、大小写敏感 |
| 🔎 **多文件搜索** | Ctrl+Shift+F 在已打开文件夹内递归搜索内容，结果定位到行 |
| 📁 **文件树** | 侧边栏浏览项目目录，点击打开文件，目录变化自动刷新 |
| 📊 **Mermaid 图表** | 代码块中渲染 Mermaid 流程图 / 时序图 / 甘特图等 |
| 💾 **状态持久化** | 标签页状态、用户设置通过 MetonaSqlark（AriaEngine）持久化，关闭后可恢复 |
| 📦 **数据备份** | 一键导出/导入全部数据为 JSON 文件（MetonaSqlark exportAll/importTable） |
| ⌨️ **快捷键** | 完整的键盘快捷键支持，操作高效 |
| 📦 **NSIS 安装包** | 一键打包为 Windows exe 安装程序 / 便携版 |
| 🖼️ **粘贴图片** | Ctrl+V 粘贴剪贴板图片，自动转为 base64 内嵌 |
| 📝 **文档大纲** | 侧边栏显示当前文档标题结构，点击导航 |
| 🧹 **自动保存** | 文件修改后 2 秒防抖自动保存，可在工具栏开关 |
## 🚀 快速开始
### 环境要求
- **Node.js** >= 18.x
- **npm** >= 9.x
- **Windows** 10/11 x64
### 安装与运行
```bash
# 克隆仓库
git clone https://git.metona.cn/MetonaTeam/MarkLite.git
cd MarkLite
# 安装依赖
npm install
# 启动开发模式（带 HMR 热更新）
npm run dev
```
### 打包为 exe 安装包
```bash
# 打包 Windows x64 NSIS 安装包
npm run build
# 打包为便携版（免安装）
npm run build:portable
```
打包完成后，安装包位于 `dist/` 目录。详见 [DEVSETUP.md](DEVSETUP.md)。
### 其他命令
```bash
# TypeScript 类型检查
npm run typecheck
# ESLint 代码检查
npm run lint
# 运行单元测试
npm run test
# 监听模式运行测试
npm run test:watch
# 生成测试覆盖率报告
npm run test:coverage
```
## 🧪 测试
项目使用 **Vitest** + **React Testing Library** 作为测试框架。
```bash
# 运行全部测试
npm run test
# 监听模式（开发时持续运行）
npm run test:watch
# 生成覆盖率报告
npm run test:coverage
```
测试覆盖以下核心模块：
- `stores/` — Zustand 状态管理（tabStore, editorStore）
- `lib/` — 工具库（fileUtils, markdown, errorHandler）
- `hooks/` — 自定义 Hooks
## ⌨️ 快捷键
| 快捷键 | 功能 |
|:-------|:-----|
| `Ctrl + T` | 新建标签页 |
| `Ctrl + W` | 关闭当前标签页 |
| `Ctrl + Tab` | 切换到下一个标签页（MRU 顺序） |
| `Ctrl + Shift + Tab` | 切换到上一个标签页 |
| `Ctrl + O` | 打开文件 |
| `Ctrl + S` | 保存文件 |
| `Ctrl + Shift + S` | 另存为 |
| `Ctrl + F` | 搜索 |
| `Ctrl + H` | 搜索并替换 |
| `Ctrl + Shift + F` | 多文件搜索（当前文件夹内） |
| `Ctrl + Z` / `Ctrl + Y` | 撤销 / 重做 |
| `Ctrl + B` / `Ctrl + I` | 粗体 / 斜体（编辑器内置） |
| `Ctrl + E` / `Ctrl + K` / `Ctrl + Q` | 行内代码 / 链接 / 引用（编辑器内置） |
| `Ctrl + 1/2/3` | 切换模式（编辑器内置） |
| `?` | 快捷键帮助面板（编辑器内置） |
## 🛠️ 技术栈
| 组件 | 技术 | 说明 |
|:-----|:-----|:-----|
| 桌面框架 | [Electron](https://www.electronjs.org/) v28 | 跨平台桌面应用框架 |
| 前端框架 | [React](https://react.dev/) v18 | 函数组件 + Hooks |
| 类型系统 | [TypeScript](https://www.typescriptlang.org/) v5.6 | 全量类型安全 |
| 编辑器 | [MetonaEditor](https://git.metona.cn/MetonaTeam/MetonaEditor) v0.4.1 | 内置解析器 + 高亮，三模式视图 + 浮动格式栏 + Zen 模式 + 插件系统 |
| 状态管理 | [Zustand](https://zustand-demo.pmnd.rs/) v5 | 轻量级状态管理 |
| 持久化 | [MetonaSqlark](https://git.metona.cn/MetonaTeam/MetonaSqlark) v0.7.4 (AriaEngine + KVStore/OPFS) | 标签页状态 & 用户设置持久化 |
| Markdown 解析 | MetonaEditor 内置解析器 | 零依赖：GFM / 脚注 / 数学公式 / Mermaid |
| 代码高亮 | MetonaEditor 内置高亮器 | 零依赖，16 种语言 |
| Toast | [@metona-team/metona-toast](https://git.metona.cn/MetonaTeam/-/packages/npm/@metona-team%2Fmetona-toast) v0.5.0 | 通知提示组件 |
| 构建工具 | [electron-vite](https://electron-vite.org/) v3 | Electron + Vite 集成，HMR 热更新 |
| 打包工具 | [electron-builder](https://www.electron.build/) | 生成 exe 安装包 |
| 样式 | CSS Variables | 主题驱动，亮色/暗色切换 |
## 📁 项目结构
```
MarkLite/
├── package.json # 项目配置 & 依赖 & electron-builder 打包配置
├── tsconfig.json # TypeScript 配置
├── tsconfig.node.json # Node 端 TypeScript 配置
├── electron.vite.config.ts # electron-vite 构建配置
├── vitest.config.ts # Vitest 测试框架配置
├── eslint.config.mjs # ESLint + TypeScript 规则
├── CONTRIBUTING.md # 贡献指南
│
├── src/
│ ├── main/ # 主进程 (Node.js)
│ │ ├── index.ts # 入口：窗口创建、app 生命周期、单实例锁
│ │ ├── ipc-handlers.ts # 所有 ipcMain.handle 注册
│ │ ├── file-system.ts # 文件读写、目录树构建、BOM 剥离
│ │ ├── file-watcher.ts # fs.watch 封装（单文件 + 目录监听）
│ │ └── window-manager.ts # 窗口创建、关闭拦截、单实例锁
│ │
│ ├── preload/ # 预加载脚本
│ │ └── index.ts # contextBridge 类型安全暴露
│ │
│ ├── renderer/ # 渲染进程 (React 18)
│ │ ├── index.html # 入口 HTML（含 CSP 策略）
│ │ ├── main.tsx # React 入口
│ │ ├── App.tsx # 根组件：布局编排、全局事件
│ │ │
│ │ ├── components/ # UI 组件
│ │ │ ├── Toolbar/ # 工具栏（文件操作、自动保存、主题、关于）
│ │ │ ├── TabBar/ # 标签页栏（含拖拽排序、右键菜单）
│ │ │ ├── Editor/ # MetonaEditor 编辑器集成
│ │ │ ├── Sidebar/ # 侧边栏文件树 + 文档大纲
│ │ │ ├── FileTree/ # 递归文件树
│ │ │ ├── OutlinePanel/ # 文档大纲（活跃标题高亮）
│ │ │ ├── WelcomeScreen/ # 欢迎屏幕（应用图标、最近文件）
│ │ │ ├── ConfirmDialog/ # 确认对话框
│ │ │ ├── ModifiedBanner/ # 文件外部修改提示
│ │ │ ├── DropOverlay/ # 拖拽文件覆盖层
│ │ │ ├── ErrorBoundary/ # 错误边界
│ │ │ ├── AboutDialog/ # 关于对话框
│ │ │ ├── LoadingSpinner/ # 加载指示器
│ │ │ └── Icons.tsx # SVG 图标库
│ │ │
│ │ ├── stores/ # Zustand 状态管理
│ │ │ ├── tabStore.ts # 标签页状态
│ │ │ ├── editorStore.ts # 编辑器状态
│ │ │ ├── sidebarStore.ts # 侧边栏状态
│ │ │ └── autoSaveStore.ts # 自动保存状态
│ │ │
│ │ ├── hooks/ # 自定义 Hooks
│ │ │ ├── useTheme.ts # 暗色/亮色主题
│ │ │ ├── useSettingsInit.ts # 设置初始加载
│ │ │ ├── useKeyboard.ts # 全局快捷键
│ │ │ ├── useDragDrop.ts # 拖拽打开
│ │ │ ├── useFileWatch.ts # 外部修改监听
│ │ │ ├── useUnsavedWarning.ts # 未保存提醒
│ │ │ ├── useAutoSave.ts # 自动保存（Electron IPC）
│ │ │ ├── useAutoExpandDir.ts # 自动展开目录
│ │ │ ├── useActiveHeading.ts # 活跃标题追踪
│ │ │ ├── useDocStats.ts # 文档统计
│ │ │ └── ... # 文件操作、IPC监听等
│ │ │
│ │ ├── lib/ # 工具库
│ │ │ ├── markdown.ts # Markdown 渲染管线（unified/rehype）
│ │ │ ├── fileUtils.ts # 文件工具函数
│ │ │ ├── errorHandler.ts # 错误处理
│ │ │ ├── toast.ts # Toast 通知（MetonaToast）
│ │ │ └── constants.ts # 常量定义
│ │ │
│ │ ├── db/ # MetonaSqlark 持久化层
│ │ │ ├── schema.ts # 数据库定义（懒初始化单例）
│ │ │ ├── tabRepository.ts # 标签页 CRUD
│ │ │ ├── settingsRepository.ts # 设置 CRUD
│ │ │ └── recentFilesRepository.ts # 最近文件
│ │ │
│ │ ├── types/ # TypeScript 类型
│ │ └── styles/ # 全局样式
│ │
│ └── shared/ # 主进程/渲染进程共享
│ ├── ipc-channels.ts # IPC 通道名常量
│ ├── types.ts # 共享类型定义
│ └── constants.ts # 共享常量（版本号等）
│
├── assets/
│ └── icon.ico # 应用图标
├── DESIGN.md # 架构设计文档
├── DEVSETUP.md # 开发环境配置指南
├── LICENSE # MIT 许可证
└── README.md # 本文件
```
## 📝 支持的 Markdown 语法
- ✅ 标题（h1 ~ h6）
- ✅ **粗体** / *斜体* / ~~删除线~~
- ✅ 高亮标记 `==text==` / 上标 `x^2^` / 下标 `H~2~O`
- ✅ 有序列表 / 无序列表
- ✅ 任务列表 `- [x]`
- ✅ 代码块（围栏式 + 语法高亮，180+ 语言）
- ✅ 行内代码
- ✅ 链接 / 图片（支持相对路径、粘贴图片）
- ✅ 表格（含列对齐）
- ✅ 引用块
- ✅ 水平线
- ✅ Emoji 短码 `:smile:` `:rocket:`
- ✅ Mermaid 图表 ` ```mermaid `
- ✅ HTML 内联元素
- ✅ GFM（GitHub Flavored Markdown）
## 🔧 Git Hooks
项目使用 **Husky** + **lint-staged** 自动执行代码检查：
- **pre-commit**: 对暂存的 `.ts/.tsx` 文件运行 ESLint 和 TypeScript 类型检查；对 `.json/.css/.md` 文件运行 Prettier 格式化
```bash
# 初始化 git hooks（npm install 时自动执行）
npm run prepare
```
## 📄 许可证
[MIT License](LICENSE) © 2026 [thzxx](https://git.metona.cn/thzxx)
---
<p align="center">
如果觉得有用，请点个 ⭐ Star 支持一下！
</p>
Reference in New Issue View Git Blame Copy Permalink