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

release: v0.4.0 — MetonaEditor 集成与架构重构

Browse Source 
feat(editor): 将 Milkdown/ProseMirror 替换为 @metona-team/metona-editor v0.1.3
  - 三模式视图 (edit/split/preview) 由编辑器内置工具栏切换
  - searchReplace + imagePaste 预设插件
  - unified/rehype 渲染管线通过 render 钩子集成
  - 主题双向同步 (应用暗色模式 ↔ 编辑器主题)

feat(toast): metona-toast 迁移为 @metona-team/metona-toast v2.0.1

refactor: 删除冗余组件与代码
  - 移除 SourceEditor、Preview、SearchReplace、EditorToolbar、useMilkdown
  - 移除 StatusBar 组件及状态栏扩展架构（编辑器内置底栏替代）
  - 移除 useSettings、useStatusBarItem、useStatusBarItems、statusBarStore
  - 移除 EditMode/PreviewMode/SourceMode 图标

refactor(ui): 简化布局
  - 工具栏移除模式切换按钮，新增自动保存开关
  - useKeyboard 移除 Ctrl+1/2/3/B/I 快捷键
  - Editor 三模式统一由 MetonaEditor 容器渲染

chore: 版本号 v0.3.13 → v0.4.0
docs: 全面更新 README/DESIGN/CONTRIBUTING/DEVSETUP
This commit is contained in:
thzxx
2026-07-23 22:55:45 +08:00
parent 43b0778849
commit 05e5667e48
33 changed files with 460 additions and 4335 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+35 -37
View File
@@ -14,7 +14,7 @@
<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.3.13-orange?style=flat-square" alt="Version">
<img src="https://img.shields.io/badge/Version-v0.4.0-orange?style=flat-square" alt="Version">
</p>
<p align="center">
@@ -30,18 +30,21 @@
|------|------|
| 📑 **多标签页** | 同时打开多个文件，Ctrl+T 新建、Ctrl+W 关闭、Ctrl+Tab MRU 切换 |
| 📂 **文件打开** | 按钮打开 / 拖拽打开 / 文件关联（双击 .md） / 命令行参数 |
| ✏️ **双编辑模式** | Milkdown WYSIWYG 编辑器（格式化工具栏/搜索替换/正则/自动配对）+ 源码模式（textarea）|
| 👁 **实时预览** | 右侧预览面板，基于 unified/rehype 管线渲染，编辑即更新 |
| ✏️ **编辑器** | 基于 MetonaEditor 的代码+预览编辑器，内置格式化工具栏、三模式切换（编辑/分屏/预览）、搜索替换、撤销重做、粘贴图片转 base64 |
| 👁 **实时预览** | 分屏模式下左侧编辑、右侧实时预览，基于 unified/rehype 管线渲染 |
| 🔤 **代码高亮** | 基于 rehype-highlight，支持 180+ 种编程语言语法高亮 |
| 🎨 **两种视图** | 编辑模式 / 预览模式，自由切换 |
| 🌙 **暗色主题** | 一键切换亮色/暗色主题，偏好自动记忆（IndexedDB） |
| 🎨 **三种视图** | 编辑模式 / 分屏模式 / 预览模式，自由切换 |
| 🌙 **暗色主题** | 一键切换亮色/暗色主题，偏好自动记忆（IndexedDB），编辑器主题同步切换 |
| 🔔 **文件监听** | 外部修改文件时自动提示，支持重新加载或忽略 |
| 💾 **文件保存** | 保存 / 另存为，支持 .md / .markdown / .txt 格式 |
| 🔍 **搜索替换** | Ctrl+F 搜索、Ctrl+H 替换，支持高亮匹配、大小写、正则表达式 |
| 🔍 **搜索替换** | Ctrl+F 搜索、Ctrl+H 替换，支持正则表达式、大小写敏感 |
| 📁 **文件树** | 侧边栏浏览项目目录，点击打开文件，目录变化自动刷新 |
| 💾 **状态持久化** | 标签页状态、用户设置通过 IndexedDB 持久化，关闭后可恢复 |
| ⌨️ **快捷键** | 完整的键盘快捷键支持，操作高效 |
| 📦 **NSIS 安装包** | 一键打包为 Windows exe 安装程序 / 便携版 |
| 🖼️ **粘贴图片** | Ctrl+V 粘贴剪贴板图片，自动转为 base64 内嵌 |
| 📝 **文档大纲** | 侧边栏显示当前文档标题结构，点击导航 |
| 🧹 **自动保存** | 文件修改后 2 秒防抖自动保存，可在工具栏开关 |
## 🚀 快速开始
@@ -116,8 +119,6 @@ npm run test:coverage
- `lib/` — 工具库（fileUtils, markdown, errorHandler）
- `hooks/` — 自定义 Hooks
测试文件位于对应模块的 `__tests__/` 目录下，命名格式为 `*.test.ts`。
## ⌨️ 快捷键
| 快捷键 | 功能 |
@@ -129,15 +130,11 @@ npm run test:coverage
| `Ctrl + O` | 打开文件 |
| `Ctrl + S` | 保存文件 |
| `Ctrl + Shift + S` | 另存为 |
| `Ctrl + 1` | 编辑模式 |
| `Ctrl + 2` | 预览模式 |
| `Ctrl + 3` | 源码模式 |
| `Ctrl + F` | 搜索 |
| `Ctrl + H` | 搜索并替换 |
| `Ctrl + B` | 粗体 |
| `Ctrl + I` | 斜体 |
| `Enter` / `Shift+Enter` | 下一个 / 上一个匹配 |
| `Esc` | 关闭搜索栏 |
| `Ctrl + Z` / `Ctrl + Y` | 撤销 / 重做 |
| `Ctrl + B` / `Ctrl + I` | 粗体 / 斜体（编辑器内置） |
| `Ctrl + 1/2/3` | 切换模式（编辑器内置） |
## 🛠️ 技术栈
@@ -146,11 +143,12 @@ npm run test:coverage
| 桌面框架 | [Electron](https://www.electronjs.org/) v28 | 跨平台桌面应用框架 |
| 前端框架 | [React](https://react.dev/) v18 | 函数组件 + Hooks |
| 类型系统 | [TypeScript](https://www.typescriptlang.org/) v5.6 | 全量类型安全 |
| 编辑器 | [Milkdown](https://milkdown.dev/) v7 | WYSIWYG 编辑器 + 源码模式 |
| 编辑器 | [MetonaEditor](https://git.metona.cn/MetonaTeam/MetonaEditor) v0.1.3 | 零依赖 Markdown 编辑器，三模式视图 + 插件系统 |
| 状态管理 | [Zustand](https://zustand-demo.pmnd.rs/) v5 | 轻量级状态管理 |
| 持久化 | [Dexie.js](https://dexie.org/) v4 (IndexedDB) | 标签页状态 & 用户设置持久化 |
| Markdown 解析 | [unified](https://unifiedjs.com/) / [remark](https://remark.js.org/) / [rehype](https://rehype.js.org/) | 插件化 Markdown 渲染管线 |
| 代码高亮 | [rehype-highlight](https://github.com/rehypejs/rehype-highlight) | 基于 highlight.js 的语法高亮 |
| Toast | [@metona-team/metona-toast](https://git.metona.cn/MetonaTeam/-/packages/npm/@metona-team%2Fmetona-toast) v2.0.1 | 通知提示组件 |
| 构建工具 | [electron-vite](https://electron-vite.org/) v3 | Electron + Vite 集成，HMR 热更新 |
| 打包工具 | [electron-builder](https://www.electron.build/) | 生成 exe 安装包 |
| 样式 | CSS Variables | 主题驱动，亮色/暗色切换 |
@@ -164,7 +162,7 @@ MarkLite/
├── tsconfig.node.json # Node 端 TypeScript 配置
├── electron.vite.config.ts # electron-vite 构建配置
├── vitest.config.ts # Vitest 测试框架配置
├── .eslintrc.cjs # ESLint + TypeScript 规则
├── eslint.config.mjs # ESLint + TypeScript 规则
├── CONTRIBUTING.md # 贡献指南
│
├── src/
@@ -183,19 +181,14 @@ MarkLite/
│ │ ├── main.tsx # React 入口
│ │ ├── App.tsx # 根组件：布局编排、全局事件
│ │ │
│ │ ├── components/ # UI 组件 (23个)
│ │ │ ├── Toolbar/ # 工具栏
│ │ │ ├── TabBar/ # 标签页栏 (含拖拽排序)
│ │ │ ├── Editor/ # Milkdown 编辑器 + 工具栏
│ │ │ ├── Preview/ # Markdown 预览面板
│ │ │ ├── SourceEditor/ # 源码编辑模式 (textarea)
│ │ │ ├── Sidebar/ # 侧边栏文件树
│ │ ├── components/ # UI 组件
│ │ │ ├── Toolbar/ # 工具栏（文件操作、自动保存、主题、关于）
│ │ │ ├── TabBar/ # 标签页栏（含拖拽排序、右键菜单）
│ │ │ ├── Editor/ # MetonaEditor 编辑器集成
│ │ │ ├── Sidebar/ # 侧边栏文件树 + 文档大纲
│ │ │ ├── FileTree/ # 递归文件树
│ │ │ ├── OutlinePanel/ # 文档大纲 (活跃标题高亮)
│ │ │ ├── StatusBar/ # 状态栏 (自动保存开关)
│ │ │ ├── SearchReplace/ # 搜索替换面板 (支持正则)
│ │ │ ├── WelcomeScreen/ # 欢迎屏幕
│ │ │ ├── Toast/ # Toast 通知
│ │ │ ├── OutlinePanel/ # 文档大纲（活跃标题高亮）
│ │ │ ├── WelcomeScreen/ # 欢迎屏幕（应用图标、最近文件）
│ │ │ ├── ConfirmDialog/ # 确认对话框
│ │ │ ├── ModifiedBanner/ # 文件外部修改提示
│ │ │ ├── DropOverlay/ # 拖拽文件覆盖层
@@ -207,25 +200,27 @@ MarkLite/
│ │ ├── stores/ # Zustand 状态管理
│ │ │ ├── tabStore.ts # 标签页状态
│ │ │ ├── editorStore.ts # 编辑器状态
│ │ │ └── sidebarStore.ts # 侧边栏状态
│ │ │ ├── sidebarStore.ts # 侧边栏状态
│ │ │ └── autoSaveStore.ts # 自动保存状态
│ │ │
│ │ ├── hooks/ # 自定义 Hooks (19个)
│ │ ├── hooks/ # 自定义 Hooks
│ │ │ ├── useTheme.ts # 暗色/亮色主题
│ │ │ ├── useSettings.ts # 视图模式
│ │ │ ├── useSettingsInit.ts # 设置初始加载
│ │ │ ├── useKeyboard.ts # 全局快捷键
│ │ │ ├── useDragDrop.ts # 拖拽打开
│ │ │ ├── useFileWatch.ts # 外部修改监听
│ │ │ ├── useUnsavedWarning.ts # 未保存提醒
│ │ │ ├── useAutoSave.ts # 自动保存
│ │ │ ├── useAutoSave.ts # 自动保存（Electron IPC）
│ │ │ ├── useAutoExpandDir.ts # 自动展开目录
│ │ │ ├── useActiveHeading.ts # 活跃标题追踪
│ │ │ ├── useDocStats.ts # 文档统计
│ │ │ └── ... # 文件操作、IPC监听等
│ │ │
│ │ ├── lib/ # 工具库
│ │ │ ├── markdown.ts # Markdown 渲染管线
│ │ │ ├── markdown.ts # Markdown 渲染管线（unified/rehype）
│ │ │ ├── fileUtils.ts # 文件工具函数
│ │ │ ├── errorHandler.ts # 错误处理
│ │ │ ├── toast.ts # Toast 通知（MetonaToast）
│ │ │ └── constants.ts # 常量定义
│ │ │
│ │ ├── db/ # IndexedDB 持久化层
@@ -239,7 +234,8 @@ MarkLite/
│ │
│ └── shared/ # 主进程/渲染进程共享
│ ├── ipc-channels.ts # IPC 通道名常量
│ └── types.ts # 共享类型定义
│ ├── types.ts # 共享类型定义
│ └── constants.ts # 共享常量（版本号等）
│
├── assets/
│ └── icon.ico # 应用图标
@@ -253,14 +249,16 @@ MarkLite/
- ✅ 标题（h1 ~ h6）
- ✅ **粗体** / *斜体* / ~~删除线~~
- ✅ 高亮标记 `==text==` / 上标 `x^2^` / 下标 `H~2~O`
- ✅ 有序列表 / 无序列表
- ✅ 任务列表 `- [x]`
- ✅ 代码块（围栏式 + 语法高亮，180+ 语言）
- ✅ 行内代码
- ✅ 链接 / 图片（支持相对路径）
- ✅ 表格
- ✅ 链接 / 图片（支持相对路径、粘贴图片）
- ✅ 表格（含列对齐）
- ✅ 引用块
- ✅ 水平线
- ✅ Emoji 短码 `:smile:` `:rocket:`
- ✅ HTML 内联元素
- ✅ GFM（GitHub Flavored Markdown）