Initial commit: MarkLite Markdown Reader

2026-05-18 10:40:11 +08:00
commit fda3e5987d
13 changed files with 2967 additions and 0 deletions
@@ -0,0 +1,157 @@
+# 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