# 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