158 lines
6.2 KiB
Markdown
158 lines
6.2 KiB
Markdown
# MarkLite - 设计文档
|
||
|
||
## 1. 项目概述
|
||
|
||
MarkLite 是一款轻量级的 Windows 本地 Markdown 阅读器桌面应用程序。基于 Electron 框架构建，提供简洁现代的用户界面，支持 Markdown 文件的打开、编辑和实时预览。
|
||
|
||
## 2. 技术架构
|
||
|
||
### 2.1 技术栈
|
||
|
||
| 组件 | 技术选型 | 说明 |
|
||
|------|----------|------|
|
||
| 桌面框架 | Electron | 跨平台桌面应用框架 |
|
||
| 前端 | HTML + CSS + JavaScript | 原生前端技术，无框架依赖 |
|
||
| Markdown解析 | marked.js v12.0.2 | 高性能 Markdown 解析库 |
|
||
| 代码高亮 | highlight.js v11.9.0 | 代码块语法高亮 |
|
||
| 打包 | electron-builder | 生成 Windows exe 安装包 |
|
||
|
||
### 2.2 进程架构
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ Main Process (main.js) │
|
||
│ - 窗口管理 │
|
||
│ - 文件系统操作 (fs) │
|
||
│ - 原生菜单 │
|
||
│ - IPC 通信主端 │
|
||
└──────────────┬──────────────────────────┘
|
||
│ IPC (contextBridge)
|
||
┌──────────────▼──────────────────────────┐
|
||
│ Preload Script (preload.js) │
|
||
│ - 安全的 API 桥接 │
|
||
│ - exposeInMainWorld │
|
||
└──────────────┬──────────────────────────┘
|
||
│
|
||
┌──────────────▼──────────────────────────┐
|
||
│ Renderer Process (renderer/) │
|
||
│ - UI 渲染 │
|
||
│ - Markdown 编辑与预览 │
|
||
│ - 拖拽文件处理 │
|
||
│ - 快捷键处理 │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
## 3. 功能设计
|
||
|
||
### 3.1 核心功能
|
||
|
||
1. **文件打开**
|
||
- 菜单栏 → 文件 → 打开（支持 .md / .txt / .markdown）
|
||
- 拖拽文件到窗口打开
|
||
- 支持 Windows 文件关联（双击 .md 文件打开）
|
||
|
||
2. **文件保存**
|
||
- Ctrl+S 快捷键保存
|
||
- 菜单栏 → 文件 → 保存
|
||
- 另存为功能
|
||
|
||
3. **实时预览**
|
||
- 左侧编辑器 + 右侧预览（默认模式）
|
||
- 纯预览模式（隐藏编辑器）
|
||
- 编辑时实时更新预览
|
||
|
||
4. **视图模式**
|
||
- 编辑+预览（Split View）
|
||
- 纯编辑模式
|
||
- 纯预览模式
|
||
|
||
### 3.2 UI 设计
|
||
|
||
#### 色彩方案
|
||
- **主色调**: #1a73e8（蓝色）
|
||
- **背景色**: #ffffff（白色）
|
||
- **侧边栏**: #f8f9fa（浅灰）
|
||
- **文字色**: #333333（深灰）
|
||
- **代码块背景**: #f6f8fa
|
||
- **边框色**: #e1e4e8
|
||
|
||
#### 字体
|
||
- **UI字体**: system-ui, -apple-system, "Segoe UI", sans-serif
|
||
- **编辑器字体**: "Cascadia Code", "Fira Code", "Consolas", monospace
|
||
- **预览字体**: system-ui, -apple-system, "Segoe UI", sans-serif
|
||
|
||
#### 布局
|
||
```
|
||
┌──────────────────────────────────────────────┐
|
||
│ 📄 MarkLite - filename.md ─ □ ✕ │
|
||
├──────────────────────────────────────────────┤
|
||
│ 📁 打开 │ 💾 保存 │ 📝 编辑 │ 👁 预览 │ 分屏 │
|
||
├─────────────────┬────────────────────────────┤
|
||
│ │ │
|
||
│ Editor Area │ Preview Area │
|
||
│ │ │
|
||
│ │ │
|
||
│ │ │
|
||
│ │ │
|
||
│ │ │
|
||
├─────────────────┴────────────────────────────┤
|
||
│ 就绪 │ UTF-8 │ Markdown │ 行: 1, 列: 1 │
|
||
└──────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 4. 文件结构
|
||
|
||
```
|
||
MarkLite/
|
||
├── package.json # 项目配置与依赖
|
||
├── main.js # Electron 主进程
|
||
├── preload.js # 预加载脚本（IPC 桥接）
|
||
├── renderer/
|
||
│ ├── index.html # 主页面
|
||
│ ├── style.css # 样式表
|
||
│ └── renderer.js # 渲染进程逻辑
|
||
├── lib/
|
||
│ ├── marked.min.js # Markdown 解析库
|
||
│ ├── highlight.min.js # 代码高亮库
|
||
│ └── highlight-github.css # 代码高亮主题
|
||
├── assets/
|
||
│ └── icon.ico # 应用图标
|
||
├── DESIGN.md # 设计文档（本文件）
|
||
├── README.md # 项目说明
|
||
└── .gitignore # Git 忽略文件
|
||
```
|
||
|
||
## 5. IPC 通信设计
|
||
|
||
| 通道 | 方向 | 说明 |
|
||
|------|------|------|
|
||
| `dialog:openFile` | Renderer → Main | 打开文件对话框 |
|
||
| `file:read` | Renderer → Main | 读取文件内容 |
|
||
| `file:save` | Renderer → Main | 保存文件内容 |
|
||
| `file:saveAs` | Renderer → Main | 另存为 |
|
||
| `menu:action` | Main → Renderer | 菜单操作通知 |
|
||
| `window:setTitle` | Renderer → Main | 设置窗口标题 |
|
||
|
||
## 6. Markdown 渲染支持
|
||
|
||
支持标准 Markdown 和 GFM（GitHub Flavored Markdown）：
|
||
- 标题（h1-h6）
|
||
- 段落、换行
|
||
- **粗体**、*斜体*、~~删除线~~
|
||
- 有序/无序列表
|
||
- 任务列表（- [x]）
|
||
- 代码块（围栏式 + 缩进式）
|
||
- 行内代码
|
||
- 链接、图片
|
||
- 表格
|
||
- 引用块
|
||
- 水平线
|
||
- HTML 内联
|
||
|
||
## 7. 构建与发布
|
||
|
||
使用 `electron-builder` 打包：
|
||
- 输出格式：NSIS 安装包（.exe）
|
||
- 目标平台：Windows x64
|
||
- 应用图标：assets/icon.ico
|