MarkLite/DESIGN.md

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