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

release: v0.6.0 — 内置解析器迁移 / Toast 全面接入 / Sqlark 深度集成

Browse Source 
- 渲染管线迁移至 MetonaEditor 内置解析器，移除 unified/rehype 全家桶（9 个依赖）
- 修复相对路径图片修复的目录前缀碰撞与路径解析 bug
- ConfirmDialog/useConfirm/LoadingSpinner/useDocStats 移除，改用 MeToast.confirm/loading/promise
- 新增状态栏（字数/行数/阅读时间/光标位置）、Zen 模式、数据备份导出导入
- Sqlark: 版本化迁移（addMigration/migrateTo）、subscribe 表变更、备份 exportAll/importTable
- 数据库损坏自愈：异常退出残留残缺 SSTable 导致打开失败时自动重建
- 大纲导航改用 scrollToLine 官方 API
- 修复 rollup 平台包互删（postinstall 自动补齐）+ 集成测试（fake-indexeddb）
This commit is contained in:
thzxx
2026-08-09 16:50:06 +08:00
parent 20eb39efc5
commit ee5f35177e
71 changed files with 4837 additions and 4345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.tscheck/corrupt.mjs
+34
View File
@@ -0,0 +1,34 @@
import 'fake-indexeddb/auto'
import { create } from '/mnt/d/CodeWorkspace/MarkLite/node_modules/@metona-team/metona-sqlark/dist/metona-sqlark.esm.js'
const DB = 'aria-corrupt-test'
// 1. 正常建库写数据
const db1 = await create({ name: 'corrupt-test', mode: 'aria', diskEngine: 'indexeddb', version: 0 })
await db1.defineTable('recentFiles', { filePath: { type: 'string', primaryKey: true }, lastOpened: { type: 'number' } })
await db1.table('recentFiles').insert({ filePath: '/a.md', lastOpened: 1 })
await db1.close()
// 2. 模拟异常退出留下的残缺 SSTable 页面：直接往 IDB 写一个 10 字节的 pg_ 文件
await new Promise((resolve, reject) => {
const req = indexedDB.open(DB, 1)
req.onsuccess = () => {
const idb = req.result
const tx = idb.transaction('data', 'readwrite')
tx.objectStore('data').put(new ArrayBuffer(10), 'pg_1') // 残缺页面（正常 4096 字节）
tx.oncomplete = () => { idb.close(); resolve() }
tx.onerror = () => reject(tx.error)
}
req.onerror = () => reject(req.error)
})
// 3. 重新打开 → 应该抛 offset is out of bounds
try {
const db2 = await create({ name: 'corrupt-test', mode: 'aria', diskEngine: 'indexeddb', version: 0 })
const rows = await db2.table('recentFiles').select().execute()
console.log('S2 opened OK, rows:', JSON.stringify(rows))
await db2.close()
console.log('NO ERROR — 未能复现')
} catch (e) {
console.log('REPRODUCED:', e.constructor.name, '|', e.message)
}
.tscheck/heal.mjs
+41
View File
@@ -0,0 +1,41 @@
import 'fake-indexeddb/auto'
import { create } from '/mnt/d/CodeWorkspace/MarkLite/node_modules/@metona-team/metona-sqlark/dist/metona-sqlark.esm.js'
const DB = 'aria-heal-test'
// 1. 正常建库写数据
const db1 = await create({ name: 'heal-test', mode: 'aria', diskEngine: 'indexeddb', version: 0 })
await db1.defineTable('recentFiles', { filePath: { type: 'string', primaryKey: true }, lastOpened: { type: 'number' } })
await db1.table('recentFiles').insert({ filePath: '/a.md', lastOpened: 1 })
await db1.close()
// 2. 制造损坏：写一个 footer 声称块偏移在 100000 的残缺 sst 文件（data store 里直接塞坏数据）
await new Promise((resolve, reject) => {
const req = indexedDB.open(DB, 1)
req.onsuccess = () => {
const idb = req.result
const tx = idb.transaction('data', 'readwrite')
const store = tx.objectStore('data')
// 残缺 sst：8 字节（正常是 4096 块），meta 记录会声称偏移 4096+
store.put(new ArrayBuffer(8), 'sst_1')
tx.oncomplete = () => { idb.close(); resolve() }
tx.onerror = () => reject(tx.error)
}
req.onerror = () => reject(req.error)
})
// 3. 删除损坏库（模拟自愈，无活动连接时应该成功）
await new Promise((resolve) => {
const req = indexedDB.deleteDatabase(DB)
req.onsuccess = () => { console.log('deleteDatabase OK'); resolve() }
req.onerror = () => { console.log('deleteDatabase error'); resolve() }
req.onblocked = () => { console.log('deleteDatabase BLOCKED'); resolve() }
})
// 4. 重建库成功
const db2 = await create({ name: 'heal-test', mode: 'aria', diskEngine: 'indexeddb', version: 0 })
await db2.defineTable('recentFiles', { filePath: { type: 'string', primaryKey: true }, lastOpened: { type: 'number' } })
await db2.table('recentFiles').insert({ filePath: '/new.md', lastOpened: 2 })
console.log('rebuilt rows:', JSON.stringify(await db2.table('recentFiles').select().execute()))
await db2.close()
console.log('HEAL OK')
DESIGN.md
+33 -44
View File
@@ -2,13 +2,13 @@
## 1. 项目概述 ## 1. 项目概述
MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程序。基于 Electron + React + TypeScript 构建，采用 MetonaEditor v0.1.14 编辑器（三模式视图 + 插件系统）、Zustand 状态管理、IndexedDB 持久化、unified/rehype Markdown 渲染管线。 MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程序。基于 Electron + React + TypeScript 构建，采用 MetonaEditor v0.4.0 编辑器（三模式视图 + 内置解析器 + 插件系统）、Zustand 状态管理、MetonaSqlark（AriaEngine）持久化。
### 1.1 核心原则 ### 1.1 核心原则
1. **类型安全** — 全量 TypeScript，所有 IPC 通信、状态、接口均有类型定义 1. **类型安全** — 全量 TypeScript，所有 IPC 通信、状态、接口均有类型定义
2. **模块化** — 源文件按职责分层：主进程 / 预加载 / 渲染进程（组件 / stores / hooks / lib / db / types） 2. **模块化** — 源文件按职责分层：主进程 / 预加载 / 渲染进程（组件 / stores / hooks / lib / db / types）
3. **安全隔离** — contextIsolation + nodeIntegration:false + CSP + rehype-sanitize 3. **安全隔离** — contextIsolation + nodeIntegration:false + CSP + 内置解析器 XSS 防护
4. **可测试性** — 业务逻辑（lib/）与 UI（components/）解耦 4. **可测试性** — 业务逻辑（lib/）与 UI（components/）解耦
## 2. 技术架构 ## 2. 技术架构
@@ -23,8 +23,8 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
| 编辑器 | MetonaEditor | v0.4.0 | 零依赖 Markdown 编辑器，三模式视图 + 插件系统 | | 编辑器 | MetonaEditor | v0.4.0 | 零依赖 Markdown 编辑器，三模式视图 + 插件系统 |
| 状态管理 | Zustand | v5 | 轻量级状态管理 | | 状态管理 | Zustand | v5 | 轻量级状态管理 |
| 持久化 | MetonaSqlark (IndexedDB) | v0.4.1 | 标签页状态 / 用户设置 / 最近文件（AriaEngine） | | 持久化 | MetonaSqlark (IndexedDB) | v0.4.1 | 标签页状态 / 用户设置 / 最近文件（AriaEngine） |
| Markdown 解析 | unified / remark / rehype | v11 | 插件化渲染管线（作为 MetonaEditor render 钩子） | | Markdown 解析 | MetonaEditor 内置解析器 | v0.4.0 | 零依赖，GFM + 脚注 + 数学公式 + mermaid |
| 代码高亮 | rehype-highlight | v7 | 基于 highlight.js | | 代码高亮 | MetonaEditor 内置高亮器 | v0.4.0 | 零依赖，16 种语言 |
| Toast | @metona-team/metona-toast | v0.5.0 | 通知提示组件 | | Toast | @metona-team/metona-toast | v0.5.0 | 通知提示组件 |
| 构建工具 | electron-vite | v3 | Electron + Vite，HMR 热更新 | | 构建工具 | electron-vite | v3 | Electron + Vite，HMR 热更新 |
| 打包工具 | electron-builder | v25 | Windows NSIS 安装包 | | 打包工具 | electron-builder | v25 | Windows NSIS 安装包 |
@@ -86,7 +86,7 @@ MarkLite 是一款轻量级的 Windows 本地 Markdown 编辑器桌面应用程
| Electron | `nodeIntegration: false` | 渲染进程无法访问 Node.js API | | Electron | `nodeIntegration: false` | 渲染进程无法访问 Node.js API |
| IPC | `contextBridge.exposeInMainWorld` | 仅暴露 18 个类型安全方法 + 4 个事件订阅 | | IPC | `contextBridge.exposeInMainWorld` | 仅暴露 18 个类型安全方法 + 4 个事件订阅 |
| CSP | `default-src 'self'; script-src 'self'` | 阻断内联脚本、外部资源 | | CSP | `default-src 'self'; script-src 'self'` | 阻断内联脚本、外部资源 |
| HTML | `rehype-sanitize` | 渲染 Markdown 时过滤危险标签/属性 | | HTML | `MetonaEditor 内置解析器` | 渲染 Markdown（escapeHTML + safeUrl XSS 防护） |
| 链接 | 协议白名单 | 仅允许 `http:` / `https:` / `#` 锚点 | | 链接 | 协议白名单 | 仅允许 `http:` / `https:` / `#` 锚点 |
| 路径 | `validatePath()` | 防止路径遍历攻击 | | 路径 | `validatePath()` | 防止路径遍历攻击 |
@@ -265,26 +265,27 @@ MetonaEditor 内置模式切换工具栏，与应用层的 viewMode store 双向
### 6.4 渲染管线集成 ### 6.4 渲染管线集成
通过 MetonaEditor 的 `render` 钩子接入 unified/rehype 管线，实现： v0.6.0: 移除 unified/remark/rehype 自研管线，改用 MetonaEditor **内置解析器**（parseMarkdown），
通过 `render` 钩子接入，实现：
- **相对路径图片解析**：将相对路径转换为 `file://` 绝对路径 - **相对路径图片解析**：内置解析器的 safeUrl 会过滤 `file:` 协议，因此渲染后做 HTML 后处理，将相对路径图片 src 转换为 `file://` 绝对路径（越界路径保持原样）
- **XSS 防护**：rehype-sanitize 过滤危险标签 - **XSS 防护**：内置 escapeHTML + safeUrl（过滤 javascript:/vbscript:/file:/data:）+ 属性转义
- **代码高亮**：rehype-highlight 语法高亮 - **代码高亮**：内置零依赖高亮器（`highlight: MeEditor.highlight`，16 种语言）
- **处理器缓存**：LRU 缓存（最多 20 个），按文件路径分桶 - **Mermaid 图表**：内置解析器原生输出 `.me-mermaid` 容器，`mermaid.run()` 直接渲染
``` ```
Markdown 源码 Markdown 源码
│ │
▼ ▼
unified 管线（renderMarkdownSync） parseMarkdown（MetonaEditor 内置解析器）
├── remark-parse 解析为 MDAST ├── GFM / 任务列表 / 表格 / 删除线
├── remark-gfm GFM 扩展 ├── 脚注 / 数学公式 / 定义列表 / emoji
├── remark-rehype 转换为 HAST ├── 引用链接 / 自动链接 / 上下标
├── rehype-raw 解析内联 HTML ├── mermaid → <div class="me-mermaid">…
├── rehype-sanitize 安全过滤 └── XSS 防护（escapeHTML + safeUrl）
├── rehype-fixImages 相对路径 → file:// │
├── rehype-highlight 代码高亮 ▼
└── rehype-stringify 序列化为 HTML fixImageSrcs（HTML 后处理：相对路径 → file://）
│ │
▼ ▼
MetonaEditor 预览区渲染 MetonaEditor 预览区渲染
@@ -306,35 +307,24 @@ MetonaEditor 的 CSS 样式通过 wrapper 元素上的 inline `--md-*` CSS 变
## 7. Markdown 渲染管线 ## 7. Markdown 渲染管线
v0.6.0: 渲染完全由 MetonaEditor 内置解析器承担（零依赖），应用侧仅保留图片路径修复后处理：
``` ```
Markdown 文本 Markdown 文本
│ │
▼ ▼
remark-parse 解析为 MDAST parseMarkdown（MetonaEditor 内置解析器）
├── 块级：标题 / 列表 / 引用 / 代码块 / 表格 / 水平线 / 脚注 / 数学公式 / 定义列表
├── 行内：粗体 / 斜体 / 删除线 / 高亮 / 上下标 / 行内代码 / 链接 / 图片 / emoji
├── mermaid：<div class="me-mermaid"><pre class="mermaid">…
└── 安全：escapeHTML 转义 + safeUrl URL 过滤 + 属性级注入防护
│ │
▼ ▼
remark-gfm 扩展 GFM 语法 fixImageSrcs（markdown.ts 后处理）
└── 相对路径图片 src → file:// 绝对路径（越界 ../ 不处理）
│ │
▼ ▼
remark-rehype 转换为 HAST MetonaEditor 预览区 / getHTML 导出
│
▼
rehype-raw 解析内联 HTML
│
▼
rehype-sanitize 安全过滤
│
▼
rehype-fixImages 相对路径图片转 file:// URL
│
▼
rehype-highlight 代码语法高亮
│
▼
rehype-stringify 序列化为 HTML
│
▼
Renderer (MetonaEditor preview / Preview component)
``` ```
## 8. UI 设计 ## 8. UI 设计
@@ -415,12 +405,11 @@ npm run build:portable # 便携版（免安装）
|------|------|------| |------|------|------|
| react / react-dom | ^18.3 | UI 框架 | | react / react-dom | ^18.3 | UI 框架 |
| zustand | ^5.0 | 状态管理 | | zustand | ^5.0 | 状态管理 |
| @metona-team/metona-sqlark | 0.4.1 | 前端关系型数据库（IndexedDB） | | @metona-team/metona-sqlark | 0.4.1 | 前端关系型数据库（AriaEngine） |
| nanoid | ^5.0 | 唯一 ID 生成 | | nanoid | ^5.0 | 唯一 ID 生成 |
| @metona-team/metona-editor | 0.4.0 | Markdown 编辑器（零依赖） | | @metona-team/metona-editor | 0.4.0 | Markdown 编辑器（内置解析器 + 高亮） |
| @metona-team/metona-toast | 0.5.0 | Toast 通知组件 | | @metona-team/metona-toast | 0.5.0 | Toast 通知组件 |
| unified / remark / rehype | ^11.0 | Markdown 渲染管线 | | mermaid | ^10.9 | Mermaid 图表渲染 |
| rehype-highlight | ^7.0 | 代码语法高亮 |
### 开发依赖 ### 开发依赖
README.md
+8 -6
View File
@@ -30,9 +30,9 @@
|------|------| |------|------|
| 📑 **多标签页** | 同时打开多个文件，Ctrl+T 新建、Ctrl+W 关闭、Ctrl+Tab MRU 切换 | | 📑 **多标签页** | 同时打开多个文件，Ctrl+T 新建、Ctrl+W 关闭、Ctrl+Tab MRU 切换 |
| 📂 **文件打开** | 按钮打开 / 拖拽打开 / 文件关联（双击 .md） / 命令行参数 | | 📂 **文件打开** | 按钮打开 / 拖拽打开 / 文件关联（双击 .md） / 命令行参数 |
| ✏️ **编辑器** | 基于 MetonaEditor 的代码+预览编辑器，内置格式化工具栏、浮动格式栏、三模式切换（编辑/分屏/预览）、搜索替换、撤销重做、粘贴图片转 base64 | | ✏️ **编辑器** | 基于 MetonaEditor 的代码+预览编辑器，内置解析器渲染、格式化工具栏、浮动格式栏、三模式切换（编辑/分屏/预览）、搜索替换、撤销重做、Zen 专注模式、粘贴图片转 base64 |
| 👁 **实时预览** | 分屏模式下左侧编辑、右侧实时预览，基于 unified/rehype 管线渲染 | | 👁 **实时预览** | 分屏模式下左侧编辑、右侧实时预览，MetonaEditor 内置解析器渲染 |
| 🔤 **代码高亮** | 基于 rehype-highlight，支持 180+ 种编程语言语法高亮 | | 🔤 **代码高亮** | MetonaEditor 内置零依赖高亮器（js / ts / python / bash / css / html / json 等 16 种语言） |
| 🎨 **三种视图** | 编辑模式 / 分屏模式 / 预览模式，自由切换 | | 🎨 **三种视图** | 编辑模式 / 分屏模式 / 预览模式，自由切换 |
| 🌙 **暗色主题** | 一键切换亮色/暗色/暖色主题，偏好自动记忆（MetonaSqlark），编辑器主题同步切换 | | 🌙 **暗色主题** | 一键切换亮色/暗色/暖色主题，偏好自动记忆（MetonaSqlark），编辑器主题同步切换 |
| 🔔 **文件监听** | 外部修改文件时自动提示，支持重新加载或忽略 | | 🔔 **文件监听** | 外部修改文件时自动提示，支持重新加载或忽略 |
@@ -40,7 +40,9 @@
| 🔍 **搜索替换** | Ctrl+F 搜索、Ctrl+H 替换，支持正则表达式、大小写敏感 | | 🔍 **搜索替换** | Ctrl+F 搜索、Ctrl+H 替换，支持正则表达式、大小写敏感 |
| 📁 **文件树** | 侧边栏浏览项目目录，点击打开文件，目录变化自动刷新 | | 📁 **文件树** | 侧边栏浏览项目目录，点击打开文件，目录变化自动刷新 |
| 📊 **Mermaid 图表** | 代码块中渲染 Mermaid 流程图 / 时序图 / 甘特图等 | | 📊 **Mermaid 图表** | 代码块中渲染 Mermaid 流程图 / 时序图 / 甘特图等 |
| 📋 **状态栏** | 实时显示文档字数 / 行数 / 阅读时间 / 光标位置 / 自动保存状态 |
| 💾 **状态持久化** | 标签页状态、用户设置通过 MetonaSqlark（AriaEngine）持久化，关闭后可恢复 | | 💾 **状态持久化** | 标签页状态、用户设置通过 MetonaSqlark（AriaEngine）持久化，关闭后可恢复 |
| 📦 **数据备份** | 一键导出/导入全部数据为 JSON 文件（MetonaSqlark exportAll/importTable） |
| ⌨️ **快捷键** | 完整的键盘快捷键支持，操作高效 | | ⌨️ **快捷键** | 完整的键盘快捷键支持，操作高效 |
| 📦 **NSIS 安装包** | 一键打包为 Windows exe 安装程序 / 便携版 | | 📦 **NSIS 安装包** | 一键打包为 Windows exe 安装程序 / 便携版 |
| 🖼️ **粘贴图片** | Ctrl+V 粘贴剪贴板图片，自动转为 base64 内嵌 | | 🖼️ **粘贴图片** | Ctrl+V 粘贴剪贴板图片，自动转为 base64 内嵌 |
@@ -146,11 +148,11 @@ npm run test:coverage
| 桌面框架 | [Electron](https://www.electronjs.org/) v28 | 跨平台桌面应用框架 | | 桌面框架 | [Electron](https://www.electronjs.org/) v28 | 跨平台桌面应用框架 |
| 前端框架 | [React](https://react.dev/) v18 | 函数组件 + Hooks | | 前端框架 | [React](https://react.dev/) v18 | 函数组件 + Hooks |
| 类型系统 | [TypeScript](https://www.typescriptlang.org/) v5.6 | 全量类型安全 | | 类型系统 | [TypeScript](https://www.typescriptlang.org/) v5.6 | 全量类型安全 |
| 编辑器 | [MetonaEditor](https://git.metona.cn/MetonaTeam/MetonaEditor) v0.4.0 | 零依赖 Markdown 编辑器，三模式视图 + 浮动格式栏 + 插件系统 | | 编辑器 | [MetonaEditor](https://git.metona.cn/MetonaTeam/MetonaEditor) v0.4.0 | 内置解析器 + 高亮，三模式视图 + 浮动格式栏 + Zen 模式 + 插件系统 |
| 状态管理 | [Zustand](https://zustand-demo.pmnd.rs/) v5 | 轻量级状态管理 | | 状态管理 | [Zustand](https://zustand-demo.pmnd.rs/) v5 | 轻量级状态管理 |
| 持久化 | [MetonaSqlark](https://git.metona.cn/MetonaTeam/MetonaSqlark) v0.4.1 (IndexedDB, AriaEngine) | 标签页状态 & 用户设置持久化 | | 持久化 | [MetonaSqlark](https://git.metona.cn/MetonaTeam/MetonaSqlark) v0.4.1 (IndexedDB, AriaEngine) | 标签页状态 & 用户设置持久化 |
| Markdown 解析 | [unified](https://unifiedjs.com/) / [remark](https://remark.js.org/) / [rehype](https://rehype.js.org/) | 插件化 Markdown 渲染管线 | | Markdown 解析 | MetonaEditor 内置解析器 | 零依赖：GFM / 脚注 / 数学公式 / Mermaid |
| 代码高亮 | [rehype-highlight](https://github.com/rehypejs/rehype-highlight) | 基于 highlight.js 的语法高亮 | | 代码高亮 | MetonaEditor 内置高亮器 | 零依赖，16 种语言 |
| Toast | [@metona-team/metona-toast](https://git.metona.cn/MetonaTeam/-/packages/npm/@metona-team%2Fmetona-toast) v0.5.0 | 通知提示组件 | | Toast | [@metona-team/metona-toast](https://git.metona.cn/MetonaTeam/-/packages/npm/@metona-team%2Fmetona-toast) v0.5.0 | 通知提示组件 |
| 构建工具 | [electron-vite](https://electron-vite.org/) v3 | Electron + Vite 集成，HMR 热更新 | | 构建工具 | [electron-vite](https://electron-vite.org/) v3 | Electron + Vite 集成，HMR 热更新 |
| 打包工具 | [electron-builder](https://www.electron.build/) | 生成 exe 安装包 | | 打包工具 | [electron-builder](https://www.electron.build/) | 生成 exe 安装包 |
package.json
+5 -11
View File
@@ -1,6 +1,6 @@
{ {
"name": "marklite", "name": "marklite",
"version": "0.5.0", "version": "0.6.0",
"description": "Lightweight Markdown Editor for Windows", "description": "Lightweight Markdown Editor for Windows",
"main": "./dist/main/index.js", "main": "./dist/main/index.js",
"scripts": { "scripts": {
@@ -14,7 +14,8 @@
"test": "vitest run", "test": "vitest run",
"test:watch": "vitest", "test:watch": "vitest",
"test:coverage": "vitest run --coverage", "test:coverage": "vitest run --coverage",
"prepare": "husky" "prepare": "husky",
"postinstall": "node scripts/ensure-rollup-platform.mjs"
}, },
"lint-staged": { "lint-staged": {
"*.{ts,tsx}": [ "*.{ts,tsx}": [
@@ -35,18 +36,10 @@
"nanoid": "^5.1.5", "nanoid": "^5.1.5",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"rehype-highlight": "^7.0.2",
"rehype-raw": "^7.0.0",
"rehype-sanitize": "^6.0.0",
"rehype-stringify": "^10.0.0",
"remark-gfm": "^4.0.1",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.2",
"unified": "^11.0.5",
"unist-util-visit": "^5.1.0",
"zustand": "^5.0.6" "zustand": "^5.0.6"
}, },
"devDependencies": { "devDependencies": {
"@rollup/rollup-linux-x64-gnu": "^4.60.4",
"@testing-library/jest-dom": "^6.9.1", "@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2", "@testing-library/react": "^16.3.2",
"@types/jsdom": "^28.0.3", "@types/jsdom": "^28.0.3",
@@ -60,6 +53,7 @@
"eslint": "^9.22.0", "eslint": "^9.22.0",
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.19",
"fake-indexeddb": "^6.2.5",
"husky": "^9.1.7", "husky": "^9.1.7",
"jsdom": "^29.1.1", "jsdom": "^29.1.1",
"lint-staged": "^17.0.7", "lint-staged": "^17.0.7",
scripts/ensure-rollup-platform.mjs
+55
View File
@@ -0,0 +1,55 @@
/**
* 确保 rollup 当前平台的 optional 原生包已安装。
*
* 背景: npm bug #4828 导致跨平台共享 node_modules（如 WSL 与 Windows 挂载同一目录）时，
* 一方 npm install 可能清理掉另一方的 rollup 平台包（@rollup/rollup-<os>-x64-<libc>），
* 导致 build/test 报 "Cannot find module @rollup/rollup-<platform>"。
*
* 方案: 在 postinstall 阶段检测当前平台所需的 rollup 原生包，缺失则自动补装
* （--no-save 不污染依赖清单，--ignore-scripts 防止递归触发 postinstall）。
*/
import { execSync } from 'child_process'
import { existsSync } from 'fs'
import { join, dirname } from 'path'
import { fileURLToPath } from 'url'
const ROLLUP_VERSION = '4.60.4'
const __dirname = dirname(fileURLToPath(import.meta.url))
/** 平台 → 架构 → 对应 rollup 原生包 */
const PLATFORM_PACKAGES = {
win32: {
x64: '@rollup/rollup-win32-x64-msvc',
ia32: '@rollup/rollup-win32-ia32-msvc',
arm64: '@rollup/rollup-win32-arm64-msvc',
},
linux: {
x64: '@rollup/rollup-linux-x64-gnu',
arm64: '@rollup/rollup-linux-arm64-gnu',
arm: '@rollup/rollup-linux-arm-gnueabihf',
},
darwin: {
x64: '@rollup/rollup-darwin-x64',
arm64: '@rollup/rollup-darwin-arm64',
},
}
const pkg = PLATFORM_PACKAGES[process.platform]?.[process.arch]
if (!pkg) {
process.exit(0)
}
const pkgDir = join(__dirname, '..', 'node_modules', ...pkg.split('/'))
if (existsSync(pkgDir)) {
process.exit(0)
}
try {
execSync(`npm install --no-save --ignore-scripts ${pkg}@${ROLLUP_VERSION}`, {
stdio: 'inherit',
cwd: join(__dirname, '..'),
})
} catch (err) {
// eslint-disable-next-line no-console -- 安装失败仅告警，不阻断 npm install
console.warn(`[ensure-rollup-platform] 自动安装 ${pkg} 失败:`, err)
}
src/main/file-system.ts
+15 -8
View File
@@ -10,26 +10,29 @@ export async function readFileContent(filePath: string): Promise<ReadFileResult>
try { try {
const fileStat = await stat(filePath) const fileStat = await stat(filePath)
if (fileStat.size > MAX_FILE_SIZE) { if (fileStat.size > MAX_FILE_SIZE) {
return { success: false, error: `文件过大（${(fileStat.size / 1024 / 1024).toFixed(1)} MB），暂不支持超过 20MB 的文件` } return {
success: false,
error: `文件过大（${(fileStat.size / 1024 / 1024).toFixed(1)} MB），暂不支持超过 20MB 的文件`,
}
} }
// L-01: 检测并剥离 BOM（UTF-8 FEFF / UTF-16 LE FFFE / UTF-16 BE FEFF） // L-01: 检测并剥离 BOM（UTF-8 FEFF / UTF-16 LE FFFE / UTF-16 BE FEFF）
const buffer = await readFile(filePath) const buffer = await readFile(filePath)
let content: string let content: string
if (buffer.length >= 2 && buffer[0] === 0xFE && buffer[1] === 0xFF) { if (buffer.length >= 2 && buffer[0] === 0xfe && buffer[1] === 0xff) {
// UTF-16 BE: swap bytes to LE 再解码 // UTF-16 BE: swap bytes to LE 再解码
const swapped = Buffer.allocUnsafe(buffer.length) const swapped = Buffer.allocUnsafe(buffer.length)
buffer.copy(swapped) buffer.copy(swapped)
swapped.swap16() swapped.swap16()
content = swapped.toString('utf-16le') content = swapped.toString('utf-16le')
if (content.charCodeAt(0) === 0xFEFF) content = content.slice(1) if (content.charCodeAt(0) === 0xfeff) content = content.slice(1)
} else if (buffer.length >= 2 && buffer[0] === 0xFF && buffer[1] === 0xFE) { } else if (buffer.length >= 2 && buffer[0] === 0xff && buffer[1] === 0xfe) {
// UTF-16 LE // UTF-16 LE
content = buffer.toString('utf-16le') content = buffer.toString('utf-16le')
if (content.charCodeAt(0) === 0xFEFF) content = content.slice(1) if (content.charCodeAt(0) === 0xfeff) content = content.slice(1)
} else { } else {
// UTF-8 (含 FEFF BOM 剥离) // UTF-8 (含 FEFF BOM 剥离)
content = buffer.toString('utf-8') content = buffer.toString('utf-8')
if (content.charCodeAt(0) === 0xFEFF) content = content.slice(1) if (content.charCodeAt(0) === 0xfeff) content = content.slice(1)
} }
return { success: true, content } return { success: true, content }
} catch (err) { } catch (err) {
@@ -48,7 +51,11 @@ export async function saveFileContent(filePath: string, content: string): Promis
return { success: true, filePath } return { success: true, filePath }
} catch (err) { } catch (err) {
// 清理残留临时文件 // 清理残留临时文件
try { await unlink(tmpFile) } catch { /* ignore */ } try {
await unlink(tmpFile)
} catch {
/* ignore */
}
return { success: false, error: (err as Error).message } return { success: false, error: (err as Error).message }
} }
} }
@@ -58,7 +65,7 @@ export async function buildDirTree(
dirPath: string, dirPath: string,
depth = 0, depth = 0,
maxDepth = 10, maxDepth = 10,
visited?: Set<string> visited?: Set<string>,
): Promise<FileNode[]> { ): Promise<FileNode[]> {
if (depth > maxDepth) return [] if (depth > maxDepth) return []
src/main/file-watcher.ts
+1 -1
View File
@@ -15,7 +15,7 @@ export class FileWatcher {
if (!filePath) return if (!filePath) return
try { try {
this.currentPath = filePath this.currentPath = filePath
this.watcher = fs.watch(filePath, (eventType) => { this.watcher = fs.watch(filePath, eventType => {
if (eventType === 'change') { if (eventType === 'change') {
if (this.isSelfWriting) return if (this.isSelfWriting) return
const win = this.getMainWindow() const win = this.getMainWindow()
src/main/index.ts
+141 -140
View File
@@ -1,140 +1,141 @@
import { app, BrowserWindow } from 'electron' import { app, BrowserWindow } from 'electron'
import { join } from 'path' import { join } from 'path'
import { createWindow, setupSingleInstanceLock, getFilePathFromArgs } from './window-manager' import { createWindow, setupSingleInstanceLock, getFilePathFromArgs } from './window-manager'
import { FileWatcher, SidebarWatcher } from './file-watcher' import { FileWatcher, SidebarWatcher } from './file-watcher'
import { registerIpcHandlers } from './ipc-handlers' import { registerIpcHandlers } from './ipc-handlers'
import { readFileContent } from './file-system' import { readFileContent } from './file-system'
let mainWindow: BrowserWindow | null = null let mainWindow: BrowserWindow | null = null
const state = { const state = {
activeFilePath: null as string | null, activeFilePath: null as string | null,
pendingFilePath: null as string | null, pendingFilePath: null as string | null,
isClosing: false, isClosing: false,
closeTimeout: null as NodeJS.Timeout | null closeTimeout: null as NodeJS.Timeout | null,
} }
const fileWatcher = new FileWatcher(() => mainWindow) const fileWatcher = new FileWatcher(() => mainWindow)
const sidebarWatcher = new SidebarWatcher(() => mainWindow) const sidebarWatcher = new SidebarWatcher(() => mainWindow)
function openFileInTab(filePath: string): void { function openFileInTab(filePath: string): void {
if (!mainWindow || mainWindow.isDestroyed()) return if (!mainWindow || mainWindow.isDestroyed()) return
readFileContent(filePath).then(result => { readFileContent(filePath)
if (result.success && mainWindow && !mainWindow.isDestroyed()) { .then(result => {
state.activeFilePath = filePath if (result.success && mainWindow && !mainWindow.isDestroyed()) {
fileWatcher.start(filePath) state.activeFilePath = filePath
mainWindow.setTitle(`MarkLite - ${filePath.split(/[/\\]/).pop()}`) fileWatcher.start(filePath)
mainWindow.webContents.send('file:openInTab', { filePath, content: result.content }) mainWindow.setTitle(`MarkLite - ${filePath.split(/[/\\]/).pop()}`)
} mainWindow.webContents.send('file:openInTab', { filePath, content: result.content })
}).catch((err) => { }
// eslint-disable-next-line no-console -- IPC file open error })
console.error('openFileInTab failed:', err) .catch(err => {
}) // eslint-disable-next-line no-console -- IPC file open error
} console.error('openFileInTab failed:', err)
})
const lockOk = setupSingleInstanceLock((filePath) => { }
if (mainWindow && !mainWindow.isDestroyed()) {
if (mainWindow.isMinimized()) mainWindow.restore() const lockOk = setupSingleInstanceLock(filePath => {
mainWindow.focus() if (mainWindow && !mainWindow.isDestroyed()) {
if (filePath) openFileInTab(filePath) if (mainWindow.isMinimized()) mainWindow.restore()
} mainWindow.focus()
}) if (filePath) openFileInTab(filePath)
}
if (!lockOk) { })
app.quit()
} else { if (!lockOk) {
app.quit()
function setupCloseHandler(): void { } else {
if (!mainWindow) return function setupCloseHandler(): void {
mainWindow.on('close', (e) => { if (!mainWindow) return
if (state.isClosing) return mainWindow.on('close', e => {
state.isClosing = true if (state.isClosing) return
e.preventDefault() state.isClosing = true
try { e.preventDefault()
if (mainWindow && !mainWindow.webContents.isDestroyed()) { try {
mainWindow.webContents.send('window:confirmClose') if (mainWindow && !mainWindow.webContents.isDestroyed()) {
} else { mainWindow.webContents.send('window:confirmClose')
mainWindow?.removeAllListeners('close') } else {
mainWindow?.close() mainWindow?.removeAllListeners('close')
return mainWindow?.close()
} return
} catch { }
mainWindow?.removeAllListeners('close') } catch {
mainWindow?.close() mainWindow?.removeAllListeners('close')
return mainWindow?.close()
} return
state.closeTimeout = setTimeout(() => { }
state.closeTimeout = null state.closeTimeout = setTimeout(() => {
if (mainWindow && !mainWindow.isDestroyed()) { state.closeTimeout = null
mainWindow.removeAllListeners('close') if (mainWindow && !mainWindow.isDestroyed()) {
mainWindow.close() mainWindow.removeAllListeners('close')
} mainWindow.close()
}, 5000) }
}) }, 5000)
} })
}
// C-05: 窗口重建时重置状态
function initWindow(): void { // C-05: 窗口重建时重置状态
state.isClosing = false function initWindow(): void {
if (state.closeTimeout) { state.isClosing = false
clearTimeout(state.closeTimeout) if (state.closeTimeout) {
state.closeTimeout = null clearTimeout(state.closeTimeout)
} state.closeTimeout = null
}
mainWindow = createWindow()
mainWindow = createWindow()
if (process.env.ELECTRON_RENDERER_URL) {
mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL) if (process.env.ELECTRON_RENDERER_URL) {
} else { mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL)
mainWindow.loadFile(join(__dirname, '../renderer/index.html')) } else {
} mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
}
mainWindow.webContents.on('did-finish-load', () => {
if (state.pendingFilePath) { mainWindow.webContents.on('did-finish-load', () => {
openFileInTab(state.pendingFilePath) if (state.pendingFilePath) {
state.pendingFilePath = null openFileInTab(state.pendingFilePath)
} state.pendingFilePath = null
}) }
})
setupCloseHandler()
setupCloseHandler()
mainWindow.on('closed', () => {
fileWatcher.stop() mainWindow.on('closed', () => {
sidebarWatcher.stop() fileWatcher.stop()
mainWindow = null sidebarWatcher.stop()
}) mainWindow = null
} })
}
app.whenReady().then(() => {
app.on('open-file', (event, filePath) => { app.whenReady().then(() => {
event.preventDefault() app.on('open-file', (event, filePath) => {
if (mainWindow && !mainWindow.isDestroyed() && mainWindow.webContents.isLoading()) { event.preventDefault()
state.pendingFilePath = filePath if (mainWindow && !mainWindow.isDestroyed() && mainWindow.webContents.isLoading()) {
} else if (mainWindow && !mainWindow.isDestroyed()) { state.pendingFilePath = filePath
openFileInTab(filePath) } else if (mainWindow && !mainWindow.isDestroyed()) {
} else { openFileInTab(filePath)
state.pendingFilePath = filePath } else {
} state.pendingFilePath = filePath
}) }
})
// C-03: IPC 处理器只注册一次
registerIpcHandlers(() => mainWindow, fileWatcher, sidebarWatcher, state) // C-03: IPC 处理器只注册一次
registerIpcHandlers(() => mainWindow, fileWatcher, sidebarWatcher, state)
initWindow()
initWindow()
const cmdFile = getFilePathFromArgs(process.argv)
if (cmdFile) { const cmdFile = getFilePathFromArgs(process.argv)
state.pendingFilePath = cmdFile if (cmdFile) {
} state.pendingFilePath = cmdFile
}) }
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit() app.on('window-all-closed', () => {
}) if (process.platform !== 'darwin') app.quit()
})
// C-03: activate 只重建窗口，不重复注册 IPC
app.on('activate', () => { // C-03: activate 只重建窗口，不重复注册 IPC
if (BrowserWindow.getAllWindows().length === 0) { app.on('activate', () => {
initWindow() if (BrowserWindow.getAllWindows().length === 0) {
} initWindow()
}) }
} })
}
src/main/ipc-handlers.ts
+284 -228
View File
@@ -1,228 +1,284 @@
import { ipcMain, dialog, BrowserWindow, type IpcMainInvokeEvent } from 'electron' import { ipcMain, dialog, BrowserWindow, type IpcMainInvokeEvent } from 'electron'
import { readFileContent, saveFileContent, buildDirTree } from './file-system' import { readFileContent, saveFileContent, buildDirTree } from './file-system'
import { FileWatcher, SidebarWatcher } from './file-watcher' import { FileWatcher, SidebarWatcher } from './file-watcher'
import { IPC_CHANNELS } from '../shared/ipc-channels' import { IPC_CHANNELS } from '../shared/ipc-channels'
import { stat } from 'fs/promises' import { stat, readFile, writeFile } from 'fs/promises'
import { basename, isAbsolute } from 'path' import { basename, isAbsolute } from 'path'
// 安全校验：拒绝路径遍历攻击 // 安全校验：拒绝路径遍历攻击
function validatePath(filePath: string): boolean { function validatePath(filePath: string): boolean {
if (!filePath || typeof filePath !== 'string') return false if (!filePath || typeof filePath !== 'string') return false
// 拒绝空字节 // 拒绝空字节
if (filePath.includes('\0')) return false if (filePath.includes('\0')) return false
// 检查路径遍历：以路径分隔符分割后检查是否存在完整的 '..' 段 // 检查路径遍历：以路径分隔符分割后检查是否存在完整的 '..' 段
// H-02: 用段检查替代全局 includes('..')，避免误伤含 '..' 的合法路径 // H-02: 用段检查替代全局 includes('..')，避免误伤含 '..' 的合法路径
const sepPattern = /[/\\]/ const sepPattern = /[/\\]/
const parts = filePath.split(sepPattern) const parts = filePath.split(sepPattern)
if (parts.some(part => part === '..')) return false if (parts.some(part => part === '..')) return false
// 必须是绝对路径 // 必须是绝对路径
if (!isAbsolute(filePath)) return false if (!isAbsolute(filePath)) return false
return true return true
} }
export function registerIpcHandlers( export function registerIpcHandlers(
getMainWindow: () => BrowserWindow | null, getMainWindow: () => BrowserWindow | null,
fileWatcher: FileWatcher, fileWatcher: FileWatcher,
sidebarWatcher: SidebarWatcher, sidebarWatcher: SidebarWatcher,
state: { activeFilePath: string | null; pendingFilePath: string | null; isClosing: boolean; closeTimeout: NodeJS.Timeout | null } state: {
): void { activeFilePath: string | null
// 打开文件对话框 pendingFilePath: string | null
ipcMain.handle(IPC_CHANNELS.DIALOG_OPEN_FILE, async () => { isClosing: boolean
const win = getMainWindow() closeTimeout: NodeJS.Timeout | null
if (!win) return null },
try { ): void {
const result = await dialog.showOpenDialog(win, { // 打开文件对话框
properties: ['openFile'], ipcMain.handle(IPC_CHANNELS.DIALOG_OPEN_FILE, async () => {
filters: [{ name: 'Markdown 文件', extensions: ['md', 'markdown', 'txt'] }] const win = getMainWindow()
}) if (!win) return null
if (!result.canceled && result.filePaths.length > 0) { try {
const filePath = result.filePaths[0] const result = await dialog.showOpenDialog(win, {
const fileResult = await readFileContent(filePath) properties: ['openFile'],
if (fileResult.success) { filters: [{ name: 'Markdown 文件', extensions: ['md', 'markdown', 'txt'] }],
state.activeFilePath = filePath })
fileWatcher.start(filePath) if (!result.canceled && result.filePaths.length > 0) {
win.setTitle(`MarkLite - ${basename(filePath)}`) const filePath = result.filePaths[0]
return { filePath, content: fileResult.content } const fileResult = await readFileContent(filePath)
} if (fileResult.success) {
return { error: fileResult.error } state.activeFilePath = filePath
} fileWatcher.start(filePath)
return null win.setTitle(`MarkLite - ${basename(filePath)}`)
} catch (err) { return { filePath, content: fileResult.content }
return { error: (err as Error).message } }
} return { error: fileResult.error }
}) }
return null
// 读取文件 } catch (err) {
ipcMain.handle(IPC_CHANNELS.FILE_READ, async (_event: IpcMainInvokeEvent, filePath: string) => { return { error: (err as Error).message }
if (!validatePath(filePath)) { }
return { success: false, error: '无效的文件路径' } })
}
return readFileContent(filePath) // 读取文件
}) ipcMain.handle(IPC_CHANNELS.FILE_READ, async (_event: IpcMainInvokeEvent, filePath: string) => {
if (!validatePath(filePath)) {
// 保存文件 return { success: false, error: '无效的文件路径' }
ipcMain.handle(IPC_CHANNELS.FILE_SAVE, async (_event: IpcMainInvokeEvent, data: { filePath: string | null; content: string }) => { }
if (data.filePath && !validatePath(data.filePath)) { return readFileContent(filePath)
return { success: false, error: '无效的文件路径' } })
}
const win = getMainWindow() // 保存文件
try { ipcMain.handle(
if (data.filePath) { IPC_CHANNELS.FILE_SAVE,
// Mark self-writing before stopping watcher to suppress any events async (_event: IpcMainInvokeEvent, data: { filePath: string | null; content: string }) => {
// that arrive between stop and start if (data.filePath && !validatePath(data.filePath)) {
fileWatcher.setSelfWriting(true) return { success: false, error: '无效的文件路径' }
fileWatcher.stop() }
const result = await saveFileContent(data.filePath, data.content) const win = getMainWindow()
// Restart watcher while selfWriting is still true so any immediate 'change' try {
// event from the restart is suppressed — prevents overwriting editor content if (data.filePath) {
fileWatcher.start(data.filePath) // Mark self-writing before stopping watcher to suppress any events
fileWatcher.setSelfWriting(false) // that arrive between stop and start
state.activeFilePath = data.filePath fileWatcher.setSelfWriting(true)
if (win && !win.isDestroyed()) { fileWatcher.stop()
win.setTitle(`MarkLite - ${basename(data.filePath)}`) const result = await saveFileContent(data.filePath, data.content)
} // Restart watcher while selfWriting is still true so any immediate 'change'
return result // event from the restart is suppressed — prevents overwriting editor content
} else { fileWatcher.start(data.filePath)
if (!win) return { success: false, error: '窗口不可用' } fileWatcher.setSelfWriting(false)
const saveResult = await dialog.showSaveDialog(win, { state.activeFilePath = data.filePath
filters: [{ name: 'Markdown 文件', extensions: ['md'] }] if (win && !win.isDestroyed()) {
}) win.setTitle(`MarkLite - ${basename(data.filePath)}`)
if (!saveResult.canceled) { }
fileWatcher.setSelfWriting(true) return result
const result = await saveFileContent(saveResult.filePath, data.content) } else {
if (result.success) { if (!win) return { success: false, error: '窗口不可用' }
state.activeFilePath = saveResult.filePath const saveResult = await dialog.showSaveDialog(win, {
fileWatcher.start(saveResult.filePath) filters: [{ name: 'Markdown 文件', extensions: ['md'] }],
win.setTitle(`MarkLite - ${basename(saveResult.filePath)}`) })
} if (!saveResult.canceled) {
fileWatcher.setSelfWriting(false) fileWatcher.setSelfWriting(true)
return result const result = await saveFileContent(saveResult.filePath, data.content)
} if (result.success) {
return { success: false, canceled: true } state.activeFilePath = saveResult.filePath
} fileWatcher.start(saveResult.filePath)
} catch (err) { win.setTitle(`MarkLite - ${basename(saveResult.filePath)}`)
fileWatcher.setSelfWriting(false) }
if (state.activeFilePath) { fileWatcher.setSelfWriting(false)
fileWatcher.start(state.activeFilePath) return result
} }
return { success: false, error: (err as Error).message } return { success: false, canceled: true }
} }
}) } catch (err) {
fileWatcher.setSelfWriting(false)
// 另存为 if (state.activeFilePath) {
ipcMain.handle(IPC_CHANNELS.FILE_SAVE_AS, async (_event: IpcMainInvokeEvent, data: { content: string }) => { fileWatcher.start(state.activeFilePath)
const win = getMainWindow() }
if (!win) return { success: false, error: '窗口不可用' } return { success: false, error: (err as Error).message }
try { }
const result = await dialog.showSaveDialog(win, { },
filters: [{ name: 'Markdown 文件', extensions: ['md'] }] )
})
if (!result.canceled) { // 另存为
fileWatcher.setSelfWriting(true) ipcMain.handle(
const saveResult = await saveFileContent(result.filePath, data.content) IPC_CHANNELS.FILE_SAVE_AS,
if (saveResult.success) { async (_event: IpcMainInvokeEvent, data: { content: string }) => {
state.activeFilePath = result.filePath const win = getMainWindow()
fileWatcher.start(result.filePath) if (!win) return { success: false, error: '窗口不可用' }
win.setTitle(`MarkLite - ${basename(result.filePath)}`) try {
} const result = await dialog.showSaveDialog(win, {
fileWatcher.setSelfWriting(false) filters: [{ name: 'Markdown 文件', extensions: ['md'] }],
return saveResult })
} if (!result.canceled) {
return { success: false, canceled: true } fileWatcher.setSelfWriting(true)
} catch (err) { const saveResult = await saveFileContent(result.filePath, data.content)
fileWatcher.setSelfWriting(false) if (saveResult.success) {
return { success: false, error: (err as Error).message } state.activeFilePath = result.filePath
} fileWatcher.start(result.filePath)
}) win.setTitle(`MarkLite - ${basename(result.filePath)}`)
}
// 获取当前路径 fileWatcher.setSelfWriting(false)
ipcMain.handle(IPC_CHANNELS.FILE_GET_CURRENT_PATH, () => state.activeFilePath) return saveResult
}
// 文件统计 return { success: false, canceled: true }
ipcMain.handle(IPC_CHANNELS.FILE_STATS, async (_event: IpcMainInvokeEvent, filePath: string) => { } catch (err) {
if (!validatePath(filePath)) { fileWatcher.setSelfWriting(false)
return { success: false, error: '无效的文件路径' } return { success: false, error: (err as Error).message }
} }
try { },
const fileStat = await stat(filePath) )
return { success: true, size: fileStat.size, mtime: fileStat.mtime.toISOString() }
} catch (err) { // 获取当前路径
return { success: false, error: (err as Error).message } ipcMain.handle(IPC_CHANNELS.FILE_GET_CURRENT_PATH, () => state.activeFilePath)
}
}) // 文件统计
ipcMain.handle(IPC_CHANNELS.FILE_STATS, async (_event: IpcMainInvokeEvent, filePath: string) => {
// 重新加载 if (!validatePath(filePath)) {
ipcMain.handle(IPC_CHANNELS.FILE_RELOAD, async () => { return { success: false, error: '无效的文件路径' }
if (!state.activeFilePath) return { success: false, error: '没有打开的文件' } }
const result = await readFileContent(state.activeFilePath) try {
return { ...result, filePath: state.activeFilePath } const fileStat = await stat(filePath)
}) return { success: true, size: fileStat.size, mtime: fileStat.mtime.toISOString() }
} catch (err) {
// 目录树 return { success: false, error: (err as Error).message }
ipcMain.handle(IPC_CHANNELS.DIR_READ_TREE, async (_event: IpcMainInvokeEvent, dirPath: string) => { }
if (!validatePath(dirPath)) { })
return { success: false, error: '无效的目录路径' }
} // 重新加载
try { ipcMain.handle(IPC_CHANNELS.FILE_RELOAD, async () => {
const tree = await buildDirTree(dirPath) if (!state.activeFilePath) return { success: false, error: '没有打开的文件' }
return { success: true, tree, rootPath: dirPath } const result = await readFileContent(state.activeFilePath)
} catch (err) { return { ...result, filePath: state.activeFilePath }
return { success: false, error: (err as Error).message } })
}
}) // 目录树
ipcMain.handle(
// 打开文件夹对话框 IPC_CHANNELS.DIR_READ_TREE,
ipcMain.handle(IPC_CHANNELS.DIR_OPEN_DIALOG, async () => { async (_event: IpcMainInvokeEvent, dirPath: string) => {
const win = getMainWindow() if (!validatePath(dirPath)) {
if (!win) return null return { success: false, error: '无效的目录路径' }
const result = await dialog.showOpenDialog(win, { properties: ['openDirectory'] }) }
if (!result.canceled && result.filePaths.length > 0) { try {
return result.filePaths[0] const tree = await buildDirTree(dirPath)
} return { success: true, tree, rootPath: dirPath }
return null } catch (err) {
}) return { success: false, error: (err as Error).message }
}
// 目录监听 },
ipcMain.handle(IPC_CHANNELS.DIR_WATCH, (_event: IpcMainInvokeEvent, dirPath: string) => { )
if (!validatePath(dirPath)) return
sidebarWatcher.start(dirPath) // 打开文件夹对话框
}) ipcMain.handle(IPC_CHANNELS.DIR_OPEN_DIALOG, async () => {
const win = getMainWindow()
ipcMain.handle(IPC_CHANNELS.DIR_UNWATCH, () => { if (!win) return null
sidebarWatcher.stop() const result = await dialog.showOpenDialog(win, { properties: ['openDirectory'] })
}) if (!result.canceled && result.filePaths.length > 0) {
return result.filePaths[0]
// 标签切换 }
ipcMain.handle(IPC_CHANNELS.TAB_SWITCHED, (_event: IpcMainInvokeEvent, filePath: string | null) => { return null
const normalizedPath = filePath || null })
if (normalizedPath && !validatePath(normalizedPath)) {
fileWatcher.stop() // 目录监听
return ipcMain.handle(IPC_CHANNELS.DIR_WATCH, (_event: IpcMainInvokeEvent, dirPath: string) => {
} if (!validatePath(dirPath)) return
state.activeFilePath = normalizedPath sidebarWatcher.start(dirPath)
fileWatcher.start(normalizedPath || '') })
const win = getMainWindow()
if (win && !win.isDestroyed()) { ipcMain.handle(IPC_CHANNELS.DIR_UNWATCH, () => {
win.setTitle(normalizedPath ? `MarkLite - ${basename(normalizedPath)}` : 'MarkLite') sidebarWatcher.stop()
} })
})
// 标签切换
// 窗口控制 ipcMain.handle(
ipcMain.handle(IPC_CHANNELS.WINDOW_FORCE_CLOSE, () => { IPC_CHANNELS.TAB_SWITCHED,
const win = getMainWindow() (_event: IpcMainInvokeEvent, filePath: string | null) => {
if (win && !win.isDestroyed()) { const normalizedPath = filePath || null
fileWatcher.stop() if (normalizedPath && !validatePath(normalizedPath)) {
win.removeAllListeners('close') fileWatcher.stop()
win.close() return
} }
}) state.activeFilePath = normalizedPath
fileWatcher.start(normalizedPath || '')
// B-01: 重置关闭状态 + 清除超时定时器 const win = getMainWindow()
ipcMain.handle(IPC_CHANNELS.WINDOW_CANCEL_CLOSE, () => { if (win && !win.isDestroyed()) {
state.isClosing = false win.setTitle(normalizedPath ? `MarkLite - ${basename(normalizedPath)}` : 'MarkLite')
if (state.closeTimeout) { }
clearTimeout(state.closeTimeout) },
state.closeTimeout = null )
}
}) // 窗口控制
} ipcMain.handle(IPC_CHANNELS.WINDOW_FORCE_CLOSE, () => {
const win = getMainWindow()
if (win && !win.isDestroyed()) {
fileWatcher.stop()
win.removeAllListeners('close')
win.close()
}
})
// B-01: 重置关闭状态 + 清除超时定时器
ipcMain.handle(IPC_CHANNELS.WINDOW_CANCEL_CLOSE, () => {
state.isClosing = false
if (state.closeTimeout) {
clearTimeout(state.closeTimeout)
state.closeTimeout = null
}
})
// v0.6.0: 数据备份导出 — 保存对话框 + 写 JSON 文件
ipcMain.handle(IPC_CHANNELS.DATA_EXPORT, async (_event: IpcMainInvokeEvent, content: string) => {
const win = getMainWindow()
if (!win) return { success: false, error: '窗口不可用' }
try {
const dateStr = new Date().toISOString().slice(0, 10)
const result = await dialog.showSaveDialog(win, {
title: '导出数据备份',
defaultPath: `marklite-backup-${dateStr}.json`,
filters: [{ name: 'JSON 备份文件', extensions: ['json'] }],
})
if (result.canceled) return { success: false, canceled: true }
await writeFile(result.filePath, content, 'utf8')
return { success: true, filePath: result.filePath }
} catch (err) {
return { success: false, error: (err as Error).message }
}
})
// v0.6.0: 数据备份导入 — 打开对话框 + 读 JSON 文件
ipcMain.handle(IPC_CHANNELS.DATA_IMPORT, async () => {
const win = getMainWindow()
if (!win) return { success: false, error: '窗口不可用' }
try {
const result = await dialog.showOpenDialog(win, {
title: '导入数据备份',
properties: ['openFile'],
filters: [{ name: 'JSON 备份文件', extensions: ['json'] }],
})
if (result.canceled || result.filePaths.length === 0) {
return { success: false, canceled: true }
}
const content = await readFile(result.filePaths[0], 'utf8')
return { success: true, content }
} catch (err) {
return { success: false, error: (err as Error).message }
}
})
}
src/main/window-manager.ts
+4 -4
View File
@@ -13,16 +13,16 @@ export function createWindow(): BrowserWindow {
preload: join(__dirname, '../preload/index.js'), preload: join(__dirname, '../preload/index.js'),
contextIsolation: true, contextIsolation: true,
nodeIntegration: false, nodeIntegration: false,
sandbox: true sandbox: true,
}, },
titleBarStyle: 'default', titleBarStyle: 'default',
show: false show: false,
}) })
mainWindow.setMenu(null) mainWindow.setMenu(null)
// H-04: 阻止窗口导航和弹出窗口，防止渲染进程绕过 CSP // H-04: 阻止窗口导航和弹出窗口，防止渲染进程绕过 CSP
mainWindow.webContents.on('will-navigate', (event) => { mainWindow.webContents.on('will-navigate', event => {
event.preventDefault() event.preventDefault()
}) })
mainWindow.webContents.setWindowOpenHandler(() => ({ action: 'deny' })) mainWindow.webContents.setWindowOpenHandler(() => ({ action: 'deny' }))
@@ -35,7 +35,7 @@ export function createWindow(): BrowserWindow {
} }
export function setupSingleInstanceLock( export function setupSingleInstanceLock(
onSecondInstance: (filePath: string | null) => void onSecondInstance: (filePath: string | null) => void,
): boolean { ): boolean {
const gotTheLock = app.requestSingleInstanceLock() const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) { if (!gotTheLock) {
src/preload/index.ts
+79 -64
View File
@@ -1,64 +1,79 @@
import { contextBridge, ipcRenderer, shell } from 'electron' import { contextBridge, ipcRenderer, shell } from 'electron'
import { IPC_CHANNELS } from '../shared/ipc-channels' import { IPC_CHANNELS } from '../shared/ipc-channels'
import type { ElectronAPI } from '../renderer/types/ipc' import type { ElectronAPI } from '../renderer/types/ipc'
// C-02: 运行时实现受 ElectronAPI 类型约束，编译期保证 preload 与渲染进程契约一致 // C-02: 运行时实现受 ElectronAPI 类型约束，编译期保证 preload 与渲染进程契约一致
const api: ElectronAPI = { const api: ElectronAPI = {
// File operations // File operations
openFile: () => ipcRenderer.invoke(IPC_CHANNELS.DIALOG_OPEN_FILE), openFile: () => ipcRenderer.invoke(IPC_CHANNELS.DIALOG_OPEN_FILE),
readFile: (filePath: string) => ipcRenderer.invoke(IPC_CHANNELS.FILE_READ, filePath), readFile: (filePath: string) => ipcRenderer.invoke(IPC_CHANNELS.FILE_READ, filePath),
saveFile: (data) => ipcRenderer.invoke(IPC_CHANNELS.FILE_SAVE, data), saveFile: data => ipcRenderer.invoke(IPC_CHANNELS.FILE_SAVE, data),
saveFileAs: (data) => ipcRenderer.invoke(IPC_CHANNELS.FILE_SAVE_AS, data), saveFileAs: data => ipcRenderer.invoke(IPC_CHANNELS.FILE_SAVE_AS, data),
getCurrentPath: () => ipcRenderer.invoke(IPC_CHANNELS.FILE_GET_CURRENT_PATH), getCurrentPath: () => ipcRenderer.invoke(IPC_CHANNELS.FILE_GET_CURRENT_PATH),
getFileStats: (filePath: string) => ipcRenderer.invoke(IPC_CHANNELS.FILE_STATS, filePath), getFileStats: (filePath: string) => ipcRenderer.invoke(IPC_CHANNELS.FILE_STATS, filePath),
reloadFile: () => ipcRenderer.invoke(IPC_CHANNELS.FILE_RELOAD), reloadFile: () => ipcRenderer.invoke(IPC_CHANNELS.FILE_RELOAD),
// Tab management // Tab management
tabSwitched: (filePath: string | null) => ipcRenderer.invoke(IPC_CHANNELS.TAB_SWITCHED, filePath), tabSwitched: (filePath: string | null) => ipcRenderer.invoke(IPC_CHANNELS.TAB_SWITCHED, filePath),
// Window control // Window control
forceClose: () => ipcRenderer.invoke(IPC_CHANNELS.WINDOW_FORCE_CLOSE), forceClose: () => ipcRenderer.invoke(IPC_CHANNELS.WINDOW_FORCE_CLOSE),
cancelClose: () => ipcRenderer.invoke(IPC_CHANNELS.WINDOW_CANCEL_CLOSE), cancelClose: () => ipcRenderer.invoke(IPC_CHANNELS.WINDOW_CANCEL_CLOSE),
// Shell — 仅允许 http/https 协议 // Shell — 仅允许 http/https 协议
openExternal: (url: string) => { openExternal: (url: string) => {
try { try {
const parsed = new URL(url) const parsed = new URL(url)
if (parsed.protocol === 'http:' || parsed.protocol === 'https:') { if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
shell.openExternal(url) shell.openExternal(url)
} }
} catch { } catch {
// 无效 URL，忽略 // 无效 URL，忽略
} }
}, },
// File Tree (Sidebar) // File Tree (Sidebar)
readDirTree: (dirPath: string) => ipcRenderer.invoke(IPC_CHANNELS.DIR_READ_TREE, dirPath), readDirTree: (dirPath: string) => ipcRenderer.invoke(IPC_CHANNELS.DIR_READ_TREE, dirPath),
openFolderDialog: () => ipcRenderer.invoke(IPC_CHANNELS.DIR_OPEN_DIALOG), openFolderDialog: () => ipcRenderer.invoke(IPC_CHANNELS.DIR_OPEN_DIALOG),
watchDir: (dirPath: string) => ipcRenderer.invoke(IPC_CHANNELS.DIR_WATCH, dirPath), watchDir: (dirPath: string) => ipcRenderer.invoke(IPC_CHANNELS.DIR_WATCH, dirPath),
unwatchDir: () => ipcRenderer.invoke(IPC_CHANNELS.DIR_UNWATCH), unwatchDir: () => ipcRenderer.invoke(IPC_CHANNELS.DIR_UNWATCH),
// Events from main process — 返回取消订阅函数 // v0.6.0: 数据备份导出/导入
onFileOpenInTab: (callback) => { exportData: (content: string) => ipcRenderer.invoke(IPC_CHANNELS.DATA_EXPORT, content),
const handler = (_event: Electron.IpcRendererEvent, data: { filePath: string; content: string }) => callback(data) importData: () => ipcRenderer.invoke(IPC_CHANNELS.DATA_IMPORT),
ipcRenderer.on(IPC_CHANNELS.FILE_OPEN_IN_TAB, handler)
return () => { ipcRenderer.removeListener(IPC_CHANNELS.FILE_OPEN_IN_TAB, handler) } // Events from main process — 返回取消订阅函数
}, onFileOpenInTab: callback => {
onExternalModification: (callback) => { const handler = (
const handler = (_event: Electron.IpcRendererEvent, filePath: string) => callback(filePath) _event: Electron.IpcRendererEvent,
ipcRenderer.on(IPC_CHANNELS.FILE_EXTERNALLY_MODIFIED, handler) data: { filePath: string; content: string },
return () => { ipcRenderer.removeListener(IPC_CHANNELS.FILE_EXTERNALLY_MODIFIED, handler) } ) => callback(data)
}, ipcRenderer.on(IPC_CHANNELS.FILE_OPEN_IN_TAB, handler)
onDirChanged: (callback) => { return () => {
const handler = () => callback() ipcRenderer.removeListener(IPC_CHANNELS.FILE_OPEN_IN_TAB, handler)
ipcRenderer.on(IPC_CHANNELS.SIDEBAR_DIR_CHANGED, handler) }
return () => { ipcRenderer.removeListener(IPC_CHANNELS.SIDEBAR_DIR_CHANGED, handler) } },
}, onExternalModification: callback => {
onConfirmClose: (callback) => { const handler = (_event: Electron.IpcRendererEvent, filePath: string) => callback(filePath)
const handler = () => callback() ipcRenderer.on(IPC_CHANNELS.FILE_EXTERNALLY_MODIFIED, handler)
ipcRenderer.on(IPC_CHANNELS.WINDOW_CONFIRM_CLOSE, handler) return () => {
return () => { ipcRenderer.removeListener(IPC_CHANNELS.WINDOW_CONFIRM_CLOSE, handler) } ipcRenderer.removeListener(IPC_CHANNELS.FILE_EXTERNALLY_MODIFIED, handler)
} }
} },
onDirChanged: callback => {
contextBridge.exposeInMainWorld('electronAPI', api) const handler = () => callback()
ipcRenderer.on(IPC_CHANNELS.SIDEBAR_DIR_CHANGED, handler)
return () => {
ipcRenderer.removeListener(IPC_CHANNELS.SIDEBAR_DIR_CHANGED, handler)
}
},
onConfirmClose: callback => {
const handler = () => callback()
ipcRenderer.on(IPC_CHANNELS.WINDOW_CONFIRM_CLOSE, handler)
return () => {
ipcRenderer.removeListener(IPC_CHANNELS.WINDOW_CONFIRM_CLOSE, handler)
}
},
}
contextBridge.exposeInMainWorld('electronAPI', api)
src/preload/preload.d.ts
Vendored
+16 -16
View File
@@ -1,16 +1,16 @@
/** /**
* DX-02: Preload 类型安全声明 * DX-02: Preload 类型安全声明
* ElectronAPI 类型现在由 ../renderer/types/ipc.ts 集中定义， * ElectronAPI 类型现在由 ../renderer/types/ipc.ts 集中定义，
* preload/index.ts 引入该类型做编译期契约检查。 * preload/index.ts 引入该类型做编译期契约检查。
* 本文件仅保留全局 Window 增强声明。 * 本文件仅保留全局 Window 增强声明。
*/ */
import type { ElectronAPI } from '../renderer/types/ipc' import type { ElectronAPI } from '../renderer/types/ipc'
declare global { declare global {
interface Window { interface Window {
electronAPI: ElectronAPI electronAPI: ElectronAPI
} }
} }
export {} export {}
src/renderer/App.tsx
+131 -120
View File
@@ -1,120 +1,131 @@
import React, { useState, useEffect, useCallback } from 'react' import React, { useState, useEffect, useCallback } from 'react'
import { useTabStore } from './stores/tabStore' import { useTabStore } from './stores/tabStore'
import { flushSaveToDB } from './stores/tabStore' import { flushSaveToDB } from './stores/tabStore'
import { useEditorStore } from './stores/editorStore' import { useEditorStore } from './stores/editorStore'
import { useTheme } from './hooks/useTheme' import { useTheme } from './hooks/useTheme'
import { useSettingsInit } from './hooks/useSettingsInit' import { useSettingsInit } from './hooks/useSettingsInit'
import { useKeyboard } from './hooks/useKeyboard' import { useKeyboard } from './hooks/useKeyboard'
import { useUnsavedWarning } from './hooks/useUnsavedWarning' import { useUnsavedWarning } from './hooks/useUnsavedWarning'
import { useFileWatch } from './hooks/useFileWatch' import { useFileWatch } from './hooks/useFileWatch'
import { useFileOperations } from './hooks/useFileOperations' import { useFileOperations } from './hooks/useFileOperations'
import { useDragDrop } from './hooks/useDragDrop' import { useDragDrop } from './hooks/useDragDrop'
import { useAutoSave } from './hooks/useAutoSave' import { useAutoSave } from './hooks/useAutoSave'
import { useIpcListeners } from './hooks/useIpcListeners' import { useIpcListeners } from './hooks/useIpcListeners'
import { useConfirm } from './hooks/useConfirm' import { MeToast } from './lib/toast'
import { Toolbar } from './components/Toolbar/Toolbar' import { Toolbar } from './components/Toolbar/Toolbar'
import { TabBar } from './components/TabBar/TabBar' import { StatusBar } from './components/StatusBar'
import { Editor } from './components/Editor/Editor' import { TabBar } from './components/TabBar/TabBar'
import { Sidebar } from './components/Sidebar/Sidebar' import { Editor } from './components/Editor/Editor'
import { WelcomeScreen } from './components/WelcomeScreen/WelcomeScreen' import { Sidebar } from './components/Sidebar/Sidebar'
import { ModifiedBanner } from './components/ModifiedBanner/ModifiedBanner' import { WelcomeScreen } from './components/WelcomeScreen/WelcomeScreen'
import { DropOverlay } from './components/DropOverlay/DropOverlay' import { ModifiedBanner } from './components/ModifiedBanner/ModifiedBanner'
import { ErrorBoundary } from './components/ErrorBoundary' import { DropOverlay } from './components/DropOverlay/DropOverlay'
import { AboutDialog } from './components/AboutDialog' import { ErrorBoundary } from './components/ErrorBoundary'
import { ConfirmDialog } from './components/ConfirmDialog/ConfirmDialog' import { AboutDialog } from './components/AboutDialog'
export function App() { export function App() {
const tabs = useTabStore(s => s.tabs) const tabs = useTabStore(s => s.tabs)
const activeTabId = useTabStore(s => s.activeTabId) const activeTabId = useTabStore(s => s.activeTabId)
const createTab = useTabStore(s => s.createTab) const createTab = useTabStore(s => s.createTab)
const setModified = useTabStore(s => s.setModified) const setModified = useTabStore(s => s.setModified)
const updateTabContent = useTabStore(s => s.updateTabContent) const updateTabContent = useTabStore(s => s.updateTabContent)
const loadFromDB = useTabStore(s => s.loadFromDB) const loadFromDB = useTabStore(s => s.loadFromDB)
const viewMode = useEditorStore(s => s.viewMode) const viewMode = useEditorStore(s => s.viewMode)
const externallyModified = useEditorStore(s => s.externallyModified) const externallyModified = useEditorStore(s => s.externallyModified)
const setExternallyModified = useEditorStore(s => s.setExternallyModified) const setExternallyModified = useEditorStore(s => s.setExternallyModified)
const { themeMode, cycleTheme } = useTheme() const { themeMode, cycleTheme } = useTheme()
const { confirm, confirmDialogProps } = useConfirm() const [showAbout, setShowAbout] = useState(false)
const [showAbout, setShowAbout] = useState(false) const handleCloseAbout = useCallback(() => setShowAbout(false), [])
const handleCloseAbout = useCallback(() => setShowAbout(false), [])
useSettingsInit()
useSettingsInit() useEffect(() => {
useEffect(() => { loadFromDB() }, [loadFromDB]) loadFromDB()
}, [loadFromDB])
const { handleOpenFile, handleSave, handleSaveAs, handleOpenRecent } = useFileOperations()
const { isAutoSaving, autoSaveEnabled, toggleAutoSave } = useAutoSave() const { handleOpenFile, handleSave, handleSaveAs, handleOpenRecent } = useFileOperations()
useDragDrop() const { isAutoSaving, autoSaveEnabled, toggleAutoSave } = useAutoSave()
useFileWatch() useDragDrop()
// useAutoSave() already called above to get state for toolbar useFileWatch()
// useAutoSave() already called above to get state for toolbar
// UX-01: 传入 confirm 函数替代原生 confirm()
const handleConfirmClose = useCallback(async (message: string): Promise<boolean> => { // UX-01: 传入 confirm 函数替代原生 confirm()
return confirm({ // v0.6.0: 使用 MeToast.confirm（内置 10 秒安全超时，超时自动 resolve(false)）
title: '未保存的更改', const handleConfirmClose = useCallback(async (message: string): Promise<boolean> => {
message, return MeToast.confirm(message, {
variant: 'warning', title: '未保存的更改',
confirmLabel: '不保存', confirmText: '不保存',
cancelLabel: '取消' cancelText: '取消',
}) })
}, [confirm]) }, [])
useUnsavedWarning(() => tabs.some(t => t.isModified), handleConfirmClose, flushSaveToDB) useUnsavedWarning(() => tabs.some(t => t.isModified), handleConfirmClose, flushSaveToDB)
useKeyboard(handleOpenFile, handleSave, handleSaveAs) useKeyboard(handleOpenFile, handleSave, handleSaveAs)
useIpcListeners() useIpcListeners()
useEffect(() => { useEffect(() => {
if (!window.electronAPI) return if (!window.electronAPI) return
const activeTab = tabs.find(t => t.id === activeTabId) const activeTab = tabs.find(t => t.id === activeTabId)
window.electronAPI.tabSwitched(activeTab?.filePath ?? null) window.electronAPI.tabSwitched(activeTab?.filePath ?? null)
}, [activeTabId, tabs]) }, [activeTabId, tabs])
const handleReloadModified = useCallback(async () => { const handleReloadModified = useCallback(async () => {
if (!externallyModified?.filePath || !window.electronAPI) return if (!externallyModified?.filePath || !window.electronAPI) return
const tab = tabs.find(t => t.filePath === externallyModified.filePath) const tab = tabs.find(t => t.filePath === externallyModified.filePath)
if (tab?.isModified) return if (tab?.isModified) return
if (!tab) return if (!tab) return
const result = await window.electronAPI.readFile(externallyModified.filePath) const result = await window.electronAPI.readFile(externallyModified.filePath)
if (result.success && result.content !== undefined) { if (result.success && result.content !== undefined) {
updateTabContent(tab.id, result.content) updateTabContent(tab.id, result.content)
setModified(tab.id, false) setModified(tab.id, false)
} }
setExternallyModified(null) setExternallyModified(null)
}, [externallyModified, tabs, updateTabContent, setModified, setExternallyModified]) }, [externallyModified, tabs, updateTabContent, setModified, setExternallyModified])
return ( return (
<ErrorBoundary> <ErrorBoundary>
<div id="app" className={`mode-${viewMode}`}> <div id="app" className={`mode-${viewMode}`}>
<Toolbar <Toolbar
onOpen={handleOpenFile} onSave={handleSave} onOpen={handleOpenFile}
themeMode={themeMode} onCycleTheme={cycleTheme} onSave={handleSave}
onShowAbout={() => setShowAbout(true)} themeMode={themeMode}
isAutoSaving={isAutoSaving} onCycleTheme={cycleTheme}
autoSaveEnabled={autoSaveEnabled} onShowAbout={() => setShowAbout(true)}
onToggleAutoSave={toggleAutoSave} isAutoSaving={isAutoSaving}
/> autoSaveEnabled={autoSaveEnabled}
<div id="workspace"> onToggleAutoSave={toggleAutoSave}
<Sidebar /> />
<div id="main-content"> <div id="workspace">
<TabBar /> <Sidebar />
{externallyModified && ( <div id="main-content">
<ModifiedBanner onReload={handleReloadModified} onDismiss={() => setExternallyModified(null)} /> <TabBar />
)} {externallyModified && (
{tabs.length > 0 ? ( <ModifiedBanner
<div id="content-wrapper"> onReload={handleReloadModified}
<div id="editor-panel"><Editor themeMode={themeMode} onAppSave={handleSave} /></div> onDismiss={() => setExternallyModified(null)}
</div> />
) : ( )}
<WelcomeScreen onOpen={handleOpenFile} onNew={() => createTab(null, '')} onOpenRecent={handleOpenRecent} /> {tabs.length > 0 ? (
)} <div id="content-wrapper">
</div> <div id="editor-panel">
</div> <Editor themeMode={themeMode} onAppSave={handleSave} />
<DropOverlay /> </div>
{showAbout && <AboutDialog onClose={handleCloseAbout} />} </div>
<ConfirmDialog {...confirmDialogProps} /> ) : (
</div> <WelcomeScreen
</ErrorBoundary> onOpen={handleOpenFile}
) onNew={() => createTab(null, '')}
} onOpenRecent={handleOpenRecent}
/>
App.displayName = 'App' )}
export default App </div>
</div>
<StatusBar />
<DropOverlay />
{showAbout && <AboutDialog onClose={handleCloseAbout} />}
</div>
</ErrorBoundary>
)
}
App.displayName = 'App'
export default App
src/renderer/assets.d.ts
Vendored
+14 -14
View File
@@ -1,14 +1,14 @@
declare module '*.png' { declare module '*.png' {
const src: string const src: string
export default src export default src
} }
declare module '*.svg' { declare module '*.svg' {
const src: string const src: string
export default src export default src
} }
declare module '*.ico' { declare module '*.ico' {
const src: string const src: string
export default src export default src
} }
src/renderer/components/AboutDialog/AboutDialog.tsx
+67 -57
View File
@@ -1,57 +1,67 @@
import React from 'react' import React from 'react'
import { AppIcon, Gitee } from '../Icons' import { AppIcon, Gitee } from '../Icons'
import { APP_VERSION } from '../../lib/constants' import { APP_VERSION } from '../../lib/constants'
interface AboutDialogProps { interface AboutDialogProps {
onClose: () => void onClose: () => void
} }
export const AboutDialog = React.memo(function AboutDialog({ onClose }: AboutDialogProps) { export const AboutDialog = React.memo(function AboutDialog({ onClose }: AboutDialogProps) {
const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>): void => { const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>): void => {
e.preventDefault() e.preventDefault()
if (window.electronAPI?.openExternal) { if (window.electronAPI?.openExternal) {
window.electronAPI.openExternal('https://git.metona.cn/MetonaTeam/MarkLite') window.electronAPI.openExternal('https://git.metona.cn/MetonaTeam/MarkLite')
} else { } else {
window.open('https://git.metona.cn/MetonaTeam/MarkLite', '_blank') window.open('https://git.metona.cn/MetonaTeam/MarkLite', '_blank')
} }
} }
return ( return (
<div className="about-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label="关于 MarkLite"> <div
<div className="about-dialog" onClick={(e: React.MouseEvent) => e.stopPropagation()}> className="about-overlay"
<div className="about-header"> onClick={onClose}
<AppIcon size={64} /> role="dialog"
<h2>MarkLite</h2> aria-modal="true"
<span className="about-version">{APP_VERSION}</span> aria-label="关于 MarkLite"
</div> >
<div className="about-body"> <div className="about-dialog" onClick={(e: React.MouseEvent) => e.stopPropagation()}>
<p>一款轻量级的 Windows 本地 Markdown 编辑器</p> <div className="about-header">
<div className="about-features"> <AppIcon size={64} />
<span>多标签页</span> <h2>MarkLite</h2>
<span>实时预览</span> <span className="about-version">{APP_VERSION}</span>
<span>代码高亮</span> </div>
<span>暗色主题</span> <div className="about-body">
<span>拖拽打开</span> <p>一款轻量级的 Windows 本地 Markdown 编辑器</p>
<span>搜索替换</span> <div className="about-features">
<span>文件树</span> <span>多标签页</span>
<span>文档大纲</span> <span>实时预览</span>
<span>浮动格式栏</span> <span>代码高亮</span>
<span>状态持久化</span> <span>暗色主题</span>
</div> <span>拖拽打开</span>
</div> <span>搜索替换</span>
<div className="about-footer"> <span>文件树</span>
<a className="about-link" href="#" onClick={handleLinkClick}> <span>文档大纲</span>
<Gitee size={16} /> <span>浮动格式栏</span>
<span>git.metona.cn/MetonaTeam/MarkLite</span> <span>状态栏</span>
</a> <span>数据备份</span>
<p>基于 Electron + React + TypeScript 构建</p> <span>状态持久化</span>
<p>MetonaEditor 0.4.0 · MetonaToast 0.5.0 · MetonaSqlark 0.4.1</p> </div>
<p className="about-copyright">© 2026 thzxx</p> </div>
</div> <div className="about-footer">
<button className="about-close-btn" onClick={onClose}>关闭</button> <a className="about-link" href="#" onClick={handleLinkClick}>
</div> <Gitee size={16} />
</div> <span>git.metona.cn/MetonaTeam/MarkLite</span>
) </a>
}) <p>基于 Electron + React + TypeScript 构建</p>
<p>MetonaEditor 0.4.0 · MetonaToast 0.5.0 · MetonaSqlark 0.4.1</p>
AboutDialog.displayName = 'AboutDialog' <p className="about-copyright">© 2026 thzxx</p>
</div>
<button className="about-close-btn" onClick={onClose}>
关闭
</button>
</div>
</div>
)
})
AboutDialog.displayName = 'AboutDialog'
src/renderer/components/ConfirmDialog/ConfirmDialog.tsx
-111
View File
@@ -1,111 +0,0 @@
import React, { useEffect, useRef, useCallback } from 'react'
interface ConfirmDialogProps {
open: boolean
title: string
message: string
confirmLabel?: string
cancelLabel?: string
variant?: 'danger' | 'warning' | 'info'
onConfirm: () => void
onCancel: () => void
}
export const ConfirmDialog = React.memo(function ConfirmDialog({
open,
title,
message,
confirmLabel = '确定',
cancelLabel = '取消',
variant = 'warning',
onConfirm,
onCancel
}: ConfirmDialogProps) {
const confirmRef = useRef<HTMLButtonElement>(null)
const previousFocusRef = useRef<HTMLElement | null>(null)
// 打开时保存焦点并聚焦确认按钮；关闭时恢复焦点
useEffect(() => {
if (!open) {
// Only restore focus if the element is still in the DOM
if (previousFocusRef.current && previousFocusRef.current.isConnected) {
previousFocusRef.current.focus()
}
return
}
previousFocusRef.current = document.activeElement as HTMLElement
const timer = setTimeout(() => confirmRef.current?.focus(), 50)
return () => {
clearTimeout(timer)
}
}, [open])
// ESC 键关闭
const handleKeyDown = useCallback((e: KeyboardEvent) => {
if (e.key === 'Escape') {
e.preventDefault()
onCancel()
}
}, [onCancel])
useEffect(() => {
if (!open) return
document.addEventListener('keydown', handleKeyDown)
return () => document.removeEventListener('keydown', handleKeyDown)
}, [open, handleKeyDown])
// 防止背景滚动
useEffect(() => {
if (!open) return
const original = document.body.style.overflow
document.body.style.overflow = 'hidden'
return () => { document.body.style.overflow = original }
}, [open])
if (!open) return null
return (
<div
className="confirm-overlay"
onClick={onCancel}
role="presentation"
>
<div
className="confirm-dialog"
role="alertdialog"
aria-modal="true"
aria-labelledby="confirm-title"
aria-describedby="confirm-message"
onClick={e => e.stopPropagation()}
>
<div className={`confirm-header confirm-${variant}`}>
<h3 id="confirm-title">{title}</h3>
</div>
<div className="confirm-body">
<p id="confirm-message">{message}</p>
</div>
<div className="confirm-actions">
<button
className="confirm-btn confirm-btn-cancel"
onClick={onCancel}
type="button"
>
{cancelLabel}
</button>
<button
ref={confirmRef}
className={`confirm-btn confirm-btn-${variant}`}
onClick={onConfirm}
type="button"
>
{confirmLabel}
</button>
</div>
</div>
</div>
)
})
ConfirmDialog.displayName = 'ConfirmDialog'
src/renderer/components/ConfirmDialog/index.ts
-1
View File
@@ -1 +0,0 @@
export { ConfirmDialog } from './ConfirmDialog'
src/renderer/components/Editor/Editor.tsx
+310 -249
View File
@@ -1,249 +1,310 @@
import React, { useEffect, useMemo, useRef } from 'react' import React, { useEffect, useMemo, useRef } from 'react'
import MeEditor from '@metona-team/metona-editor' import MeEditor from '@metona-team/metona-editor'
import type { MarkdownEditor } from '@metona-team/metona-editor' import type { MarkdownEditor } from '@metona-team/metona-editor'
import mermaid from 'mermaid' import mermaid from 'mermaid'
import { useTabStore } from '../../stores/tabStore' import { useTabStore } from '../../stores/tabStore'
import { setMetonaEditorGetter, useEditorStore } from '../../stores/editorStore' import { setMetonaEditorGetter, useEditorStore } from '../../stores/editorStore'
import { settingsRepository } from '../../db/settingsRepository' import { settingsRepository } from '../../db/settingsRepository'
import { renderMarkdownSync } from '../../lib/markdown' import { renderMarkdownSync } from '../../lib/markdown'
import type { ThemeMode } from '../../types/settings' import type { ThemeMode } from '../../types/settings'
// v0.4.0: 这些类型不再作为命名导出暴露，本地声明以保持类型安全 // v0.4.0: 这些类型不再作为命名导出暴露，本地声明以保持类型安全
type EditMode = 'edit' | 'split' | 'preview' type EditMode = 'edit' | 'split' | 'preview'
type ThemeName = 'light' | 'dark' | 'auto' | 'warm' | string type ThemeName = 'light' | 'dark' | 'auto' | 'warm' | string
// v0.4.5: Mermaid 初始化（全局一次性配置） // v0.4.5: Mermaid 初始化（全局一次性配置）
mermaid.initialize({ startOnLoad: false, theme: 'default' }) mermaid.initialize({ startOnLoad: false, theme: 'default' })
interface EditorProps { interface EditorProps {
themeMode: ThemeMode themeMode: ThemeMode
onAppSave?: () => void onAppSave?: () => void
} }
/** 将应用 viewMode 映射到 MetonaEditor 的 mode */ /** 将应用 viewMode 映射到 MetonaEditor 的 mode */
function mapViewMode(vm: string): EditMode { function mapViewMode(vm: string): EditMode {
if (vm === 'source') return 'edit' if (vm === 'source') return 'edit'
if (vm === 'preview') return 'preview' if (vm === 'preview') return 'preview'
return 'split' return 'split'
} }
/** 将 MetonaEditor mode 反向映射到应用 viewMode */ /** 将 MetonaEditor mode 反向映射到应用 viewMode */
function reverseMapMode(mode: EditMode): 'editor' | 'preview' | 'source' { function reverseMapMode(mode: EditMode): 'editor' | 'preview' | 'source' {
if (mode === 'edit') return 'source' if (mode === 'edit') return 'source'
if (mode === 'preview') return 'preview' if (mode === 'preview') return 'preview'
return 'editor' return 'editor'
} }
/** 预设插件（字符串形式，与 demo 一致） */ /** 预设插件（字符串形式，与 demo 一致） */
const EDITOR_PLUGINS: string[] = [ const EDITOR_PLUGINS: string[] = [
'searchReplace', // Ctrl+F/Ctrl+H 'searchReplace', // Ctrl+F/Ctrl+H
'imagePaste', // Ctrl+V 粘贴图片 'imagePaste', // Ctrl+V 粘贴图片
'exportTool', // 导出 MD/HTML 'exportTool', // 导出 MD/HTML
'shortcutHelp', // 按 ? 弹出快捷键面板 'shortcutHelp', // 按 ? 弹出快捷键面板
] ]
/** /**
* Editor 组件 — 基于 MetonaEditor 的 Markdown 编辑器。 * Editor 组件 — 基于 MetonaEditor 的 Markdown 编辑器。
*/ */
export const Editor = React.memo(function Editor({ themeMode, onAppSave }: EditorProps) { export const Editor = React.memo(function Editor({ themeMode, onAppSave }: EditorProps) {
const tabs = useTabStore(s => s.tabs) const tabs = useTabStore(s => s.tabs)
const activeTabId = useTabStore(s => s.activeTabId) const activeTabId = useTabStore(s => s.activeTabId)
// B-03: 用 activeTabId + tabs 推导 activeTab 而非 s.getActiveTab()， // B-03: 用 activeTabId + tabs 推导 activeTab 而非 s.getActiveTab()，
// 后者每次返回新对象引用导致 Zustand 无条件重渲染 // 后者每次返回新对象引用导致 Zustand 无条件重渲染
const activeTab = useMemo( const activeTab = useMemo(() => tabs.find(t => t.id === activeTabId) ?? null, [tabs, activeTabId])
() => tabs.find(t => t.id === activeTabId) ?? null, const updateTabContent = useTabStore(s => s.updateTabContent)
[tabs, activeTabId] const setModified = useTabStore(s => s.setModified)
) const updateTabScroll = useTabStore(s => s.updateTabScroll)
const updateTabContent = useTabStore(s => s.updateTabContent) const viewMode = useEditorStore(s => s.viewMode)
const setModified = useTabStore(s => s.setModified) const setViewMode = useEditorStore(s => s.setViewMode)
const updateTabScroll = useTabStore(s => s.updateTabScroll) const setStats = useEditorStore(s => s.setStats)
const viewMode = useEditorStore(s => s.viewMode) const setCursor = useEditorStore(s => s.setCursor)
const setViewMode = useEditorStore(s => s.setViewMode) const setZenMode = useEditorStore(s => s.setZenMode)
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
const editorRef = useRef<MarkdownEditor | null>(null) const editorRef = useRef<MarkdownEditor | null>(null)
const currentContentRef = useRef('') const currentContentRef = useRef('')
// 稳定的回调引用 // 稳定的回调引用
const activeTabIdRef = useRef(activeTabId) const activeTabIdRef = useRef(activeTabId)
activeTabIdRef.current = activeTabId activeTabIdRef.current = activeTabId
// ── 初始化 MetonaEditor ────────────────────────────────── // ── 初始化 MetonaEditor ──────────────────────────────────
useEffect(() => { useEffect(() => {
const container = containerRef.current const container = containerRef.current
if (!container) return if (!container) return
const config = { const config = {
value: activeTab?.content ?? '', value: activeTab?.content ?? '',
mode: mapViewMode(viewMode), mode: mapViewMode(viewMode),
height: '100%', height: '100%',
toolbar: [ toolbar: [
'bold', 'italic', 'strikethrough', 'underline', 'code', '|', 'bold',
'h1', 'h2', 'h3', '|', 'italic',
'quote', 'ul', 'ol', 'indent', 'outdent', '|', 'strikethrough',
'link', 'image', 'table', 'hr', '|', 'underline',
'undo', 'redo', '|', 'code',
'edit', 'split', 'preview', 'fullscreen' '|',
], 'h1',
locale: 'zh-CN', 'h2',
theme: themeMode as ThemeName, 'h3',
placeholder: '在此输入 Markdown 内容...', '|',
spellcheck: false, 'quote',
tabSize: 2, 'ul',
wordCount: true, 'ol',
autofocus: true, 'indent',
lineNumbers: true, 'outdent',
autoBrackets: true, '|',
readOnly: viewMode === 'preview', 'link',
plugins: EDITOR_PLUGINS, 'image',
// v0.5.0: 启用 0.4.0 浮动格式工具栏（选中文本弹出格式化按钮） 'table',
floatingToolbar: true, 'hr',
// v0.2.4 新增配置项 '|',
syncScroll: true, 'undo',
wordWrap: true, 'redo',
outline: false, // 使用自研 OutlinePanel '|',
historyLimit: 100, 'edit',
historyDebounce: 400, 'split',
'preview',
// 使用 unified 管线渲染，保留图片路径修复能力 'fullscreen',
render: (md: string) => { ],
const tabId = activeTabIdRef.current locale: 'zh-CN',
const filePath = tabId theme: themeMode as ThemeName,
? (useTabStore.getState().tabs.find(t => t.id === tabId)?.filePath ?? null) placeholder: '在此输入 Markdown 内容...',
: null spellcheck: false,
return renderMarkdownSync(md, filePath) tabSize: 2,
}, wordCount: true,
autofocus: true,
// 内容变化 → 同步到 tabStore lineNumbers: true,
onChange: (value: string) => { autoBrackets: true,
const tabId = activeTabIdRef.current readOnly: viewMode === 'preview',
if (!tabId) return plugins: EDITOR_PLUGINS,
const tab = useTabStore.getState().tabs.find(t => t.id === tabId) // v0.5.0: 启用 0.4.0 浮动格式工具栏（选中文本弹出格式化按钮）
if (tab?.content === value) return floatingToolbar: true,
currentContentRef.current = value // v0.2.4 新增配置项
updateTabContent(tabId, value) syncScroll: true,
setModified(tabId, true) wordWrap: true,
}, outline: false, // 使用自研 OutlinePanel
historyLimit: 100,
// 模式切换 → 同步到 editorStore 并持久化 historyDebounce: 400,
onModeChange: (mode: string) => {
const mapped = reverseMapMode(mode as EditMode) // 使用内置解析器渲染（unified 管线已移除），保留图片路径修复能力
setViewMode(mapped) // v0.6.0: highlight 使用内置零依赖高亮器（16 种语言）
settingsRepository.save({ viewMode: mapped }) highlight: MeEditor.highlight,
}, render: (md: string) => {
const tabId = activeTabIdRef.current
// Ctrl+S → 触发应用层保存（Electron IPC 写文件系统） const filePath = tabId
onSave: () => { ? (useTabStore.getState().tabs.find(t => t.id === tabId)?.filePath ?? null)
onAppSave?.() : null
}, return renderMarkdownSync(md, filePath)
},
// v0.2.4 新增回调: 链接点击 → 安全打开外部链接
onLinkClick: (href: string) => { // 内容变化 → 同步到 tabStore
if (window.electronAPI?.openExternal) { onChange: (value: string) => {
window.electronAPI.openExternal(href) const tabId = activeTabIdRef.current
} if (!tabId) return
}, const tab = useTabStore.getState().tabs.find(t => t.id === tabId)
if (tab?.content === value) return
// v0.2.4 新增回调: 焦点事件（预留扩展点） currentContentRef.current = value
onFocus: () => { updateTabContent(tabId, value)
// 编辑器获得焦点 setModified(tabId, true)
}, },
onBlur: () => {
// 编辑器失去焦点 // 模式切换 → 同步到 editorStore 并持久化
}, onModeChange: (mode: string) => {
} const mapped = reverseMapMode(mode as EditMode)
setViewMode(mapped)
const editor = MeEditor.create(container, config) settingsRepository.save({ viewMode: mapped })
},
editorRef.current = editor
setMetonaEditorGetter(() => editor) // Ctrl+S → 触发应用层保存（Electron IPC 写文件系统）
currentContentRef.current = activeTab?.content ?? '' onSave: () => {
onAppSave?.()
// v0.5.0: 绑定 afterRender → 触发 Mermaid 图表渲染 },
const renderMermaid = () => {
try { mermaid.run({ querySelector: '.me-mermaid .mermaid' }) } catch { /* 容错 */ } // v0.2.4 新增回调: 链接点击 → 安全打开外部链接
} onLinkClick: (href: string) => {
editor.on('afterRender', renderMermaid) if (window.electronAPI?.openExternal) {
// 首次渲染后延迟触发一次 window.electronAPI.openExternal(href)
setTimeout(renderMermaid, 300) }
},
return () => {
editor.destroy() // v0.2.4 新增回调: 焦点事件（预留扩展点）
editorRef.current = null onFocus: () => {
setMetonaEditorGetter(() => null) // 编辑器获得焦点
} },
// 仅在挂载时创建一次 onBlur: () => {
// eslint-disable-next-line react-hooks/exhaustive-deps // 编辑器失去焦点
}, []) },
}
// ── 标签切换：同步内容到编辑器 ──────────────────────────
useEffect(() => { const editor = MeEditor.create(container, config)
if (!activeTab || !editorRef.current) return
if (activeTab.content === currentContentRef.current) return editorRef.current = editor
setMetonaEditorGetter(() => editor)
currentContentRef.current = activeTab.content currentContentRef.current = activeTab?.content ?? ''
// silent: true — 不触发 onChange，避免重复更新 tabStore // v0.5.0: 绑定 afterRender → 触发 Mermaid 图表渲染
editorRef.current.setValue(activeTab.content, { silent: true }) const renderMermaid = () => {
try {
// 恢复滚动位置 mermaid.run({ querySelector: '.me-mermaid .mermaid' })
requestAnimationFrame(() => { } catch {
const c = containerRef.current /* 容错 */
if (!c) return }
const textarea = c.querySelector('textarea') }
if (textarea) { editor.on('afterRender', renderMermaid)
textarea.scrollTop = activeTab.scrollTop // 首次渲染后延迟触发一次
} setTimeout(renderMermaid, 300)
const preview = c.querySelector('.me-preview') as HTMLElement | null
if (preview) { // v0.6.0: 实时状态同步 — getStats + 光标/zen 事件 → editorStore（状态栏消费）
preview.scrollTop = activeTab.scrollTop const syncStats = () => {
} try {
}) const s = editor.getStats()
// eslint-disable-next-line react-hooks/exhaustive-deps setStats({
}, [activeTabId]) characters: s.characters,
words: s.words,
// ── 取消挂载/标签切换前保存滚动位置 ────────────────────── chineseChars: s.chineseChars,
useEffect(() => { englishWords: s.englishWords,
const c = containerRef.current lines: s.lines,
return () => { readingTime: s.readingTime,
if (!activeTabId || !editorRef.current || !c) return })
const textarea = c.querySelector('textarea') } catch {
const preview = c.querySelector('.me-preview') as HTMLElement | null /* 容错 */
const scrollTop = textarea?.scrollTop ?? preview?.scrollTop ?? 0 }
updateTabScroll(activeTabId, { scrollTop }) }
} const syncCursor = (pos?: { line: number; column: number }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps try {
}, [activeTabId]) setCursor(pos ?? editor.getCursorPosition())
} catch {
// ── 主题同步 ────────────────────────────────────────── /* 容错 */
useEffect(() => { }
try { }
// 全局主题（documentElement + localStorage） const syncZen = (zen: boolean) => {
MeEditor.setTheme(themeMode) setZenMode(Boolean(zen))
// v0.1.5+: 实例级主题，自动处理 wrapper CSS 变量 }
editorRef.current?.setTheme(themeMode) editor.on('change', syncStats)
} catch { editor.on('input', syncStats)
// 容错 editor.on('cursorMove', syncCursor)
} editor.on('zenChange', syncZen)
}, [themeMode]) syncStats()
syncCursor()
// ── 视图模式同步 ──────────────────────────────────────────
useEffect(() => { return () => {
const editor = editorRef.current editor.destroy()
if (!editor) return editorRef.current = null
const targetMode = mapViewMode(viewMode) setMetonaEditorGetter(() => null)
if (editor.getMode() !== targetMode) { }
editor.setMode(targetMode) // 仅在挂载时创建一次
} // eslint-disable-next-line react-hooks/exhaustive-deps
// 预览模式设为只读 }, [])
editor.setReadOnly(viewMode === 'preview')
}, [viewMode]) // ── 标签切换：同步内容到编辑器 ──────────────────────────
useEffect(() => {
return ( if (!activeTab || !editorRef.current) return
<div className="editor-container" role="region" aria-label="Markdown编辑器"> if (activeTab.content === currentContentRef.current) return
<div ref={containerRef} className="metona-editor-wrapper" />
</div> currentContentRef.current = activeTab.content
)
}) // silent: true — 不触发 onChange，避免重复更新 tabStore
editorRef.current.setValue(activeTab.content, { silent: true })
Editor.displayName = 'Editor'
// 恢复滚动位置
requestAnimationFrame(() => {
const c = containerRef.current
if (!c) return
const textarea = c.querySelector('textarea')
if (textarea) {
textarea.scrollTop = activeTab.scrollTop
}
const preview = c.querySelector('.me-preview') as HTMLElement | null
if (preview) {
preview.scrollTop = activeTab.scrollTop
}
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeTabId])
// ── 取消挂载/标签切换前保存滚动位置 ──────────────────────
useEffect(() => {
const c = containerRef.current
return () => {
if (!activeTabId || !editorRef.current || !c) return
const textarea = c.querySelector('textarea')
const preview = c.querySelector('.me-preview') as HTMLElement | null
const scrollTop = textarea?.scrollTop ?? preview?.scrollTop ?? 0
updateTabScroll(activeTabId, { scrollTop })
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeTabId])
// ── 主题同步 ──────────────────────────────────────────
useEffect(() => {
try {
// 全局主题（documentElement + localStorage）
MeEditor.setTheme(themeMode)
// v0.1.5+: 实例级主题，自动处理 wrapper CSS 变量
editorRef.current?.setTheme(themeMode)
} catch {
// 容错
}
}, [themeMode])
// ── 视图模式同步 ──────────────────────────────────────────
useEffect(() => {
const editor = editorRef.current
if (!editor) return
const targetMode = mapViewMode(viewMode)
if (editor.getMode() !== targetMode) {
editor.setMode(targetMode)
}
// 预览模式设为只读
editor.setReadOnly(viewMode === 'preview')
}, [viewMode])
return (
<div className="editor-container" role="region" aria-label="Markdown编辑器">
<div ref={containerRef} className="metona-editor-wrapper" />
</div>
)
})
Editor.displayName = 'Editor'
src/renderer/components/ErrorBoundary/ErrorBoundary.tsx
+56 -60
View File
@@ -1,60 +1,56 @@
import { Component, ErrorInfo, ReactNode } from 'react' import { Component, ErrorInfo, ReactNode } from 'react'
interface Props { interface Props {
children: ReactNode children: ReactNode
fallback?: ReactNode fallback?: ReactNode
} }
interface State { interface State {
hasError: boolean hasError: boolean
error: Error | null error: Error | null
} }
export class ErrorBoundary extends Component<Props, State> { export class ErrorBoundary extends Component<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props) super(props)
this.state = { hasError: false, error: null } this.state = { hasError: false, error: null }
} }
static getDerivedStateFromError(error: Error): State { static getDerivedStateFromError(error: Error): State {
return { hasError: true, error } return { hasError: true, error }
} }
componentDidCatch(error: Error, errorInfo: ErrorInfo): void { componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
// eslint-disable-next-line no-console -- React error boundary standard pattern // eslint-disable-next-line no-console -- React error boundary standard pattern
console.error('ErrorBoundary caught an error:', error, errorInfo) console.error('ErrorBoundary caught an error:', error, errorInfo)
} }
handleReset = (): void => { handleReset = (): void => {
this.setState({ hasError: false, error: null }) this.setState({ hasError: false, error: null })
} }
render(): ReactNode { render(): ReactNode {
if (this.state.hasError) { if (this.state.hasError) {
if (this.props.fallback) { if (this.props.fallback) {
return this.props.fallback return this.props.fallback
} }
const isDev = const isDev =
(typeof import.meta !== 'undefined' && (typeof import.meta !== 'undefined' &&
(import.meta as { env?: { DEV?: boolean } }).env?.DEV) ?? (import.meta as { env?: { DEV?: boolean } }).env?.DEV) ??
false false
return ( return (
<div className="error-boundary-root" role="alert"> <div className="error-boundary-root" role="alert">
<h2 className="error-boundary-title">应用遇到了错误</h2> <h2 className="error-boundary-title">应用遇到了错误</h2>
{isDev && ( {isDev && <pre className="error-boundary-detail">{this.state.error?.message}</pre>}
<pre className="error-boundary-detail"> <button className="error-boundary-reset" onClick={this.handleReset}>
{this.state.error?.message} 重试
</pre> </button>
)} </div>
<button className="error-boundary-reset" onClick={this.handleReset}> )
重试 }
</button>
</div> return this.props.children
) }
} }
return this.props.children
}
}
src/renderer/components/FileTree/FileTree.tsx
+3 -3
View File
@@ -18,7 +18,7 @@ export const FileTree = React.memo(function FileTree({
expandedDirs, expandedDirs,
toggleDir, toggleDir,
activeFilePath, activeFilePath,
onFileClick onFileClick,
}: FileTreeProps) { }: FileTreeProps) {
return ( return (
<> <>
@@ -30,7 +30,7 @@ export const FileTree = React.memo(function FileTree({
<React.Fragment key={node.path}> <React.Fragment key={node.path}>
<div <div
className={`tree-item ${isActive ? 'active' : ''}`} className={`tree-item ${isActive ? 'active' : ''}`}
style={{ paddingLeft: (8 + depth * 16) + 'px' }} style={{ paddingLeft: 8 + depth * 16 + 'px' }}
role="treeitem" role="treeitem"
aria-expanded={node.type === 'dir' ? isExpanded : undefined} aria-expanded={node.type === 'dir' ? isExpanded : undefined}
aria-selected={isActive} aria-selected={isActive}
@@ -43,7 +43,7 @@ export const FileTree = React.memo(function FileTree({
onFileClick(node.path) onFileClick(node.path)
} }
}} }}
onKeyDown={(e) => { onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') { if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault() e.preventDefault()
if (node.type === 'dir') { if (node.type === 'dir') {
src/renderer/components/Icons.tsx
+337 -176
View File
@@ -1,176 +1,337 @@
import React from 'react' import React from 'react'
import appIconUrl from '../assets/icon.png' import appIconUrl from '../assets/icon.png'
// 统一图标 Props // 统一图标 Props
interface IconProps { interface IconProps {
size?: number size?: number
className?: string className?: string
style?: React.CSSProperties style?: React.CSSProperties
} }
const defaultProps: Partial<IconProps> = { size: 18 } const defaultProps: Partial<IconProps> = { size: 18 }
// ===== 应用图标 ===== // ===== 应用图标 =====
export function AppIcon({ size = 80 }: IconProps) { export function AppIcon({ size = 80 }: IconProps) {
return ( return <img src={appIconUrl} alt="MarkLite" width={size} height={size} draggable={false} />
<img src={appIconUrl} alt="MarkLite" width={size} height={size} draggable={false} /> }
)
} // ===== 工具栏图标 =====
export function FolderOpen({ size = defaultProps.size }: IconProps) {
// ===== 工具栏图标 ===== return (
export function FolderOpen({ size = defaultProps.size }: IconProps) { <svg
return ( width={size}
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> height={size}
<path d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v1"/> viewBox="0 0 24 24"
<path d="M20.5 15H5a2 2 0 0 0-2 2l1.5 7h18l2-7a2 2 0 0 0-2-2h-2.5z" fill="none"/> fill="none"
<path d="M12 11h4" strokeDasharray="2 2"/> stroke="currentColor"
</svg> strokeWidth="1.75"
) strokeLinecap="round"
} strokeLinejoin="round"
>
export function Save({ size = defaultProps.size }: IconProps) { <path d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v1" />
return ( <path d="M20.5 15H5a2 2 0 0 0-2 2l1.5 7h18l2-7a2 2 0 0 0-2-2h-2.5z" fill="none" />
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> <path d="M12 11h4" strokeDasharray="2 2" />
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/> </svg>
<polyline points="17 21 17 13 7 13 7 21"/> )
<polyline points="7 3 7 8 15 8"/> }
</svg>
) export function Save({ size = defaultProps.size }: IconProps) {
} return (
<svg
export function Moon({ size = defaultProps.size }: IconProps) { width={size}
return ( height={size}
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> viewBox="0 0 24 24"
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> fill="none"
<circle cx="19" cy="5" r="1" fill="currentColor" opacity="0.5"/> stroke="currentColor"
</svg> strokeWidth="1.75"
) strokeLinecap="round"
} strokeLinejoin="round"
>
export function Sun({ size = defaultProps.size }: IconProps) { <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
return ( <polyline points="17 21 17 13 7 13 7 21" />
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> <polyline points="7 3 7 8 15 8" />
<circle cx="12" cy="12" r="5"/> </svg>
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.3"/> )
<line x1="12" y1="1" x2="12" y2="3"/> }
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> export function Moon({ size = defaultProps.size }: IconProps) {
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> return (
<line x1="1" y1="12" x2="3" y2="12"/> <svg
<line x1="21" y1="12" x2="23" y2="12"/> width={size}
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> height={size}
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> viewBox="0 0 24 24"
</svg> fill="none"
) stroke="currentColor"
} strokeWidth="1.75"
strokeLinecap="round"
// ===== 工具栏右侧图标 ===== strokeLinejoin="round"
export function Gitee({ size = defaultProps.size }: IconProps) { >
return ( <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"> <circle cx="19" cy="5" r="1" fill="currentColor" opacity="0.5" />
<path d="M11.984 0C5.372 0 0 5.372 0 11.984c0 6.612 5.372 11.984 11.984 11.984s11.984-5.372 11.984-11.984C23.968 5.372 18.596 0 11.984 0zm6.78 18.272c-.224.448-.832.672-1.344.448l-3.584-1.792c-.448-.224-.672-.448-.672-.896v-4.704c0-.448.448-.896.896-.896h4.704c.448 0 .896.448.896.896v4.704c0 .896-.448 1.568-1.344 1.792l.448.64zm-6.112-2.688c-.896 0-1.568-.672-1.568-1.568s.672-1.568 1.568-1.568 1.568.672 1.568 1.568-.672 1.568-1.568 1.568z"/> </svg>
</svg> )
) }
}
export function Sun({ size = defaultProps.size }: IconProps) {
export function Info({ size = defaultProps.size }: IconProps) { return (
return ( <svg
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> width={size}
<circle cx="12" cy="12" r="10"/> height={size}
<line x1="12" y1="16" x2="12" y2="12"/> viewBox="0 0 24 24"
<line x1="12" y1="8" x2="12.01" y2="8"/> fill="none"
</svg> stroke="currentColor"
) strokeWidth="1.75"
} strokeLinecap="round"
strokeLinejoin="round"
// ===== 标签栏图标 ===== >
export function Close({ size = 10 }: IconProps) { <circle cx="12" cy="12" r="5" />
return ( <circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.3" />
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"> <line x1="12" y1="1" x2="12" y2="3" />
<line x1="18" y1="6" x2="6" y2="18"/> <line x1="12" y1="21" x2="12" y2="23" />
<line x1="6" y1="6" x2="18" y2="18"/> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
</svg> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
) <line x1="1" y1="12" x2="3" y2="12" />
} <line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
export function Plus({ size = 14 }: IconProps) { <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
return ( </svg>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"> )
<line x1="12" y1="5" x2="12" y2="19"/> }
<line x1="5" y1="12" x2="19" y2="12"/>
</svg> // ===== 工具栏右侧图标 =====
) export function Gitee({ size = defaultProps.size }: IconProps) {
} return (
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
// ===== 侧边栏图标 ===== <path d="M11.984 0C5.372 0 0 5.372 0 11.984c0 6.612 5.372 11.984 11.984 11.984s11.984-5.372 11.984-11.984C23.968 5.372 18.596 0 11.984 0zm6.78 18.272c-.224.448-.832.672-1.344.448l-3.584-1.792c-.448-.224-.672-.448-.672-.896v-4.704c0-.448.448-.896.896-.896h4.704c.448 0 .896.448.896.896v4.704c0 .896-.448 1.568-1.344 1.792l.448.64zm-6.112-2.688c-.896 0-1.568-.672-1.568-1.568s.672-1.568 1.568-1.568 1.568.672 1.568 1.568-.672 1.568-1.568 1.568z" />
export function Folder({ size = 14 }: IconProps) { </svg>
return ( )
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> }
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
<line x1="9" y1="13" x2="15" y2="13" opacity="0.4"/> export function Info({ size = defaultProps.size }: IconProps) {
</svg> return (
) <svg
} width={size}
height={size}
export function File({ size = 14 }: IconProps) { viewBox="0 0 24 24"
return ( fill="none"
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> stroke="currentColor"
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> strokeWidth="1.75"
<polyline points="14 2 14 8 20 8"/> strokeLinecap="round"
<line x1="8" y1="13" x2="16" y2="13" opacity="0.4"/> strokeLinejoin="round"
<line x1="8" y1="17" x2="13" y2="17" opacity="0.3"/> >
</svg> <circle cx="12" cy="12" r="10" />
) <line x1="12" y1="16" x2="12" y2="12" />
} <line x1="12" y1="8" x2="12.01" y2="8" />
</svg>
export function ChevronRight({ size = 10 }: IconProps) { )
return ( }
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="9 18 15 12 9 6"/> // ===== 标签栏图标 =====
</svg> export function Close({ size = 10 }: IconProps) {
) return (
} <svg
width={size}
export function FolderPlus({ size = 14 }: IconProps) { height={size}
return ( viewBox="0 0 24 24"
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> fill="none"
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/> stroke="currentColor"
<line x1="12" y1="11" x2="12" y2="17"/> strokeWidth="2.5"
<line x1="9" y1="14" x2="15" y2="14"/> strokeLinecap="round"
</svg> >
) <line x1="18" y1="6" x2="6" y2="18" />
} <line x1="6" y1="6" x2="18" y2="18" />
</svg>
// ===== 拖拽覆盖层图标 ===== )
export function UploadCloud({ size = 64 }: IconProps) { }
return (
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"> export function Plus({ size = 14 }: IconProps) {
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/> return (
<polyline points="12 16 12 8"/> <svg
<polyline points="8 12 12 8 16 12"/> width={size}
<line x1="12" y1="16" x2="12" y2="22"/> height={size}
</svg> viewBox="0 0 24 24"
) fill="none"
} stroke="currentColor"
strokeWidth="2"
// ===== 欢迎屏幕图标 ===== strokeLinecap="round"
export function WelcomeFile({ size = 20 }: IconProps) { >
return ( <line x1="12" y1="5" x2="12" y2="19" />
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> <line x1="5" y1="12" x2="19" y2="12" />
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/> </svg>
<line x1="12" y1="11" x2="12" y2="17"/> )
<line x1="9" y1="14" x2="15" y2="14"/> }
</svg>
) // ===== 侧边栏图标 =====
} export function Folder({ size = 14 }: IconProps) {
return (
export function WelcomeNew({ size = 20 }: IconProps) { <svg
return ( width={size}
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"> height={size}
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> viewBox="0 0 24 24"
<polyline points="14 2 14 8 20 8"/> fill="none"
<line x1="12" y1="18" x2="12" y2="12"/> stroke="currentColor"
<line x1="9" y1="15" x2="15" y2="15"/> strokeWidth="1.75"
</svg> strokeLinecap="round"
) strokeLinejoin="round"
} >
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
<line x1="9" y1="13" x2="15" y2="13" opacity="0.4" />
</svg>
)
}
export function File({ size = 14 }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
<line x1="8" y1="13" x2="16" y2="13" opacity="0.4" />
<line x1="8" y1="17" x2="13" y2="17" opacity="0.3" />
</svg>
)
}
export function ChevronRight({ size = 10 }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="9 18 15 12 9 6" />
</svg>
)
}
export function FolderPlus({ size = 14 }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
<line x1="12" y1="11" x2="12" y2="17" />
<line x1="9" y1="14" x2="15" y2="14" />
</svg>
)
}
// ===== 拖拽覆盖层图标 =====
export function UploadCloud({ size = 64 }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
<polyline points="12 16 12 8" />
<polyline points="8 12 12 8 16 12" />
<line x1="12" y1="16" x2="12" y2="22" />
</svg>
)
}
// ===== v0.6.0: 数据备份图标 =====
export function Download({ size = defaultProps.size }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
)
}
export function Upload({ size = defaultProps.size }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="17 8 12 3 7 8" />
<line x1="12" y1="3" x2="12" y2="15" />
</svg>
)
}
// ===== 欢迎屏幕图标 =====
export function WelcomeFile({ size = 20 }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
<line x1="12" y1="11" x2="12" y2="17" />
<line x1="9" y1="14" x2="15" y2="14" />
</svg>
)
}
export function WelcomeNew({ size = 20 }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
<line x1="12" y1="18" x2="12" y2="12" />
<line x1="9" y1="15" x2="15" y2="15" />
</svg>
)
}
src/renderer/components/LoadingSpinner/LoadingSpinner.tsx
-70
View File
@@ -1,70 +0,0 @@
import React from 'react'
interface LoadingSpinnerProps {
size?: 'small' | 'medium' | 'large'
label?: string
/** 是否全屏覆盖 */
overlay?: boolean
}
const sizeMap = {
small: 16,
medium: 24,
large: 36
}
/**
* UX-02: 通用加载指示器组件
*/
export const LoadingSpinner = React.memo(function LoadingSpinner({
size = 'medium',
label,
overlay = false
}: LoadingSpinnerProps) {
const px = sizeMap[size]
const spinner = (
<div
className={`loading-spinner loading-spinner-${size}`}
role="status"
aria-label={label || '加载中'}
>
<svg
className="loading-spinner-svg"
width={px}
height={px}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
opacity="0.2"
/>
<path
d="M12 2a10 10 0 0 1 10 10"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
/>
</svg>
{label && <span className="loading-spinner-label">{label}</span>}
</div>
)
if (!overlay) return spinner
return (
<div className="loading-overlay" aria-busy="true">
{spinner}
</div>
)
})
LoadingSpinner.displayName = 'LoadingSpinner'
src/renderer/components/LoadingSpinner/index.ts
-1
View File
@@ -1 +0,0 @@
export { LoadingSpinner } from './LoadingSpinner'
src/renderer/components/ModifiedBanner/ModifiedBanner.tsx
+10 -3
View File
@@ -5,12 +5,19 @@ interface ModifiedBannerProps {
onDismiss: () => void onDismiss: () => void
} }
export const ModifiedBanner = React.memo(function ModifiedBanner({ onReload, onDismiss }: ModifiedBannerProps) { export const ModifiedBanner = React.memo(function ModifiedBanner({
onReload,
onDismiss,
}: ModifiedBannerProps) {
return ( return (
<div id="modified-banner" role="alert" aria-live="assertive"> <div id="modified-banner" role="alert" aria-live="assertive">
<span>文件已被外部程序修改</span> <span>文件已被外部程序修改</span>
<button className="banner-btn" onClick={onReload} aria-label="重新加载文件">重新加载</button> <button className="banner-btn" onClick={onReload} aria-label="重新加载文件">
<button className="banner-btn" onClick={onDismiss} aria-label="忽略外部修改">忽略</button> 重新加载
</button>
<button className="banner-btn" onClick={onDismiss} aria-label="忽略外部修改">
忽略
</button>
</div> </div>
) )
}) })
src/renderer/components/OutlinePanel/OutlinePanel.tsx
+71 -71
View File
@@ -1,71 +1,71 @@
import React, { memo } from 'react' import React, { memo } from 'react'
import type { Heading } from './outlineUtils' import type { Heading } from './outlineUtils'
// --- Component --- // --- Component ---
interface OutlinePanelProps { interface OutlinePanelProps {
headings: Heading[] headings: Heading[]
onNavigate: (heading: Heading, index: number) => void onNavigate: (heading: Heading, index: number) => void
activeHeadingIndex: number | null activeHeadingIndex: number | null
} }
interface OutlineItemProps { interface OutlineItemProps {
heading: Heading heading: Heading
index: number index: number
isActive: boolean isActive: boolean
onNavigate: (heading: Heading, index: number) => void onNavigate: (heading: Heading, index: number) => void
} }
const OutlineItem = memo(function OutlineItem({ const OutlineItem = memo(function OutlineItem({
heading, heading,
index, index,
isActive, isActive,
onNavigate onNavigate,
}: OutlineItemProps) { }: OutlineItemProps) {
return ( return (
<button <button
className={`outline-item outline-level-${heading.level}${isActive ? ' active' : ''}`} className={`outline-item outline-level-${heading.level}${isActive ? ' active' : ''}`}
onClick={() => onNavigate(heading, index)} onClick={() => onNavigate(heading, index)}
title={heading.text} title={heading.text}
aria-label={`跳转到标题：${heading.text}`} aria-label={`跳转到标题：${heading.text}`}
style={{ paddingLeft: `${8 + (heading.level - 1) * 12}px` }} style={{ paddingLeft: `${8 + (heading.level - 1) * 12}px` }}
> >
<span className="outline-level-dot" /> <span className="outline-level-dot" />
<span className="outline-item-text">{heading.text}</span> <span className="outline-item-text">{heading.text}</span>
</button> </button>
) )
}) })
export const OutlinePanel = memo(function OutlinePanel({ export const OutlinePanel = memo(function OutlinePanel({
headings, headings,
onNavigate, onNavigate,
activeHeadingIndex activeHeadingIndex,
}: OutlinePanelProps) { }: OutlinePanelProps) {
if (headings.length === 0) { if (headings.length === 0) {
return ( return (
<div className="outline-panel" role="region" aria-label="文档大纲"> <div className="outline-panel" role="region" aria-label="文档大纲">
<div className="outline-header">文档大纲</div> <div className="outline-header">文档大纲</div>
<div className="outline-empty">当前文档无标题</div> <div className="outline-empty">当前文档无标题</div>
</div> </div>
) )
} }
return ( return (
<div className="outline-panel" role="region" aria-label="文档大纲"> <div className="outline-panel" role="region" aria-label="文档大纲">
<div className="outline-header">文档大纲</div> <div className="outline-header">文档大纲</div>
<div className="outline-list" role="list" aria-label="标题列表"> <div className="outline-list" role="list" aria-label="标题列表">
{headings.map((h, i) => ( {headings.map((h, i) => (
<OutlineItem <OutlineItem
key={`${h.text}-${i}`} key={`${h.text}-${i}`}
heading={h} heading={h}
index={i} index={i}
isActive={i === activeHeadingIndex} isActive={i === activeHeadingIndex}
onNavigate={onNavigate} onNavigate={onNavigate}
/> />
))} ))}
</div> </div>
</div> </div>
) )
}) })
OutlinePanel.displayName = 'OutlinePanel' OutlinePanel.displayName = 'OutlinePanel'
src/renderer/components/OutlinePanel/index.ts
+3 -3
View File
@@ -1,3 +1,3 @@
export { OutlinePanel } from './OutlinePanel' export { OutlinePanel } from './OutlinePanel'
export { parseHeadings } from './outlineUtils' export { parseHeadings } from './outlineUtils'
export type { Heading } from './outlineUtils' export type { Heading } from './outlineUtils'
src/renderer/components/OutlinePanel/outlineUtils.ts
+27 -27
View File
@@ -1,27 +1,27 @@
export interface Heading { export interface Heading {
level: number level: number
text: string text: string
/** Position in document (character offset from markdown source) */ /** Position in document (character offset from markdown source) */
pos: number pos: number
} }
const HEADING_RE = /^(#{1,6})\s+(.+)$/gm const HEADING_RE = /^(#{1,6})\s+(.+)$/gm
/** /**
* Parse headings from raw markdown content using regex. * Parse headings from raw markdown content using regex.
*/ */
export function parseHeadings(markdown: string): Heading[] { export function parseHeadings(markdown: string): Heading[] {
const headings: Heading[] = [] const headings: Heading[] = []
let match: RegExpExecArray | null let match: RegExpExecArray | null
// Reset regex state // Reset regex state
HEADING_RE.lastIndex = 0 HEADING_RE.lastIndex = 0
while ((match = HEADING_RE.exec(markdown)) !== null) { while ((match = HEADING_RE.exec(markdown)) !== null) {
const level = match[1].length const level = match[1].length
const text = match[2].trim() const text = match[2].trim()
headings.push({ level, text, pos: match.index }) headings.push({ level, text, pos: match.index })
} }
return headings return headings
} }
src/renderer/components/Sidebar/Sidebar.tsx
+209 -190
View File
@@ -1,190 +1,209 @@
import React, { useCallback, useMemo, useEffect, useRef } from 'react' import React, { useCallback, useMemo, useEffect, useRef } from 'react'
import { useTabStore } from '../../stores/tabStore' import { useTabStore } from '../../stores/tabStore'
import { useSidebarStore } from '../../stores/sidebarStore' import { useSidebarStore } from '../../stores/sidebarStore'
import { getFileName } from '../../lib/fileUtils' import { getFileName } from '../../lib/fileUtils'
import { recentFilesRepository } from '../../db/recentFilesRepository' import { recentFilesRepository } from '../../db/recentFilesRepository'
import { FolderPlus, File } from '../Icons' import { FolderPlus, File } from '../Icons'
import { FileTree } from '../FileTree' import { FileTree } from '../FileTree'
import { useSidebarResize } from '../../hooks/useSidebarResize' import { useSidebarResize } from '../../hooks/useSidebarResize'
import { useFolderOperations } from '../../hooks/useFolderOperations' import { useFolderOperations } from '../../hooks/useFolderOperations'
import { useAutoExpandDir } from '../../hooks/useAutoExpandDir' import { useAutoExpandDir } from '../../hooks/useAutoExpandDir'
import { useActiveHeading } from '../../hooks/useActiveHeading' import { useActiveHeading } from '../../hooks/useActiveHeading'
import { OutlinePanel, parseHeadings } from '../OutlinePanel' import { OutlinePanel, parseHeadings } from '../OutlinePanel'
import type { Heading } from '../OutlinePanel' import type { Heading } from '../OutlinePanel'
import { getMetonaEditor, useEditorStore } from '../../stores/editorStore' import { getMetonaEditor, useEditorStore } from '../../stores/editorStore'
const norm = (p: string) => p.replace(/[/\\]+$/, '').replace(/\\/g, '/') const norm = (p: string) => p.replace(/[/\\]+$/, '').replace(/\\/g, '/')
function escapeRegex(s: string): string { function escapeRegex(s: string): string {
return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
} }
export const Sidebar = React.memo(function Sidebar() { export const Sidebar = React.memo(function Sidebar() {
const tabs = useTabStore(s => s.tabs) const tabs = useTabStore(s => s.tabs)
const activeTabId = useTabStore(s => s.activeTabId) const activeTabId = useTabStore(s => s.activeTabId)
// B-03: 用 activeTabId + tabs 推导 activeTab 而非 s.getActiveTab()， // B-03: 用 activeTabId + tabs 推导 activeTab 而非 s.getActiveTab()，
// 后者每次返回新对象引用导致 Zustand 无条件重渲染 // 后者每次返回新对象引用导致 Zustand 无条件重渲染
const activeTab = useMemo(() => tabs.find(t => t.id === activeTabId) ?? null, [tabs, activeTabId]) const activeTab = useMemo(() => tabs.find(t => t.id === activeTabId) ?? null, [tabs, activeTabId])
const switchToTab = useTabStore(s => s.switchToTab) const switchToTab = useTabStore(s => s.switchToTab)
const createTab = useTabStore(s => s.createTab) const createTab = useTabStore(s => s.createTab)
const rootPath = useSidebarStore(s => s.rootPath) const rootPath = useSidebarStore(s => s.rootPath)
const tree = useSidebarStore(s => s.tree) const tree = useSidebarStore(s => s.tree)
const expandedDirs = useSidebarStore(s => s.expandedDirs) const expandedDirs = useSidebarStore(s => s.expandedDirs)
const toggleDir = useSidebarStore(s => s.toggleDir) const toggleDir = useSidebarStore(s => s.toggleDir)
const isVisible = useSidebarStore(s => s.isVisible) const isVisible = useSidebarStore(s => s.isVisible)
const activeFilePath = activeTab?.filePath ?? null const activeFilePath = activeTab?.filePath ?? null
const { sidebarRef, startResize } = useSidebarResize() const { sidebarRef, startResize } = useSidebarResize()
const { handleOpenFolder } = useFolderOperations() const { handleOpenFolder } = useFolderOperations()
const setLoading = useEditorStore(s => s.setLoading) const setLoading = useEditorStore(s => s.setLoading)
const viewMode = useEditorStore(s => s.viewMode) const viewMode = useEditorStore(s => s.viewMode)
useAutoExpandDir(activeFilePath) useAutoExpandDir(activeFilePath)
// Parse headings from active tab content // Parse headings from active tab content
const headings = useMemo(() => { const headings = useMemo(() => {
if (!activeTab?.content) return [] if (!activeTab?.content) return []
return parseHeadings(activeTab.content) return parseHeadings(activeTab.content)
}, [activeTab?.content]) }, [activeTab?.content])
// D4: 追踪预览面板中的活跃标题（适配 MetonaEditor 的 .me-preview） // D4: 追踪预览面板中的活跃标题（适配 MetonaEditor 的 .me-preview）
const previewRef = useRef<HTMLElement | null>(null) const previewRef = useRef<HTMLElement | null>(null)
useEffect(() => { useEffect(() => {
if (viewMode === 'preview') { if (viewMode === 'preview') {
previewRef.current = document.querySelector('.me-preview') as HTMLElement | null previewRef.current = document.querySelector('.me-preview') as HTMLElement | null
} else { } else {
previewRef.current = null previewRef.current = null
} }
}, [viewMode]) }, [viewMode])
const activeHeadingIndex = useActiveHeading( const activeHeadingIndex = useActiveHeading(
viewMode === 'preview' ? previewRef : { current: null }, viewMode === 'preview' ? previewRef : { current: null },
headings headings,
) )
// Navigate to heading in MetonaEditor // Navigate to heading in MetonaEditor
const handleHeadingNavigate = useCallback((heading: Heading) => { // v0.6.0: 使用官方 API（scrollToLine + setCursorPosition）替代 DOM hack
const editor = getMetonaEditor() const handleHeadingNavigate = useCallback((heading: Heading) => {
if (!editor) return const editor = getMetonaEditor()
if (!editor) return
try {
// 获取当前内容，查找标题文本在源代码中的位置 try {
const content = editor.getValue() // 获取当前内容，查找标题文本在源代码中的位置
const headingPattern = new RegExp( const content = editor.getValue()
`^#{1,6}\\s+${escapeRegex(heading.text)}\\s*$`, const headingPattern = new RegExp(`^#{1,6}\\s+${escapeRegex(heading.text)}\\s*$`, 'm')
'm' const match = headingPattern.exec(content)
) if (!match) return
const match = headingPattern.exec(content)
if (!match) return // 按行号导航 — 官方 API 处理滚动与光标
const line = content.substring(0, match.index).split('\n').length
const pos = match.index editor.scrollToLine(line)
editor.setCursorPosition(line, 0)
// 通过 DOM 操作滚动 textarea 到对应位置 editor.focus()
const container = document.querySelector('.metona-editor-wrapper') as HTMLElement | null } catch {
if (!container) return // 导航失败，静默忽略
}
const textarea = container.querySelector('textarea') }, [])
if (!textarea) return
const handleFileClick = useCallback(
// 估算滚动位置（简单方法：按行数比例） async (path: string) => {
const linesBefore = content.substring(0, pos).split('\n').length const existing = tabs.find(t => t.filePath === path)
const lineHeight = 24 // 估算行高 if (existing) {
textarea.scrollTop = linesBefore * lineHeight switchToTab(existing.id)
return
// 设置光标位置 }
textarea.focus() if (!window.electronAPI) return
textarea.setSelectionRange(pos, pos) setLoading('file-open', true)
} catch { try {
// 导航失败，静默忽略 const result = await window.electronAPI.readFile(path)
} if (result.success && result.content !== undefined) {
}, []) createTab(path, result.content)
recentFilesRepository.add(path)
const handleFileClick = useCallback(async (path: string) => { }
const existing = tabs.find(t => t.filePath === path) } finally {
if (existing) { switchToTab(existing.id); return } setLoading('file-open', false)
if (!window.electronAPI) return }
setLoading('file-open', true) },
try { [tabs, switchToTab, createTab, setLoading],
const result = await window.electronAPI.readFile(path) )
if (result.success && result.content !== undefined) {
createTab(path, result.content) const independentFiles = tabs.filter(t => {
recentFilesRepository.add(path) if (!t.filePath) return false
} if (!rootPath) return true
} finally { return !norm(t.filePath).startsWith(norm(rootPath))
setLoading('file-open', false) })
}
}, [tabs, switchToTab, createTab, setLoading]) if (!isVisible) return null
const independentFiles = tabs.filter(t => { return (
if (!t.filePath) return false <aside id="sidebar" ref={sidebarRef} aria-label="文件资源管理器">
if (!rootPath) return true <div id="sidebar-header">
return !norm(t.filePath).startsWith(norm(rootPath)) <span id="sidebar-title">资源管理器</span>
}) <button
className="sidebar-header-btn"
if (!isVisible) return null onClick={handleOpenFolder}
title="打开文件夹"
return ( aria-label="打开文件夹"
<aside id="sidebar" ref={sidebarRef} aria-label="文件资源管理器"> >
<div id="sidebar-header"> <FolderPlus size={14} />
<span id="sidebar-title">资源管理器</span> </button>
<button </div>
className="sidebar-header-btn" <nav id="sidebar-tree" role="tree" aria-label="文件树">
onClick={handleOpenFolder} {independentFiles.length > 0 && (
title="打开文件夹" <div className="independent-files-section" role="group" aria-label="已打开的文件">
aria-label="打开文件夹" <div className="independent-files-header" id="independent-files-label">
> 已打开的文件
<FolderPlus size={14} /> </div>
</button> {independentFiles.map(tab => (
</div> <div
<nav id="sidebar-tree" role="tree" aria-label="文件树"> key={tab.id}
{independentFiles.length > 0 && ( className={`tree-item independent-file-item ${tab.id === activeTabId ? 'active' : ''}`}
<div className="independent-files-section" role="group" aria-label="已打开的文件"> style={{ paddingLeft: '8px' }}
<div className="independent-files-header" id="independent-files-label">已打开的文件</div> role="treeitem"
{independentFiles.map(tab => ( tabIndex={0}
<div key={tab.id} aria-selected={tab.id === activeTabId}
className={`tree-item independent-file-item ${tab.id === activeTabId ? 'active' : ''}`} aria-label={getFileName(tab.filePath!)}
style={{ paddingLeft: '8px' }} onClick={() => switchToTab(tab.id)}
role="treeitem" onKeyDown={e => {
tabIndex={0} if (e.key === 'Enter' || e.key === ' ') {
aria-selected={tab.id === activeTabId} e.preventDefault()
aria-label={getFileName(tab.filePath!)} switchToTab(tab.id)
onClick={() => switchToTab(tab.id)} }
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); switchToTab(tab.id) } }} }}
> >
<span className="tree-icon"><File size={14} /></span> <span className="tree-icon">
<span className="tree-name">{getFileName(tab.filePath!)}</span> <File size={14} />
{tab.isModified && <span className="independent-modified-dot" aria-label="已修改"> •</span>} </span>
</div> <span className="tree-name">{getFileName(tab.filePath!)}</span>
))} {tab.isModified && (
</div> <span className="independent-modified-dot" aria-label="已修改">
)} {' '}
{rootPath && ( •
<> </span>
<div className="sidebar-section-header" id="folder-tree-label">文件夹目录树</div> )}
<FileTree </div>
nodes={[{ name: rootPath.split(/[/\\]/).pop() || rootPath, path: rootPath, type: 'dir' as const, children: tree }]} ))}
depth={0} expandedDirs={expandedDirs} toggleDir={toggleDir} </div>
activeFilePath={activeFilePath} onFileClick={handleFileClick} )}
/> {rootPath && (
</> <>
)} <div className="sidebar-section-header" id="folder-tree-label">
</nav> 文件夹目录树
<div className="sidebar-outline-section"> </div>
<OutlinePanel <FileTree
headings={headings} nodes={[
onNavigate={handleHeadingNavigate} {
activeHeadingIndex={activeHeadingIndex} name: rootPath.split(/[/\\]/).pop() || rootPath,
/> path: rootPath,
</div> type: 'dir' as const,
<div children: tree,
className="sidebar-resize-handle" },
onMouseDown={startResize} ]}
role="separator" depth={0}
aria-orientation="vertical" expandedDirs={expandedDirs}
aria-label="调整侧边栏宽度" toggleDir={toggleDir}
tabIndex={0} activeFilePath={activeFilePath}
/> onFileClick={handleFileClick}
</aside> />
) </>
}) )}
</nav>
Sidebar.displayName = 'Sidebar' <div className="sidebar-outline-section">
<OutlinePanel
headings={headings}
onNavigate={handleHeadingNavigate}
activeHeadingIndex={activeHeadingIndex}
/>
</div>
<div
className="sidebar-resize-handle"
onMouseDown={startResize}
role="separator"
aria-orientation="vertical"
aria-label="调整侧边栏宽度"
tabIndex={0}
/>
</aside>
)
})
Sidebar.displayName = 'Sidebar'
src/renderer/components/StatusBar/StatusBar.tsx
+38
View File
@@ -0,0 +1,38 @@
import React from 'react'
import { useEditorStore } from '../../stores/editorStore'
import { useAutoSaveStore } from '../../stores/autoSaveStore'
/**
* v0.6.0: 状态栏 — 展示文档统计 / 光标位置 / 自动保存状态。
* 数据来自 editorStore（Editor 组件绑定 MetonaEditor 事件实时写入）。
*/
export const StatusBar = React.memo(function StatusBar() {
const stats = useEditorStore(s => s.stats)
const cursor = useEditorStore(s => s.cursor)
const zenMode = useEditorStore(s => s.zenMode)
const isAutoSaving = useAutoSaveStore(s => s.isAutoSaving)
const autoSaveEnabled = useAutoSaveStore(s => s.autoSaveEnabled)
return (
<footer id="statusbar" role="status" aria-label="状态栏">
{zenMode && <span className="statusbar-item statusbar-zen">🧘 Zen</span>}
{stats && (
<span className="statusbar-item" title="字数 / 词数 / 行数 / 阅读时间">
{stats.words} 词 · {stats.lines} 行 · {stats.readingTime} 分钟
</span>
)}
<span className="statusbar-spacer" />
{cursor && (
// getCursorPosition: line 为 1-based，column 为 0-based
<span className="statusbar-item">
行 {cursor.line}, 列 {cursor.column + 1}
</span>
)}
<span className={`statusbar-item statusbar-autosave${isAutoSaving ? ' saving' : ''}`}>
{isAutoSaving ? '保存中...' : autoSaveEnabled ? '自动保存' : '手动保存'}
</span>
</footer>
)
})
StatusBar.displayName = 'StatusBar'
src/renderer/components/StatusBar/index.ts
+1
View File
@@ -0,0 +1 @@
export { StatusBar } from './StatusBar'
src/renderer/components/TabBar/TabBar.tsx
+306 -304
View File
@@ -1,304 +1,306 @@
import React, { useCallback, useState, useEffect, useRef } from 'react' import React, { useCallback, useState, useEffect, useRef } from 'react'
import { useTabStore } from '../../stores/tabStore' import { useTabStore } from '../../stores/tabStore'
import { useConfirm } from '../../hooks/useConfirm' import { getFileName } from '../../lib/fileUtils'
import { getFileName } from '../../lib/fileUtils' import { MeToast } from '../../lib/toast'
import { Close, Plus } from '../Icons' import { Close, Plus } from '../Icons'
import { ConfirmDialog } from '../ConfirmDialog/ConfirmDialog'
interface ContextMenuState {
interface ContextMenuState { visible: boolean
visible: boolean x: number
x: number y: number
y: number tabId: string
tabId: string }
}
export const TabBar = React.memo(function TabBar() {
export const TabBar = React.memo(function TabBar() { const tabs = useTabStore(s => s.tabs)
const tabs = useTabStore(s => s.tabs) const activeTabId = useTabStore(s => s.activeTabId)
const activeTabId = useTabStore(s => s.activeTabId) const switchToTab = useTabStore(s => s.switchToTab)
const switchToTab = useTabStore(s => s.switchToTab) const closeTab = useTabStore(s => s.closeTab)
const closeTab = useTabStore(s => s.closeTab) const createTab = useTabStore(s => s.createTab)
const createTab = useTabStore(s => s.createTab) const closeOtherTabs = useTabStore(s => s.closeOtherTabs)
const closeOtherTabs = useTabStore(s => s.closeOtherTabs) const closeAllTabs = useTabStore(s => s.closeAllTabs)
const closeAllTabs = useTabStore(s => s.closeAllTabs) const closeTabsToRight = useTabStore(s => s.closeTabsToRight)
const closeTabsToRight = useTabStore(s => s.closeTabsToRight) const moveTab = useTabStore(s => s.moveTab)
const moveTab = useTabStore(s => s.moveTab)
const tabListRef = useRef<HTMLDivElement>(null)
const tabListRef = useRef<HTMLDivElement>(null) const [menu, setMenu] = useState<ContextMenuState>({ visible: false, x: 0, y: 0, tabId: '' })
const [menu, setMenu] = useState<ContextMenuState>({ visible: false, x: 0, y: 0, tabId: '' }) const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null) const dragTabIdRef = useRef<string | null>(null)
const dragTabIdRef = useRef<string | null>(null)
const { confirm, confirmDialogProps } = useConfirm() // 滚动到活动标签
const scrollToActiveTab = useCallback(() => {
// 滚动到活动标签 const tabList = tabListRef.current
const scrollToActiveTab = useCallback(() => { if (!tabList) return
const tabList = tabListRef.current const activeTab = tabList.querySelector('.tab-item.active') as HTMLElement
if (!tabList) return if (!activeTab) return
const activeTab = tabList.querySelector('.tab-item.active') as HTMLElement
if (!activeTab) return const listRect = tabList.getBoundingClientRect()
const tabRect = activeTab.getBoundingClientRect()
const listRect = tabList.getBoundingClientRect()
const tabRect = activeTab.getBoundingClientRect() // 如果标签在可视区域左侧之外
if (tabRect.left < listRect.left) {
// 如果标签在可视区域左侧之外 tabList.scrollLeft -= listRect.left - tabRect.left + 20
if (tabRect.left < listRect.left) { }
tabList.scrollLeft -= (listRect.left - tabRect.left + 20) // 如果标签在可视区域右侧之外
} else if (tabRect.right > listRect.right) {
// 如果标签在可视区域右侧之外 tabList.scrollLeft += tabRect.right - listRect.right + 20
else if (tabRect.right > listRect.right) { }
tabList.scrollLeft += (tabRect.right - listRect.right + 20) }, [])
}
}, []) // 自动滚动到活动标签
useEffect(() => {
// 自动滚动到活动标签 requestAnimationFrame(scrollToActiveTab)
useEffect(() => { }, [activeTabId, scrollToActiveTab])
requestAnimationFrame(scrollToActiveTab)
}, [activeTabId, scrollToActiveTab]) // 支持鼠标滚轮水平滚动标签栏
useEffect(() => {
// 支持鼠标滚轮水平滚动标签栏 const tabList = tabListRef.current
useEffect(() => { if (!tabList) return
const tabList = tabListRef.current
if (!tabList) return const handleWheel = (e: WheelEvent) => {
// 检查是否有水平溢出
const handleWheel = (e: WheelEvent) => { if (tabList.scrollWidth <= tabList.clientWidth) return
// 检查是否有水平溢出
if (tabList.scrollWidth <= tabList.clientWidth) return // 阻止默认滚动
e.preventDefault()
// 阻止默认滚动
e.preventDefault() // 计算滚动量：支持触控板 deltaX 和鼠标滚轮 deltaY
const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY
// 计算滚动量：支持触控板 deltaX 和鼠标滚轮 deltaY tabList.scrollLeft += delta
const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY }
tabList.scrollLeft += delta
} // 直接绑定到 tabList，使用 passive: false 允许 preventDefault
tabList.addEventListener('wheel', handleWheel, { passive: false })
// 直接绑定到 tabList，使用 passive: false 允许 preventDefault return () => tabList.removeEventListener('wheel', handleWheel)
tabList.addEventListener('wheel', handleWheel, { passive: false }) }, [])
return () => tabList.removeEventListener('wheel', handleWheel)
}, []) const handleClose = useCallback(
async (e: React.MouseEvent, tabId: string) => {
const handleClose = useCallback(async (e: React.MouseEvent, tabId: string) => { e.stopPropagation()
e.stopPropagation() const tab = tabs.find(t => t.id === tabId)
const tab = tabs.find(t => t.id === tabId) if (tab?.isModified) {
if (tab?.isModified) { const name = tab.filePath ? getFileName(tab.filePath) : '未命名'
const name = tab.filePath ? getFileName(tab.filePath) : '未命名' const confirmed = await MeToast.confirm(`"${name}" 尚未保存，确定要关闭吗？`, {
const confirmed = await confirm({ title: '关闭标签',
title: '关闭标签', confirmText: '关闭',
message: `"${name}" 尚未保存，确定要关闭吗？`, cancelText: '取消',
variant: 'warning', })
confirmLabel: '关闭' if (!confirmed) return
}) }
if (!confirmed) return closeTab(tabId)
} },
closeTab(tabId) [tabs, closeTab],
}, [tabs, closeTab, confirm]) )
// C-06: 右键菜单（带边界修正） // C-06: 右键菜单（带边界修正）
const handleContextMenu = useCallback((e: React.MouseEvent, tabId: string) => { const handleContextMenu = useCallback((e: React.MouseEvent, tabId: string) => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
const MENU_WIDTH = 170 const MENU_WIDTH = 170
const MENU_HEIGHT = 140 const MENU_HEIGHT = 140
const x = Math.min(e.clientX, window.innerWidth - MENU_WIDTH) const x = Math.min(e.clientX, window.innerWidth - MENU_WIDTH)
const y = Math.min(e.clientY, window.innerHeight - MENU_HEIGHT) const y = Math.min(e.clientY, window.innerHeight - MENU_HEIGHT)
setMenu({ visible: true, x: Math.max(0, x), y: Math.max(0, y), tabId }) setMenu({ visible: true, x: Math.max(0, x), y: Math.max(0, y), tabId })
}, []) }, [])
useEffect(() => { useEffect(() => {
if (!menu.visible) return if (!menu.visible) return
const handleClick = () => setMenu(prev => ({ ...prev, visible: false })) const handleClick = () => setMenu(prev => ({ ...prev, visible: false }))
document.addEventListener('click', handleClick) document.addEventListener('click', handleClick)
return () => document.removeEventListener('click', handleClick) return () => document.removeEventListener('click', handleClick)
}, [menu.visible]) }, [menu.visible])
const handleMenuClose = useCallback(async () => { const handleMenuClose = useCallback(async () => {
const tab = tabs.find(t => t.id === menu.tabId) const tab = tabs.find(t => t.id === menu.tabId)
if (tab?.isModified) { if (tab?.isModified) {
const name = tab.filePath ? getFileName(tab.filePath) : '未命名' const name = tab.filePath ? getFileName(tab.filePath) : '未命名'
const confirmed = await confirm({ const confirmed = await MeToast.confirm(`"${name}" 尚未保存，确定要关闭吗？`, {
title: '关闭标签', title: '关闭标签',
message: `"${name}" 尚未保存，确定要关闭吗？`, confirmText: '关闭',
variant: 'warning', cancelText: '取消',
confirmLabel: '关闭' })
}) if (!confirmed) return
if (!confirmed) return }
} closeTab(menu.tabId)
closeTab(menu.tabId) setMenu(prev => ({ ...prev, visible: false }))
setMenu(prev => ({ ...prev, visible: false })) }, [tabs, menu.tabId, closeTab])
}, [tabs, menu.tabId, closeTab, confirm])
const handleMenuCloseOthers = useCallback(async () => {
const handleMenuCloseOthers = useCallback(async () => { const otherModified = tabs.filter(t => t.id !== menu.tabId && t.isModified)
const otherModified = tabs.filter(t => t.id !== menu.tabId && t.isModified) if (otherModified.length > 0) {
if (otherModified.length > 0) { const names = otherModified
const names = otherModified.map(t => t.filePath ? getFileName(t.filePath) : '未命名').join('、') .map(t => (t.filePath ? getFileName(t.filePath) : '未命名'))
const confirmed = await confirm({ .join('、')
title: '关闭其他标签', const confirmed = await MeToast.confirm(`以下文件尚未保存：${names}，确定要关闭吗？`, {
message: `以下文件尚未保存：${names}，确定要关闭吗？`, title: '关闭其他标签',
variant: 'warning', confirmText: '关闭',
confirmLabel: '关闭' cancelText: '取消',
}) })
if (!confirmed) return if (!confirmed) return
} }
closeOtherTabs(menu.tabId) closeOtherTabs(menu.tabId)
setMenu(prev => ({ ...prev, visible: false })) setMenu(prev => ({ ...prev, visible: false }))
}, [tabs, menu.tabId, closeOtherTabs, confirm]) }, [tabs, menu.tabId, closeOtherTabs])
const handleMenuCloseAll = useCallback(async () => { const handleMenuCloseAll = useCallback(async () => {
const modified = tabs.filter(t => t.isModified) const modified = tabs.filter(t => t.isModified)
if (modified.length > 0) { if (modified.length > 0) {
const names = modified.map(t => t.filePath ? getFileName(t.filePath) : '未命名').join('、') const names = modified.map(t => (t.filePath ? getFileName(t.filePath) : '未命名')).join('、')
const confirmed = await confirm({ const confirmed = await MeToast.confirm(`以下文件尚未保存：${names}，确定要关闭吗？`, {
title: '关闭全部标签', title: '关闭全部标签',
message: `以下文件尚未保存：${names}，确定要关闭吗？`, confirmText: '关闭',
variant: 'warning', cancelText: '取消',
confirmLabel: '关闭' })
}) if (!confirmed) return
if (!confirmed) return }
} closeAllTabs()
closeAllTabs() setMenu(prev => ({ ...prev, visible: false }))
setMenu(prev => ({ ...prev, visible: false })) }, [tabs, closeAllTabs])
}, [tabs, closeAllTabs, confirm])
const handleMenuCloseRight = useCallback(async () => {
const handleMenuCloseRight = useCallback(async () => { const index = tabs.findIndex(t => t.id === menu.tabId)
const index = tabs.findIndex(t => t.id === menu.tabId) const rightTabs = tabs.slice(index + 1)
const rightTabs = tabs.slice(index + 1) const modified = rightTabs.filter(t => t.isModified)
const modified = rightTabs.filter(t => t.isModified) if (modified.length > 0) {
if (modified.length > 0) { const names = modified.map(t => (t.filePath ? getFileName(t.filePath) : '未命名')).join('、')
const names = modified.map(t => t.filePath ? getFileName(t.filePath) : '未命名').join('、') const confirmed = await MeToast.confirm(`以下文件尚未保存：${names}，确定要关闭吗？`, {
const confirmed = await confirm({ title: '关闭右侧标签',
title: '关闭右侧标签', confirmText: '关闭',
message: `以下文件尚未保存：${names}，确定要关闭吗？`, cancelText: '取消',
variant: 'warning', })
confirmLabel: '关闭' if (!confirmed) return
}) }
if (!confirmed) return closeTabsToRight(menu.tabId)
} setMenu(prev => ({ ...prev, visible: false }))
closeTabsToRight(menu.tabId) }, [tabs, menu.tabId, closeTabsToRight])
setMenu(prev => ({ ...prev, visible: false }))
}, [tabs, menu.tabId, closeTabsToRight, confirm]) // D1: 拖拽排序事件处理
const handleDragStart = useCallback((e: React.DragEvent, tabId: string) => {
// D1: 拖拽排序事件处理 dragTabIdRef.current = tabId
const handleDragStart = useCallback((e: React.DragEvent, tabId: string) => { e.dataTransfer.effectAllowed = 'move'
dragTabIdRef.current = tabId e.dataTransfer.setData('text/plain', tabId)
e.dataTransfer.effectAllowed = 'move' // 延迟添加 dragging 类，避免拖拽图像被 CSS 捕获
e.dataTransfer.setData('text/plain', tabId) requestAnimationFrame(() => {
// 延迟添加 dragging 类，避免拖拽图像被 CSS 捕获 const el = document.querySelector(`[data-tab-id="${tabId}"]`) as HTMLElement
requestAnimationFrame(() => { el?.classList.add('dragging')
const el = document.querySelector(`[data-tab-id="${tabId}"]`) as HTMLElement })
el?.classList.add('dragging') }, [])
})
}, []) const handleDragOver = useCallback((e: React.DragEvent, index: number) => {
e.preventDefault()
const handleDragOver = useCallback((e: React.DragEvent, index: number) => { e.dataTransfer.dropEffect = 'move'
e.preventDefault() setDragOverIndex(index)
e.dataTransfer.dropEffect = 'move' }, [])
setDragOverIndex(index)
}, []) const handleDragLeave = useCallback(() => {
setDragOverIndex(null)
const handleDragLeave = useCallback(() => { }, [])
setDragOverIndex(null)
}, []) const handleDrop = useCallback(
(e: React.DragEvent, toIndex: number) => {
const handleDrop = useCallback((e: React.DragEvent, toIndex: number) => { e.preventDefault()
e.preventDefault() setDragOverIndex(null)
setDragOverIndex(null) const fromId = dragTabIdRef.current
const fromId = dragTabIdRef.current if (fromId) {
if (fromId) { moveTab(fromId, toIndex)
moveTab(fromId, toIndex) }
} dragTabIdRef.current = null
dragTabIdRef.current = null // 清理 dragging 类
// 清理 dragging 类 document.querySelectorAll('.tab-item.dragging').forEach(el => el.classList.remove('dragging'))
document.querySelectorAll('.tab-item.dragging').forEach(el => el.classList.remove('dragging')) },
}, [moveTab]) [moveTab],
)
const handleDragEnd = useCallback(() => {
setDragOverIndex(null) const handleDragEnd = useCallback(() => {
document.querySelectorAll('.tab-item.dragging').forEach(el => el.classList.remove('dragging')) setDragOverIndex(null)
dragTabIdRef.current = null document.querySelectorAll('.tab-item.dragging').forEach(el => el.classList.remove('dragging'))
}, []) dragTabIdRef.current = null
}, [])
const hasRightTabs = menu.visible && (() => {
const index = tabs.findIndex(t => t.id === menu.tabId) const hasRightTabs =
return index < tabs.length - 1 menu.visible &&
})() (() => {
const index = tabs.findIndex(t => t.id === menu.tabId)
if (tabs.length === 0) return null return index < tabs.length - 1
})()
return (
<> if (tabs.length === 0) return null
<div id="tab-bar">
<div id="tab-list" ref={tabListRef} role="tablist" aria-label="标签页"> return (
{tabs.map((tab, index) => ( <>
<div <div id="tab-bar">
key={tab.id} <div id="tab-list" ref={tabListRef} role="tablist" aria-label="标签页">
className={`tab-item ${tab.id === activeTabId ? 'active' : ''} ${tab.isModified ? 'modified' : ''} ${dragOverIndex === index ? 'drag-over' : ''}`} {tabs.map((tab, index) => (
role="tab" <div
aria-selected={tab.id === activeTabId} key={tab.id}
tabIndex={tab.id === activeTabId ? 0 : -1} className={`tab-item ${tab.id === activeTabId ? 'active' : ''} ${tab.isModified ? 'modified' : ''} ${dragOverIndex === index ? 'drag-over' : ''}`}
data-tab-id={tab.id} role="tab"
draggable aria-selected={tab.id === activeTabId}
onClick={() => switchToTab(tab.id)} tabIndex={tab.id === activeTabId ? 0 : -1}
onContextMenu={(e) => handleContextMenu(e, tab.id)} data-tab-id={tab.id}
onDragStart={(e) => handleDragStart(e, tab.id)} draggable
onDragOver={(e) => handleDragOver(e, index)} onClick={() => switchToTab(tab.id)}
onDragLeave={handleDragLeave} onContextMenu={e => handleContextMenu(e, tab.id)}
onDrop={(e) => handleDrop(e, index)} onDragStart={e => handleDragStart(e, tab.id)}
onDragEnd={handleDragEnd} onDragOver={e => handleDragOver(e, index)}
> onDragLeave={handleDragLeave}
<span className="tab-name"> onDrop={e => handleDrop(e, index)}
{tab.filePath ? getFileName(tab.filePath) : '未命名'} onDragEnd={handleDragEnd}
</span> >
<button <span className="tab-name">
className="tab-close" {tab.filePath ? getFileName(tab.filePath) : '未命名'}
onClick={(e) => handleClose(e, tab.id)} </span>
aria-label={`关闭 ${tab.filePath ? getFileName(tab.filePath) : '未命名'}`} <button
> className="tab-close"
<Close size={10} /> onClick={e => handleClose(e, tab.id)}
</button> aria-label={`关闭 ${tab.filePath ? getFileName(tab.filePath) : '未命名'}`}
</div> >
))} <Close size={10} />
</div> </button>
<button </div>
className="tab-add-btn" ))}
onClick={() => createTab(null, '')} </div>
title="新建标签页 (Ctrl+T)" <button
aria-label="新建标签页" className="tab-add-btn"
> onClick={() => createTab(null, '')}
<Plus size={14} /> title="新建标签页 (Ctrl+T)"
</button> aria-label="新建标签页"
>
{/* 右键菜单 */} <Plus size={14} />
{menu.visible && ( </button>
<div
className="tab-context-menu" {/* 右键菜单 */}
style={{ left: menu.x, top: menu.y }} {menu.visible && (
role="menu" <div
aria-label="标签操作" className="tab-context-menu"
onClick={(e) => e.stopPropagation()} style={{ left: menu.x, top: menu.y }}
onMouseDown={(e) => e.stopPropagation()} role="menu"
> aria-label="标签操作"
<div className="tab-context-item" role="menuitem" onClick={handleMenuClose}> onClick={e => e.stopPropagation()}
关闭 onMouseDown={e => e.stopPropagation()}
</div> >
{tabs.length > 1 && ( <div className="tab-context-item" role="menuitem" onClick={handleMenuClose}>
<div className="tab-context-item" role="menuitem" onClick={handleMenuCloseOthers}> 关闭
关闭其他标签 </div>
</div> {tabs.length > 1 && (
)} <div className="tab-context-item" role="menuitem" onClick={handleMenuCloseOthers}>
{hasRightTabs && ( 关闭其他标签
<div className="tab-context-item" role="menuitem" onClick={handleMenuCloseRight}> </div>
关闭右侧标签 )}
</div> {hasRightTabs && (
)} <div className="tab-context-item" role="menuitem" onClick={handleMenuCloseRight}>
<div className="tab-context-divider" role="separator" /> 关闭右侧标签
<div className="tab-context-item" role="menuitem" onClick={handleMenuCloseAll}> </div>
关闭全部标签 )}
</div> <div className="tab-context-divider" role="separator" />
</div> <div className="tab-context-item" role="menuitem" onClick={handleMenuCloseAll}>
)} 关闭全部标签
</div> </div>
<ConfirmDialog {...confirmDialogProps} /> </div>
</> )}
) </div>
}) </>
)
TabBar.displayName = 'TabBar' })
TabBar.displayName = 'TabBar'
src/renderer/components/Toolbar/Toolbar.tsx
+173 -71
View File
@@ -1,71 +1,173 @@
import React from 'react' import React, { useCallback } from 'react'
import { FolderOpen, Save, Moon, Sun, Info } from '../Icons' import { FolderOpen, Save, Moon, Sun, Info, Download, Upload } from '../Icons'
import type { ThemeMode } from '../../types/settings' import { getMetonaEditor, useEditorStore } from '../../stores/editorStore'
import { backupRepository } from '../../db/backupRepository'
interface ToolbarProps { import { showToast } from '../../lib/toast'
onOpen: () => void import { logError } from '../../lib/errorHandler'
onSave: () => void import type { ThemeMode } from '../../types/settings'
themeMode: ThemeMode
onCycleTheme: () => void interface ToolbarProps {
onShowAbout: () => void onOpen: () => void
isAutoSaving: boolean onSave: () => void
autoSaveEnabled: boolean themeMode: ThemeMode
onToggleAutoSave: () => void onCycleTheme: () => void
} onShowAbout: () => void
isAutoSaving: boolean
const THEME_LABELS: Record<ThemeMode, string> = { autoSaveEnabled: boolean
light: '亮色', onToggleAutoSave: () => void
dark: '暗色', }
warm: '暖色',
} const THEME_LABELS: Record<ThemeMode, string> = {
light: '亮色',
/** dark: '暗色',
* 应用顶层工具栏 — 文件操作、自动保存、主题循环、关于。 warm: '暖色',
* 编辑器格式化和模式切换由 MetonaEditor 内置工具栏处理。 }
*/
export const Toolbar = React.memo(function Toolbar({ /**
onOpen, onSave, themeMode, onCycleTheme, onShowAbout, * 应用顶层工具栏 — 文件操作、自动保存、主题循环、数据备份、关于。
isAutoSaving, autoSaveEnabled, onToggleAutoSave * 编辑器格式化和模式切换由 MetonaEditor 内置工具栏处理。
}: ToolbarProps) { */
const nextLabel = THEME_LABELS[themeMode] ?? '主题' export const Toolbar = React.memo(function Toolbar({
onOpen,
return ( onSave,
<div id="toolbar" role="toolbar" aria-label="工具栏"> themeMode,
<div className="toolbar-left" role="group" aria-label="文件操作"> onCycleTheme,
<button className="toolbar-btn" onClick={onOpen} title="打开文件 (Ctrl+O)" aria-label="打开文件"> onShowAbout,
<FolderOpen size={18} /> isAutoSaving,
<span>打开</span> autoSaveEnabled,
</button> onToggleAutoSave,
<button className="toolbar-btn" onClick={onSave} title="保存文件 (Ctrl+S)" aria-label="保存文件"> }: ToolbarProps) {
<Save size={18} /> const nextLabel = THEME_LABELS[themeMode] ?? '主题'
<span>保存</span> const zenMode = useEditorStore(s => s.zenMode)
</button>
<div className="toolbar-divider" role="separator" /> // v0.6.0: Zen 专注模式切换（MetonaEditor 内置能力）
<button const handleToggleZen = useCallback(() => {
className={`toolbar-btn toolbar-autosave${isAutoSaving ? ' saving' : ''}`} const editor = getMetonaEditor()
onClick={onToggleAutoSave} if (!editor) return
title={isAutoSaving ? '正在自动保存...' : (autoSaveEnabled ? '自动保存已开启 — 点击关闭' : '自动保存已关闭 — 点击开启')} editor.toggleZen()
aria-label={isAutoSaving ? '正在自动保存' : (autoSaveEnabled ? '关闭自动保存' : '开启自动保存')} }, [])
>
<span>{isAutoSaving ? '保存中...' : (autoSaveEnabled ? '自动' : '手动')}</span> // v0.6.0: 数据备份导出（sqlark exportAll → JSON 文件）
</button> const handleExport = useCallback(async () => {
</div> if (!window.electronAPI) return
<div className="toolbar-right" role="group" aria-label="设置"> const data = await backupRepository.exportAll()
<button if (!data) return
className="toolbar-btn" const result = await window.electronAPI.exportData(JSON.stringify(data, null, 2))
onClick={onCycleTheme} if (result.success) {
title={`当前 ${nextLabel} — 点击切换`} showToast('备份已导出', 'success')
aria-label={`当前${nextLabel}主题，点击切换`} } else if (!result.canceled) {
> showToast(`导出失败: ${result.error ?? '未知错误'}`, 'error')
{themeMode === 'dark' ? <Moon size={18} /> : <Sun size={18} />} }
<span style={{ fontSize: 12, marginLeft: 2 }}>{nextLabel}</span> }, [])
</button>
<button className="toolbar-btn" onClick={onShowAbout} title="关于" aria-label="关于 MarkLite"> // v0.6.0: 数据备份导入（JSON 文件 → sqlark importTable）
<Info size={18} /> const handleImport = useCallback(async () => {
</button> if (!window.electronAPI) return
</div> const result = await window.electronAPI.importData()
</div> if (!result.success) return
) if (result.canceled || !result.content) return
}) try {
const data = JSON.parse(result.content) as Record<string, Record<string, unknown>[]>
Toolbar.displayName = 'Toolbar' const ok = await backupRepository.importAll(data)
if (ok) {
// 恢复后刷新页面 — 所有 store 从新数据库重新加载（loadFromDB 有 _loaded 守卫，
// 且 settings/sidebar 也只在初始化时读取，直接重载页面最可靠）
showToast('备份已恢复', 'success')
setTimeout(() => window.location.reload(), 800)
} else {
showToast('恢复备份失败', 'error')
}
} catch (error) {
logError('解析备份文件失败', error)
showToast('备份文件格式无效', 'error')
}
}, [])
return (
<div id="toolbar" role="toolbar" aria-label="工具栏">
<div className="toolbar-left" role="group" aria-label="文件操作">
<button
className="toolbar-btn"
onClick={onOpen}
title="打开文件 (Ctrl+O)"
aria-label="打开文件"
>
<FolderOpen size={18} />
<span>打开</span>
</button>
<button
className="toolbar-btn"
onClick={onSave}
title="保存文件 (Ctrl+S)"
aria-label="保存文件"
>
<Save size={18} />
<span>保存</span>
</button>
<div className="toolbar-divider" role="separator" />
<button
className={`toolbar-btn toolbar-autosave${isAutoSaving ? ' saving' : ''}`}
onClick={onToggleAutoSave}
title={
isAutoSaving
? '正在自动保存...'
: autoSaveEnabled
? '自动保存已开启 — 点击关闭'
: '自动保存已关闭 — 点击开启'
}
aria-label={
isAutoSaving ? '正在自动保存' : autoSaveEnabled ? '关闭自动保存' : '开启自动保存'
}
>
<span>{isAutoSaving ? '保存中...' : autoSaveEnabled ? '自动' : '手动'}</span>
</button>
</div>
<div className="toolbar-right" role="group" aria-label="设置">
<button
className={`toolbar-btn${zenMode ? ' active' : ''}`}
onClick={handleToggleZen}
title={zenMode ? '退出专注模式' : '专注模式 — 隐藏编辑器工具栏'}
aria-label={zenMode ? '退出专注模式' : '进入专注模式'}
aria-pressed={zenMode}
>
<span>🧘 {zenMode ? '专注中' : '专注'}</span>
</button>
<button
className="toolbar-btn"
onClick={handleExport}
title="导出数据备份"
aria-label="导出数据备份"
>
<Download size={16} />
</button>
<button
className="toolbar-btn"
onClick={handleImport}
title="导入数据备份"
aria-label="导入数据备份"
>
<Upload size={16} />
</button>
<button
className="toolbar-btn"
onClick={onCycleTheme}
title={`当前 ${nextLabel} — 点击切换`}
aria-label={`当前${nextLabel}主题，点击切换`}
>
{themeMode === 'dark' ? <Moon size={18} /> : <Sun size={18} />}
<span style={{ fontSize: 12, marginLeft: 2 }}>{nextLabel}</span>
</button>
<button
className="toolbar-btn"
onClick={onShowAbout}
title="关于"
aria-label="关于 MarkLite"
>
<Info size={18} />
</button>
</div>
</div>
)
})
Toolbar.displayName = 'Toolbar'
src/renderer/components/WelcomeScreen/WelcomeScreen.tsx
+47 -5
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { AppIcon, WelcomeFile, WelcomeNew } from '../Icons' import { AppIcon, WelcomeFile, WelcomeNew } from '../Icons'
import { recentFilesRepository } from '../../db/recentFilesRepository' import { recentFilesRepository } from '../../db/recentFilesRepository'
import { getDb } from '../../db/schema'
import { getFileName } from '../../lib/fileUtils' import { getFileName } from '../../lib/fileUtils'
interface WelcomeScreenProps { interface WelcomeScreenProps {
@@ -9,13 +10,47 @@ interface WelcomeScreenProps {
onOpenRecent?: (filePath: string) => void onOpenRecent?: (filePath: string) => void
} }
export const WelcomeScreen = React.memo(function WelcomeScreen({ onOpen, onNew, onOpenRecent }: WelcomeScreenProps) { export const WelcomeScreen = React.memo(function WelcomeScreen({
onOpen,
onNew,
onOpenRecent,
}: WelcomeScreenProps) {
const [recentFiles, setRecentFiles] = useState<string[]>([]) const [recentFiles, setRecentFiles] = useState<string[]>([])
// v0.6.0: 订阅 recentFiles 表变更，文件打开/删除时自动刷新
useEffect(() => { useEffect(() => {
recentFilesRepository.getAll(10).then((files: string[]) => { let cancelled = false
setRecentFiles(files) let unsubscribe: (() => void) | null = null
})
const refresh = async () => {
const files = await recentFilesRepository.getAll(10)
if (!cancelled) setRecentFiles(files)
}
refresh()
getDb()
.then(db => {
if (cancelled) return
unsubscribe = db.subscribe('recentFiles', event => {
if (
event.type === 'insert' ||
event.type === 'update' ||
event.type === 'delete' ||
event.type === 'external'
) {
refresh()
}
})
})
.catch(() => {
/* 订阅失败不阻塞页面 */
})
return () => {
cancelled = true
unsubscribe?.()
}
}, []) }, [])
return ( return (
@@ -51,7 +86,14 @@ export const WelcomeScreen = React.memo(function WelcomeScreen({ onOpen, onNew,
aria-label={`打开 ${getFileName(filePath)}`} aria-label={`打开 ${getFileName(filePath)}`}
> >
<span className="recent-icon" aria-hidden="true"> <span className="recent-icon" aria-hidden="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75"> <svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" /> <polyline points="14 2 14 8 20 8" />
</svg> </svg>
src/renderer/db/__tests__/recentFiles.integration.test.ts
+34
View File
@@ -0,0 +1,34 @@
import 'fake-indexeddb/auto'
import { describe, it, expect } from 'vitest'
import { recentFilesRepository } from '../recentFilesRepository'
describe('recentFilesRepository (真实 AriaEngine + IndexedDB)', () => {
it('should add and read recent files', async () => {
await recentFilesRepository.add('/test/a.md')
const files = await recentFilesRepository.getAll(10)
expect(files).toContain('/test/a.md')
})
it('should update lastOpened on re-add', async () => {
await recentFilesRepository.add('/test/b.md')
await new Promise(r => setTimeout(r, 5))
await recentFilesRepository.add('/test/b.md')
const files = await recentFilesRepository.getAll(10)
expect(files[0]).toBe('/test/b.md')
})
it('should enforce 50 item limit', async () => {
for (let i = 0; i < 55; i++) {
await recentFilesRepository.add(`/test/f${String(i).padStart(2, '0')}.md`)
}
const files = await recentFilesRepository.getAll(60)
expect(files.length).toBeLessThanOrEqual(50)
})
it('should remove a file', async () => {
await recentFilesRepository.add('/test/remove-me.md')
await recentFilesRepository.remove('/test/remove-me.md')
const files = await recentFilesRepository.getAll(60)
expect(files).not.toContain('/test/remove-me.md')
})
})
src/renderer/db/backupRepository.ts
+44
View File
@@ -0,0 +1,44 @@
import { getDb } from './schema'
import { logError } from '../lib/errorHandler'
/** v0.6.0: 备份数据格式 — { 表名: 行[] }（与 db.exportAll() 一致） */
export type BackupData = Record<string, Record<string, unknown>[]>
const BACKUP_TABLES = ['tabSnapshots', 'settings', 'recentFiles', 'activeTab']
/**
* v0.6.0: 数据备份/恢复 — 基于 sqlark 的 exportAll / importTable。
*/
export const backupRepository = {
async exportAll(): Promise<BackupData | null> {
try {
const db = await getDb()
return (await db.exportAll()) as BackupData
} catch (error) {
logError('导出备份失败', error)
return null
}
},
async importAll(data: BackupData): Promise<boolean> {
try {
const db = await getDb()
// 先清空现有四表，再按表导入（清空走事务保证原子性）
await db.transaction(async trx => {
for (const tableName of BACKUP_TABLES) {
await trx.table(tableName).clear()
}
})
for (const tableName of BACKUP_TABLES) {
const rows = data[tableName]
if (Array.isArray(rows) && rows.length > 0) {
await db.importTable(tableName, rows)
}
}
return true
} catch (error) {
logError('导入备份失败', error)
return false
}
},
}
src/renderer/db/recentFilesRepository.ts
+22 -3
View File
@@ -1,7 +1,20 @@
import { type Table } from '@metona-team/metona-sqlark' import { type MetonaSqlark, type Table } from '@metona-team/metona-sqlark'
import { getDb, type RecentFile } from './schema' import { getDb, type RecentFile } from './schema'
import { logError } from '../lib/errorHandler' import { logError } from '../lib/errorHandler'
/**
* v0.6.0: 本地写操作完成后 emit 表变更事件 —
* sqlark 的 Table 写操作只通过 BroadcastChannel 通知其他标签页，
* 本地订阅（subscribe）需要手动 emit，WelcomeScreen 借此自动刷新最近文件。
*/
async function emitChange(db: MetonaSqlark, type: string): Promise<void> {
try {
db.emit('recentFiles', { type })
} catch {
// 通知失败不影响主流程
}
}
export const recentFilesRepository = { export const recentFilesRepository = {
async add(filePath: string): Promise<void> { async add(filePath: string): Promise<void> {
try { try {
@@ -17,8 +30,12 @@ export const recentFilesRepository = {
const all = (await tbl.select().orderBy('lastOpened', 'desc').execute()) as RecentFile[] const all = (await tbl.select().orderBy('lastOpened', 'desc').execute()) as RecentFile[]
if (all.length > 50) { if (all.length > 50) {
const toDelete = all.slice(50).map((f: RecentFile) => f.filePath) const toDelete = all.slice(50).map((f: RecentFile) => f.filePath)
await tbl.delete().where({ filePath: { $in: toDelete } }).execute() await tbl
.delete()
.where({ filePath: { $in: toDelete } })
.execute()
} }
await emitChange(db, 'update')
} catch (error) { } catch (error) {
logError('添加最近文件失败', error) logError('添加最近文件失败', error)
} }
@@ -44,6 +61,7 @@ export const recentFilesRepository = {
try { try {
const db = await getDb() const db = await getDb()
await db.table('recentFiles').delete().where({ filePath }).execute() await db.table('recentFiles').delete().where({ filePath }).execute()
await emitChange(db, 'delete')
} catch (error) { } catch (error) {
logError('删除最近文件失败', error) logError('删除最近文件失败', error)
} }
@@ -53,8 +71,9 @@ export const recentFilesRepository = {
try { try {
const db = await getDb() const db = await getDb()
await db.table('recentFiles').clear() await db.table('recentFiles').clear()
await emitChange(db, 'delete')
} catch (error) { } catch (error) {
logError('清空最近文件失败', error) logError('清空最近文件失败', error)
} }
} },
} }
src/renderer/db/schema.ts
+110 -19
View File
@@ -1,5 +1,6 @@
import { create, type ColumnDef, type MetonaSqlark } from '@metona-team/metona-sqlark' import { create, type ColumnDef, type MetonaSqlark } from '@metona-team/metona-sqlark'
import { logError } from '../lib/errorHandler' import { logError } from '../lib/errorHandler'
import { MeToast } from '../lib/toast'
// 注意: 使用 type 别名而非 interface — // 注意: 使用 type 别名而非 interface —
// sqlark 的 Table<T> 泛型约束 T & Record<string, unknown>， // sqlark 的 Table<T> 泛型约束 T & Record<string, unknown>，
@@ -38,7 +39,15 @@ export type RecentFile = {
// v0.5.0: 库名更换为 MarkLiteV2，与旧 Dexie 库（MarkLite）彻底隔离，旧数据已放弃 // v0.5.0: 库名更换为 MarkLiteV2，与旧 Dexie 库（MarkLite）彻底隔离，旧数据已放弃
// v0.5.0: 存储引擎选用 AriaEngine（自研 LSM-Tree + WAL + MVCC，对标 SQLite） // v0.5.0: 存储引擎选用 AriaEngine（自研 LSM-Tree + WAL + MVCC，对标 SQLite）
const DB_NAME = 'MarkLiteV2' const DB_NAME = 'MarkLiteV2'
const DB_VERSION = 1
/**
* v0.6.0: 版本化 Schema 迁移。
* create 时 version 传 0（表示尚未应用任何 schema），migrateTo(SCHEMA_VERSION)
* 会依次执行所有 version > 0 的迁移。注意 _version 不持久化（每次启动从配置值
* 开始），因此每个迁移内部必须幂等（表存在检查）。
* 未来升级: 新增 addMigration(N) + 提升 SCHEMA_VERSION，迁移内部做增量变更。
*/
const SCHEMA_VERSION = 1
const TAB_SNAPSHOTS_COLUMNS: Record<string, ColumnDef> = { const TAB_SNAPSHOTS_COLUMNS: Record<string, ColumnDef> = {
id: { type: 'string', primaryKey: true }, id: { type: 'string', primaryKey: true },
@@ -70,33 +79,115 @@ const ACTIVE_TAB_COLUMNS: Record<string, ColumnDef> = {
} }
/** /**
* v0.5.0: MetonaSqlark 初始化 — 懒加载单例。 * v0.6.0: MetonaSqlark 初始化 — 懒加载单例。
* create() 为异步，无法像 Dexie 那样模块顶层同步实例化； * create() 为异步，无法像 Dexie 那样模块顶层同步实例化；
* 首次调用时创建，之后复用同一 Promise。 * 首次调用时创建，之后复用同一 Promise。
*
* v0.6.0: 数据损坏自愈 —
* AriaEngine 在异常退出（强杀/断电）时可能留下残缺的 SSTable 文件，
* 重新打开解析块偏移会抛 RangeError（offset is out of bounds）导致初始化失败。
* 检测到打开失败后：标记 localStorage → 重载页面（干净环境无残留 IDB 连接）
* → 删除损坏库 → 重建。create 成功后才清除标记，避免自愈失败死循环。
*/ */
let dbPromise: Promise<MetonaSqlark> | null = null let dbPromise: Promise<MetonaSqlark> | null = null
let initFailedNotified = false
async function defineTablesIfNeeded(db: MetonaSqlark): Promise<void> { // IndexedDBBackend 的内部库名 = `aria-${name}`（sqlark 源码约定）
const tables = await db.getTableNames() const DB_STORAGE_NAME = `aria-${DB_NAME}`
if (!tables.includes('tabSnapshots')) await db.defineTable('tabSnapshots', TAB_SNAPSHOTS_COLUMNS) const RESET_PENDING_KEY = 'marklite-db-reset-pending'
if (!tables.includes('settings')) await db.defineTable('settings', SETTINGS_COLUMNS)
if (!tables.includes('recentFiles')) await db.defineTable('recentFiles', RECENT_FILES_COLUMNS) /** 删除损坏数据库（无活动连接时立即成功） */
if (!tables.includes('activeTab')) await db.defineTable('activeTab', ACTIVE_TAB_COLUMNS) function deleteStorageDatabase(): Promise<void> {
return new Promise<void>(resolve => {
const req = indexedDB.deleteDatabase(DB_STORAGE_NAME)
req.onsuccess = () => resolve()
req.onerror = () => resolve()
req.onblocked = () => resolve()
})
}
/** 自愈入口：存在重置标记时删除损坏库（保留标记，create 成功后才清除） */
async function resetCorruptDatabaseIfNeeded(): Promise<void> {
try {
if (localStorage.getItem(RESET_PENDING_KEY) !== '1') return
await deleteStorageDatabase()
try {
MeToast?.info('数据库已重置（原数据损坏，无法恢复）')
} catch {
/* 提示失败不影响主流程 */
}
} catch {
/* 重置失败不阻塞启动 */
}
}
async function createDatabase(): Promise<MetonaSqlark> {
const db = await create({
name: DB_NAME,
mode: 'aria', // AriaEngine: LSM-Tree + WAL + MVCC 快照隔离
diskEngine: 'indexeddb', // 底层存储后端（indexeddb | opfs | memory）
version: 0, // 0 = 尚未应用任何 schema 迁移
onError: (err: Error) => logError('数据库错误', err),
})
// v1: 初始四表结构
db.addMigration(1, async d => {
const tables = await d.getTableNames()
if (!tables.includes('tabSnapshots')) await d.defineTable('tabSnapshots', TAB_SNAPSHOTS_COLUMNS)
if (!tables.includes('settings')) await d.defineTable('settings', SETTINGS_COLUMNS)
if (!tables.includes('recentFiles')) await d.defineTable('recentFiles', RECENT_FILES_COLUMNS)
if (!tables.includes('activeTab')) await d.defineTable('activeTab', ACTIVE_TAB_COLUMNS)
})
await db.migrateTo(SCHEMA_VERSION)
return db
}
async function initDb(): Promise<MetonaSqlark> {
await resetCorruptDatabaseIfNeeded()
try {
const db = await createDatabase()
// 创建成功：清除重置标记（自愈完成）
try {
localStorage.removeItem(RESET_PENDING_KEY)
} catch {
/* 忽略 */
}
return db
} catch (err) {
logError('数据库打开失败', err)
// 数据损坏自愈：首次失败 → 标记 + 重载页面（干净环境删除损坏库重建）
try {
if (localStorage.getItem(RESET_PENDING_KEY) !== '1') {
localStorage.setItem(RESET_PENDING_KEY, '1')
window.location.reload()
}
} catch {
/* 忽略 */
}
throw err
}
} }
export function getDb(): Promise<MetonaSqlark> { export function getDb(): Promise<MetonaSqlark> {
if (!dbPromise) { if (!dbPromise) {
dbPromise = (async () => { dbPromise = initDb().catch(err => {
const db = await create({ // v0.6.0: 初始化失败不再静默 — 记录日志并提示用户（否则所有数据持久化静默失效）
name: DB_NAME, logError('数据库初始化失败', err)
mode: 'aria', // AriaEngine: LSM-Tree + WAL + MVCC 快照隔离 if (!initFailedNotified) {
diskEngine: 'indexeddb', // 底层存储后端（indexeddb | opfs | memory） initFailedNotified = true
version: DB_VERSION, try {
onError: (err: Error) => logError('数据库错误', err), const code = (err as { code?: string })?.code ?? 'UNKNOWN'
}) const msg = err instanceof Error ? err.message : String(err)
await defineTablesIfNeeded(db) setTimeout(() => {
return db MeToast?.error(`数据库初始化失败（${code}）：${msg}`)
})() }, 0)
} catch {
/* 提示失败不影响主流程 */
}
}
throw err
})
// 初始化失败时允许下次重试 // 初始化失败时允许下次重试
dbPromise.catch(() => { dbPromise.catch(() => {
dbPromise = null dbPromise = null
src/renderer/db/settingsRepository.ts
+7 -8
View File
@@ -7,18 +7,14 @@ export const settingsRepository = {
async load(): Promise<Settings> { async load(): Promise<Settings> {
try { try {
const db = await getDb() const db = await getDb()
const rows = await db const rows = await db.table('settings').select().where({ id: 'default' }).execute()
.table('settings')
.select()
.where({ id: 'default' })
.execute()
const record = rows[0] as SettingsRecord | undefined const record = rows[0] as SettingsRecord | undefined
if (record) { if (record) {
return { return {
themeMode: record.themeMode ?? DEFAULT_SETTINGS.themeMode, themeMode: record.themeMode ?? DEFAULT_SETTINGS.themeMode,
viewMode: record.viewMode ?? DEFAULT_SETTINGS.viewMode, viewMode: record.viewMode ?? DEFAULT_SETTINGS.viewMode,
sidebarCollapsed: record.sidebarCollapsed ?? DEFAULT_SETTINGS.sidebarCollapsed, sidebarCollapsed: record.sidebarCollapsed ?? DEFAULT_SETTINGS.sidebarCollapsed,
sidebarWidth: record.sidebarWidth ?? DEFAULT_SETTINGS.sidebarWidth sidebarWidth: record.sidebarWidth ?? DEFAULT_SETTINGS.sidebarWidth,
} }
} }
} catch (error) { } catch (error) {
@@ -37,12 +33,15 @@ export const settingsRepository = {
const tbl = db.table('settings') as Table<SettingsRecord> const tbl = db.table('settings') as Table<SettingsRecord>
const rows = await tbl.select().where({ id: 'default' }).execute() const rows = await tbl.select().where({ id: 'default' }).execute()
if (rows.length > 0) { if (rows.length > 0) {
await tbl.update({ ...merged }).where({ id: 'default' }).execute() await tbl
.update({ ...merged })
.where({ id: 'default' })
.execute()
} else { } else {
await tbl.insert(merged) await tbl.insert(merged)
} }
} catch (error) { } catch (error) {
logError('保存设置失败', error) logError('保存设置失败', error)
} }
} },
} }
src/renderer/db/tabRepository.ts
+3 -11
View File
@@ -7,7 +7,7 @@ export const tabRepository = {
try { try {
const db = await getDb() const db = await getDb()
// v0.5.0: sqlark 事务 — 失败自动回滚（AriaEngine MVCC 快照隔离） // v0.5.0: sqlark 事务 — 失败自动回滚（AriaEngine MVCC 快照隔离）
await db.transaction(async (trx) => { await db.transaction(async trx => {
await trx.table('tabSnapshots').clear() await trx.table('tabSnapshots').clear()
if (tabs.length > 0) { if (tabs.length > 0) {
await trx.table('tabSnapshots').insertMany(tabs) await trx.table('tabSnapshots').insertMany(tabs)
@@ -21,11 +21,7 @@ export const tabRepository = {
async loadAll(): Promise<TabSnapshot[]> { async loadAll(): Promise<TabSnapshot[]> {
try { try {
const db = await getDb() const db = await getDb()
const rows = await db const rows = await db.table('tabSnapshots').select().orderBy('updatedAt', 'asc').execute()
.table('tabSnapshots')
.select()
.orderBy('updatedAt', 'asc')
.execute()
return rows as TabSnapshot[] return rows as TabSnapshot[]
} catch (error) { } catch (error) {
logError('加载标签快照失败', error) logError('加载标签快照失败', error)
@@ -60,11 +56,7 @@ export const tabRepository = {
async loadActiveTabId(): Promise<string | null> { async loadActiveTabId(): Promise<string | null> {
try { try {
const db = await getDb() const db = await getDb()
const rows = await db const rows = await db.table('activeTab').select().where({ id: 'current' }).execute()
.table('activeTab')
.select()
.where({ id: 'current' })
.execute()
return (rows[0] as ActiveTabRecord | undefined)?.activeTabId ?? null return (rows[0] as ActiveTabRecord | undefined)?.activeTabId ?? null
} catch (error) { } catch (error) {
logError('加载活动标签ID失败', error) logError('加载活动标签ID失败', error)
src/renderer/hooks/__tests__/useDocStats.test.ts
-76
View File
@@ -1,76 +0,0 @@
import { describe, it, expect } from 'vitest'
import { computeDocStats } from '../useDocStats'
describe('computeDocStats', () => {
it('should return zeros for undefined content', () => {
expect(computeDocStats(undefined)).toEqual({ words: 0, chars: 0, charsNoSpace: 0, lines: 0 })
})
it('should return zeros for null content', () => {
expect(computeDocStats(null)).toEqual({ words: 0, chars: 0, charsNoSpace: 0, lines: 0 })
})
it('should return zeros for empty string', () => {
expect(computeDocStats('')).toEqual({ words: 0, chars: 0, charsNoSpace: 0, lines: 0 })
})
it('should count single word', () => {
const result = computeDocStats('hello')
expect(result.words).toBe(1)
expect(result.chars).toBe(5)
expect(result.charsNoSpace).toBe(5)
expect(result.lines).toBe(1)
})
it('should count multiple words', () => {
const result = computeDocStats('hello world')
expect(result.words).toBe(2)
expect(result.chars).toBe(11) // 'hello world' = 11 chars
expect(result.charsNoSpace).toBe(10) // without the space
})
it('should count characters without spaces', () => {
const result = computeDocStats('a b c')
expect(result.chars).toBe(5)
expect(result.charsNoSpace).toBe(3)
})
it('should count lines', () => {
const result = computeDocStats('line1\nline2\nline3')
expect(result.lines).toBe(3)
expect(result.words).toBe(3)
})
it('should handle Windows line endings', () => {
const result = computeDocStats('line1\r\nline2\r\nline3')
expect(result.lines).toBe(3)
})
it('should handle trailing newline', () => {
const result = computeDocStats('hello\n')
expect(result.lines).toBe(2)
expect(result.words).toBe(1)
})
it('should count markdown content correctly', () => {
const md = '# Title\n\nThis is a **paragraph** with some *text*.\n\n- List item 1\n- List item 2\n'
const result = computeDocStats(md)
expect(result.words).toBe(17)
expect(result.lines).toBe(7)
expect(result.chars).toBe(md.length)
})
it('should handle whitespace-only content', () => {
const result = computeDocStats(' \n \n ')
expect(result.words).toBe(0)
expect(result.chars).toBe(9)
expect(result.charsNoSpace).toBe(0)
expect(result.lines).toBe(3)
})
it('should handle content with non-ASCII characters', () => {
const result = computeDocStats('中文测试 日本語 한국어')
expect(result.words).toBe(3)
expect(result.chars).toBe(12)
})
})
src/renderer/hooks/useActiveHeading.ts
+79 -79
View File
@@ -1,79 +1,79 @@
import { useEffect, useState, useCallback } from 'react' import { useEffect, useState, useCallback } from 'react'
/** /**
* D4: 基于视口的活跃标题追踪 hook * D4: 基于视口的活跃标题追踪 hook
* 在 preview 模式下监听目标容器的滚动事件， * 在 preview 模式下监听目标容器的滚动事件，
* 根据文档中标题元素的 offsetTop 判断当前可见的标题索引。 * 根据文档中标题元素的 offsetTop 判断当前可见的标题索引。
* *
* 仅在目标容器 ref 存在时生效（preview 面板挂载后）。 * 仅在目标容器 ref 存在时生效（preview 面板挂载后）。
* *
* @param containerRef - 包含 Markdown 渲染结果的 DOM 元素 ref * @param containerRef - 包含 Markdown 渲染结果的 DOM 元素 ref
* @param headings - 解析出的标题列表 * @param headings - 解析出的标题列表
* @returns - 当前活跃标题的索引（null 表示无法判定或不在范围内） * @returns - 当前活跃标题的索引（null 表示无法判定或不在范围内）
*/ */
export function useActiveHeading( export function useActiveHeading(
containerRef: React.RefObject<HTMLElement | null>, containerRef: React.RefObject<HTMLElement | null>,
headings: { level: number; text: string }[] headings: { level: number; text: string }[],
): number | null { ): number | null {
const [activeIndex, setActiveIndex] = useState<number | null>(null) const [activeIndex, setActiveIndex] = useState<number | null>(null)
const handleScroll = useCallback(() => { const handleScroll = useCallback(() => {
const container = containerRef.current const container = containerRef.current
if (!container || headings.length === 0) { if (!container || headings.length === 0) {
setActiveIndex(null) setActiveIndex(null)
return return
} }
// 收集容器内所有 h1-h6 元素的 offsetTop // 收集容器内所有 h1-h6 元素的 offsetTop
const headingElements = Array.from( const headingElements = Array.from(
container.querySelectorAll('h1, h2, h3, h4, h5, h6') container.querySelectorAll('h1, h2, h3, h4, h5, h6'),
) as HTMLElement[] ) as HTMLElement[]
if (headingElements.length === 0) { if (headingElements.length === 0) {
setActiveIndex(null) setActiveIndex(null)
return return
} }
const scrollTop = container.scrollTop const scrollTop = container.scrollTop
const containerHeight = container.clientHeight const containerHeight = container.clientHeight
const threshold = scrollTop + containerHeight * 0.3 // 上方 30% 位置视为"到达" const threshold = scrollTop + containerHeight * 0.3 // 上方 30% 位置视为"到达"
let bestIndex: number | null = null let bestIndex: number | null = null
for (let i = 0; i < headingElements.length; i++) { for (let i = 0; i < headingElements.length; i++) {
const el = headingElements[i] const el = headingElements[i]
// 使用容器顶部的相对偏移而非 getBoundingClientRect（滚动容器不是 window） // 使用容器顶部的相对偏移而非 getBoundingClientRect（滚动容器不是 window）
const top = el.offsetTop - (container.offsetTop || 0) const top = el.offsetTop - (container.offsetTop || 0)
if (top <= threshold) { if (top <= threshold) {
// 找到 headings 中匹配的索引 // 找到 headings 中匹配的索引
const text = el.textContent?.trim() ?? '' const text = el.textContent?.trim() ?? ''
const matchIdx = headings.findIndex( const matchIdx = headings.findIndex(
h => h.text.trim() === text && el.tagName.slice(-1) === String(h.level) h => h.text.trim() === text && el.tagName.slice(-1) === String(h.level),
) )
if (matchIdx >= 0) bestIndex = matchIdx if (matchIdx >= 0) bestIndex = matchIdx
} }
} }
setActiveIndex(bestIndex) setActiveIndex(bestIndex)
}, [containerRef, headings]) }, [containerRef, headings])
useEffect(() => { useEffect(() => {
const container = containerRef.current const container = containerRef.current
if (!container || headings.length === 0) { if (!container || headings.length === 0) {
setActiveIndex(null) setActiveIndex(null)
return return
} }
// 监听滚动事件 // 监听滚动事件
container.addEventListener('scroll', handleScroll, { passive: true }) container.addEventListener('scroll', handleScroll, { passive: true })
// 初始计算 // 初始计算
handleScroll() handleScroll()
return () => { return () => {
container.removeEventListener('scroll', handleScroll) container.removeEventListener('scroll', handleScroll)
} }
}, [containerRef, headings, handleScroll]) }, [containerRef, headings, handleScroll])
return activeIndex return activeIndex
} }
src/renderer/hooks/useAutoSave.ts
+120 -116
View File
@@ -1,116 +1,120 @@
import { useEffect, useRef, useState, useCallback } from 'react' import { useEffect, useRef, useState, useCallback } from 'react'
import { useTabStore } from '../stores/tabStore' import { useTabStore } from '../stores/tabStore'
import { useAutoSaveStore } from '../stores/autoSaveStore' import { useAutoSaveStore } from '../stores/autoSaveStore'
import { logError } from '../lib/errorHandler' import { logError } from '../lib/errorHandler'
/** Debounce delay for auto-save (ms) */ /** Debounce delay for auto-save (ms) */
const AUTO_SAVE_DELAY = 2000 const AUTO_SAVE_DELAY = 2000
/** 模块级 ref — 状态栏等外部组件通过此函数切换自动保存 */ /** 模块级 ref — 状态栏等外部组件通过此函数切换自动保存 */
let _toggleAutoSave: (() => void) | null = null let _toggleAutoSave: (() => void) | null = null
export function toggleAutoSaveExternal(): void { export function toggleAutoSaveExternal(): void {
_toggleAutoSave?.() _toggleAutoSave?.()
} }
/** /**
* Auto-save hook: subscribes to Zustand tab store, debounces content changes * Auto-save hook: subscribes to Zustand tab store, debounces content changes
* and saves automatically after a pause in editing for file-backed tabs. * and saves automatically after a pause in editing for file-backed tabs.
* *
* Uses `useTabStore.getState()` and `.subscribe()` so it doesn't need to * Uses `useTabStore.getState()` and `.subscribe()` so it doesn't need to
* re-render on every keystroke — the effect is triggered once and runs * re-render on every keystroke — the effect is triggered once and runs
* reactively via the store subscription. * reactively via the store subscription.
* *
* Captures the tabId at debounce start so the timeout always saves the * Captures the tabId at debounce start so the timeout always saves the
* correct tab even if the user switches tabs during the debounce window. * correct tab even if the user switches tabs during the debounce window.
*/ */
export function useAutoSave(): { isAutoSaving: boolean; autoSaveEnabled: boolean; toggleAutoSave: () => void } { export function useAutoSave(): {
const [isAutoSaving, setIsAutoSaving] = useState(false) isAutoSaving: boolean
const [autoSaveEnabled, setAutoSaveEnabled] = useState(true) autoSaveEnabled: boolean
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null) toggleAutoSave: () => void
const isSavingRef = useRef(false) } {
const enabledRef = useRef(true) const [isAutoSaving, setIsAutoSaving] = useState(false)
const mountedRef = useRef(true) const [autoSaveEnabled, setAutoSaveEnabled] = useState(true)
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
const toggleAutoSave = useCallback(() => { const isSavingRef = useRef(false)
setAutoSaveEnabled(prev => { const enabledRef = useRef(true)
const next = !prev const mountedRef = useRef(true)
enabledRef.current = next
if (!next && timerRef.current) { const toggleAutoSave = useCallback(() => {
clearTimeout(timerRef.current) setAutoSaveEnabled(prev => {
timerRef.current = null const next = !prev
} enabledRef.current = next
return next if (!next && timerRef.current) {
}) clearTimeout(timerRef.current)
}, []) timerRef.current = null
}
// 暴露给外部（状态栏按钮） return next
_toggleAutoSave = toggleAutoSave })
}, [])
useEffect(() => {
mountedRef.current = true // 暴露给外部（状态栏按钮）
_toggleAutoSave = toggleAutoSave
// Subscribe to Zustand store — fires on every state change
const unsub = useTabStore.subscribe((state) => { useEffect(() => {
if (!enabledRef.current) return mountedRef.current = true
const tab = state.getActiveTab() // Subscribe to Zustand store — fires on every state change
if (!tab || !tab.filePath || !tab.isModified) return const unsub = useTabStore.subscribe(state => {
if (!enabledRef.current) return
// Capture the tabId so the timeout saves the correct tab
const tabIdToSave = tab.id const tab = state.getActiveTab()
if (!tab || !tab.filePath || !tab.isModified) return
// Debounce: clear previous timer, start new one
if (timerRef.current) { // Capture the tabId so the timeout saves the correct tab
clearTimeout(timerRef.current) const tabIdToSave = tab.id
}
// Debounce: clear previous timer, start new one
timerRef.current = setTimeout(async () => { if (timerRef.current) {
if (isSavingRef.current) return clearTimeout(timerRef.current)
}
// Re-read latest state; verify the captured tab still exists and is modified
const currentState = useTabStore.getState() timerRef.current = setTimeout(async () => {
const tabToSave = currentState.tabs.find(t => t.id === tabIdToSave) if (isSavingRef.current) return
if (!tabToSave || !tabToSave.filePath || !tabToSave.isModified) return
// Re-read latest state; verify the captured tab still exists and is modified
isSavingRef.current = true const currentState = useTabStore.getState()
if (mountedRef.current) setIsAutoSaving(true) const tabToSave = currentState.tabs.find(t => t.id === tabIdToSave)
if (!tabToSave || !tabToSave.filePath || !tabToSave.isModified) return
try {
if (!window.electronAPI) return isSavingRef.current = true
const result = await window.electronAPI.saveFile({ if (mountedRef.current) setIsAutoSaving(true)
filePath: tabToSave.filePath,
content: tabToSave.content try {
}) if (!window.electronAPI) return
if (result.success && mountedRef.current) { const result = await window.electronAPI.saveFile({
currentState.setModified(tabToSave.id, false) filePath: tabToSave.filePath,
} content: tabToSave.content,
} catch (error) { })
logError('自动保存失败', error) if (result.success && mountedRef.current) {
} finally { currentState.setModified(tabToSave.id, false)
if (mountedRef.current) setIsAutoSaving(false) }
isSavingRef.current = false } catch (error) {
} logError('自动保存失败', error)
}, AUTO_SAVE_DELAY) } finally {
}) if (mountedRef.current) setIsAutoSaving(false)
isSavingRef.current = false
return () => { }
mountedRef.current = false }, AUTO_SAVE_DELAY)
unsub() })
if (timerRef.current) {
clearTimeout(timerRef.current) return () => {
timerRef.current = null mountedRef.current = false
} unsub()
} if (timerRef.current) {
}, []) clearTimeout(timerRef.current)
timerRef.current = null
// 同步 autoSaveEnabled / isAutoSaving 到 autoSaveStore（供状态栏读取） }
useEffect(() => { }
useAutoSaveStore.getState().setState({ autoSaveEnabled }) }, [])
}, [autoSaveEnabled])
// 同步 autoSaveEnabled / isAutoSaving 到 autoSaveStore（供状态栏读取）
useEffect(() => { useEffect(() => {
useAutoSaveStore.getState().setState({ isAutoSaving }) useAutoSaveStore.getState().setState({ autoSaveEnabled })
}, [isAutoSaving]) }, [autoSaveEnabled])
return { isAutoSaving, autoSaveEnabled, toggleAutoSave } useEffect(() => {
} useAutoSaveStore.getState().setState({ isAutoSaving })
}, [isAutoSaving])
return { isAutoSaving, autoSaveEnabled, toggleAutoSave }
}
src/renderer/hooks/useConfirm.ts
-71
View File
@@ -1,71 +0,0 @@
import { useState, useCallback, useRef } from 'react'
interface ConfirmOptions {
title: string
message: string
confirmLabel?: string
cancelLabel?: string
variant?: 'danger' | 'warning' | 'info'
}
interface ConfirmState extends ConfirmOptions {
open: boolean
resolve: ((value: boolean) => void) | null
}
/**
* UX-01: Promise-based 确认对话框 hook
* 替代原生 confirm()，返回 Promise<boolean>
*/
export function useConfirm() {
const [state, setState] = useState<ConfirmState>({
open: false,
title: '',
message: '',
resolve: null
})
// 使用 ref 确保回调中能拿到最新的 resolve
const resolveRef = useRef<((value: boolean) => void) | null>(null)
const confirm = useCallback((options: ConfirmOptions): Promise<boolean> => {
return new Promise<boolean>((resolve) => {
resolveRef.current = resolve
setState({
open: true,
title: options.title,
message: options.message,
confirmLabel: options.confirmLabel,
cancelLabel: options.cancelLabel,
variant: options.variant,
resolve
})
})
}, [])
const handleConfirm = useCallback(() => {
resolveRef.current?.(true)
setState(prev => ({ ...prev, open: false, resolve: null }))
resolveRef.current = null
}, [])
const handleCancel = useCallback(() => {
resolveRef.current?.(false)
setState(prev => ({ ...prev, open: false, resolve: null }))
resolveRef.current = null
}, [])
return {
confirm,
confirmDialogProps: {
open: state.open,
title: state.title,
message: state.message,
confirmLabel: state.confirmLabel,
cancelLabel: state.cancelLabel,
variant: state.variant,
onConfirm: handleConfirm,
onCancel: handleCancel
}
}
}
src/renderer/hooks/useDocStats.ts
-39
View File
@@ -1,39 +0,0 @@
import { useMemo } from 'react'
export interface DocStats {
/** 单词数（按空白字符分割） */
words: number
/** 总字符数（含空白字符） */
chars: number
/** 字符数（不含空白字符） */
charsNoSpace: number
/** 行数 */
lines: number
}
/**
* 计算文档统计信息：单词数、字符数（含/不含空格）、行数。
* 对空文档或 undefined 返回全零值。
*/
export function computeDocStats(content: string | undefined | null): DocStats {
if (!content) {
return { words: 0, chars: 0, charsNoSpace: 0, lines: 0 }
}
const chars = content.length
const charsNoSpace = content.replace(/\s/g, '').length
const words = content.trim()
? content.trim().split(/\s+/).length
: 0
const lines = content === '' ? 0 : content.split(/\r?\n/).length
return { words, chars, charsNoSpace, lines }
}
/**
* Hook：根据文档内容实时计算统计信息。
* 使用 useMemo 避免不必要的重新计算。
*/
export function useDocStats(content: string | undefined | null): DocStats {
return useMemo(() => computeDocStats(content), [content])
}
src/renderer/hooks/useDragDrop.ts
+77 -74
View File
@@ -1,74 +1,77 @@
import { useEffect, useCallback } from 'react' import { useEffect, useCallback } from 'react'
import { useTabStore } from '../stores/tabStore' import { useTabStore } from '../stores/tabStore'
import { isAllowedFile } from '../lib/fileUtils' import { isAllowedFile } from '../lib/fileUtils'
import { MAX_FILE_SIZE } from '../lib/constants' import { MAX_FILE_SIZE } from '../lib/constants'
import { logError } from '../lib/errorHandler' import { logError } from '../lib/errorHandler'
import { showToast } from '../lib/toast' import { showToast } from '../lib/toast'
export function useDragDrop() { export function useDragDrop() {
const createTab = useTabStore(s => s.createTab) const createTab = useTabStore(s => s.createTab)
const handleDrop = useCallback(async (e: DragEvent) => { const handleDrop = useCallback(
e.preventDefault() async (e: DragEvent) => {
e.stopPropagation() e.preventDefault()
e.stopPropagation()
const files = e.dataTransfer?.files
if (!files) return const files = e.dataTransfer?.files
if (!files) return
let rejected = 0
for (const file of Array.from(files)) { let rejected = 0
// Electron adds a `path` property to File objects for (const file of Array.from(files)) {
const electronFile = file as File & { path?: string } // Electron adds a `path` property to File objects
const filePath: string = electronFile.path || file.name const electronFile = file as File & { path?: string }
if (!isAllowedFile(filePath)) { const filePath: string = electronFile.path || file.name
rejected++ if (!isAllowedFile(filePath)) {
continue rejected++
} continue
if (file.size > MAX_FILE_SIZE) { }
showToast(`"${file.name}" 过大，暂不支持超过 20MB 的文件`) if (file.size > MAX_FILE_SIZE) {
continue showToast(`"${file.name}" 过大，暂不支持超过 20MB 的文件`)
} continue
}
if (window.electronAPI) {
try { if (window.electronAPI) {
const result = await window.electronAPI.readFile(filePath) try {
if (result.success && result.content !== undefined) { const result = await window.electronAPI.readFile(filePath)
createTab(filePath, result.content) if (result.success && result.content !== undefined) {
} createTab(filePath, result.content)
} catch (error) { }
logError('拖拽读取文件失败', error) } catch (error) {
} logError('拖拽读取文件失败', error)
} else { }
const reader = new FileReader() } else {
reader.onload = (ev: ProgressEvent<FileReader>) => { const reader = new FileReader()
const content = ev.target?.result as string reader.onload = (ev: ProgressEvent<FileReader>) => {
createTab(file.name, content) const content = ev.target?.result as string
} createTab(file.name, content)
reader.readAsText(file) }
} reader.readAsText(file)
} }
}
if (rejected > 0) {
showToast(`仅支持 .md / .markdown / .txt 文件，已忽略 ${rejected} 个文件`) if (rejected > 0) {
} showToast(`仅支持 .md / .markdown / .txt 文件，已忽略 ${rejected} 个文件`)
}, [createTab]) }
},
useEffect(() => { [createTab],
const prevent = (e: DragEvent) => { )
e.preventDefault()
e.stopPropagation() useEffect(() => {
} const prevent = (e: DragEvent) => {
e.preventDefault()
document.addEventListener('dragenter', prevent) e.stopPropagation()
document.addEventListener('dragleave', prevent) }
document.addEventListener('dragover', prevent)
document.addEventListener('drop', handleDrop) document.addEventListener('dragenter', prevent)
document.addEventListener('dragleave', prevent)
return () => { document.addEventListener('dragover', prevent)
document.removeEventListener('dragenter', prevent) document.addEventListener('drop', handleDrop)
document.removeEventListener('dragleave', prevent)
document.removeEventListener('dragover', prevent) return () => {
document.removeEventListener('drop', handleDrop) document.removeEventListener('dragenter', prevent)
} document.removeEventListener('dragleave', prevent)
}, [handleDrop]) document.removeEventListener('dragover', prevent)
} document.removeEventListener('drop', handleDrop)
}
}, [handleDrop])
}
src/renderer/hooks/useFileOperations.ts
+120 -94
View File
@@ -1,94 +1,120 @@
import { useCallback, useRef } from 'react' import { useCallback, useRef } from 'react'
import { useTabStore } from '../stores/tabStore' import { useTabStore } from '../stores/tabStore'
import { useEditorStore } from '../stores/editorStore' import { useEditorStore } from '../stores/editorStore'
import { recentFilesRepository } from '../db/recentFilesRepository' import { recentFilesRepository } from '../db/recentFilesRepository'
import { logError } from '../lib/errorHandler' import { logError } from '../lib/errorHandler'
import { showToast } from '../lib/toast' import { MeToast, showToast } from '../lib/toast'
/** /**
* AR-01: 从 App.tsx 提取的文件操作逻辑 * AR-01: 从 App.tsx 提取的文件操作逻辑
* UX-02: 添加 loading 状态指示 * UX-02: 添加 loading 状态指示
* v0.1.9: handleSave 添加防重入锁，避免编辑器 onSave + 全局 Ctrl+S 双重触发 * v0.1.9: handleSave 添加防重入锁，避免编辑器 onSave + 全局 Ctrl+S 双重触发
*/ * v0.6.0: loading 改用 MeToast.loading 链式转换，保存结果用 MeToast.promise 提示
export function useFileOperations() { */
const createTab = useTabStore(s => s.createTab) export function useFileOperations() {
const getActiveTab = useTabStore(s => s.getActiveTab) const createTab = useTabStore(s => s.createTab)
const setLoading = useEditorStore(s => s.setLoading) const getActiveTab = useTabStore(s => s.getActiveTab)
const setLoading = useEditorStore(s => s.setLoading)
// 防重入：onSave 回调 + 全局 Ctrl+S handler 可能在 300ms 内双重触发
const savingGate = useRef(false) // 防重入：onSave 回调 + 全局 Ctrl+S handler 可能在 300ms 内双重触发
const savingGate = useRef(false)
const handleOpenFile = useCallback(async (): Promise<void> => {
try { const handleOpenFile = useCallback(async (): Promise<void> => {
if (!window.electronAPI) return if (!window.electronAPI) return
setLoading('file-open', true) const loading = MeToast.loading('打开文件...')
const result = await window.electronAPI.openFile() try {
if (result && 'filePath' in result) { setLoading('file-open', true)
createTab(result.filePath, result.content) const result = await window.electronAPI.openFile()
if (result.filePath) recentFilesRepository.add(result.filePath) if (result && 'filePath' in result) {
setTimeout(() => useTabStore.getState().saveToDB(), 100) createTab(result.filePath, result.content)
} if (result.filePath) recentFilesRepository.add(result.filePath)
} catch (error) { setTimeout(() => useTabStore.getState().saveToDB(), 100)
logError('打开文件失败', error) loading.success('文件已打开')
showToast('打开文件失败', 'error') } else {
} finally { loading.dismiss()
setLoading('file-open', false) }
} } catch (error) {
}, [createTab, setLoading]) logError('打开文件失败', error)
loading.error('打开文件失败')
const handleSave = useCallback(async (): Promise<void> => { } finally {
// 防重入：300ms 内忽略重复调用（编辑器 onSave + 全局 Ctrl+S 双重触发） setLoading('file-open', false)
if (savingGate.current) return }
savingGate.current = true }, [createTab, setLoading])
try {
const tab = getActiveTab() const handleSave = useCallback(async (): Promise<void> => {
if (!tab || !window.electronAPI) return // 防重入：300ms 内忽略重复调用（编辑器 onSave + 全局 Ctrl+S 双重触发）
const result = await window.electronAPI.saveFile({ if (savingGate.current) return
filePath: tab.filePath, savingGate.current = true
content: tab.content try {
}) const tab = getActiveTab()
if (result.success) { if (!tab || !window.electronAPI) return
useTabStore.getState().setModified(tab.id, false) // v0.6.0: promise 监听保存生命周期 — 自动 loading → success/error，返回原 Promise
showToast('已保存', 'success') const result = await MeToast.promise(
} window.electronAPI.saveFile({
} catch (error) { filePath: tab.filePath,
logError('保存文件失败', error) content: tab.content,
showToast('保存失败', 'error') }),
} finally { {
// 300ms 后释放锁，允许下次保存 loading: '保存中...',
setTimeout(() => { savingGate.current = false }, 300) success: '已保存',
} error: '保存失败',
}, [getActiveTab]) },
)
const handleSaveAs = useCallback(async (): Promise<void> => { if (result.success) {
try { useTabStore.getState().setModified(tab.id, false)
const tab = getActiveTab() } else {
if (!tab || !window.electronAPI) return // IPC 返回 success:false 不 reject，promise 的 error 文案不会触发，需显式提示
const result = await window.electronAPI.saveFileAs({ content: tab.content }) showToast('保存失败', 'error')
if (result.success) { }
useTabStore.getState().setModified(tab.id, false) } catch (error) {
showToast('已保存', 'success') logError('保存文件失败', error)
} } finally {
} catch (error) { // 300ms 后释放锁，允许下次保存
logError('另存为失败', error) setTimeout(() => {
showToast('另存为失败', 'error') savingGate.current = false
} }, 300)
}, [getActiveTab]) }
}, [getActiveTab])
const handleOpenRecent = useCallback(async (filePath: string): Promise<void> => {
if (!window.electronAPI) return const handleSaveAs = useCallback(async (): Promise<void> => {
setLoading('file-open', true) try {
try { const tab = getActiveTab()
const result = await window.electronAPI.readFile(filePath) if (!tab || !window.electronAPI) return
if (result.success && result.content !== undefined) { const result = await MeToast.promise(
createTab(filePath, result.content) window.electronAPI.saveFileAs({ content: tab.content }),
recentFilesRepository.add(filePath) {
setTimeout(() => useTabStore.getState().saveToDB(), 100) loading: '另存为...',
} success: '已保存',
} finally { error: '另存为失败',
setLoading('file-open', false) },
} )
}, [createTab, setLoading]) if (result.success) {
useTabStore.getState().setModified(tab.id, false)
return { handleOpenFile, handleSave, handleSaveAs, handleOpenRecent } } else if (!result.canceled) {
} showToast('另存为失败', 'error')
}
} catch (error) {
logError('另存为失败', error)
}
}, [getActiveTab])
const handleOpenRecent = useCallback(
async (filePath: string): Promise<void> => {
if (!window.electronAPI) return
setLoading('file-open', true)
try {
const result = await window.electronAPI.readFile(filePath)
if (result.success && result.content !== undefined) {
createTab(filePath, result.content)
recentFilesRepository.add(filePath)
setTimeout(() => useTabStore.getState().saveToDB(), 100)
}
} finally {
setLoading('file-open', false)
}
},
[createTab, setLoading],
)
return { handleOpenFile, handleSave, handleSaveAs, handleOpenRecent }
}
src/renderer/hooks/useFolderOperations.ts
+52 -52
View File
@@ -1,52 +1,52 @@
import { useEffect, useCallback } from 'react' import { useEffect, useCallback } from 'react'
import { useSidebarStore } from '../stores/sidebarStore' import { useSidebarStore } from '../stores/sidebarStore'
import { useEditorStore } from '../stores/editorStore' import { useEditorStore } from '../stores/editorStore'
/** /**
* AR-02: 从 Sidebar.tsx 提取的文件夹操作逻辑 * AR-02: 从 Sidebar.tsx 提取的文件夹操作逻辑
* UX-02: 添加目录加载 loading 状态 * UX-02: 添加目录加载 loading 状态
*/ */
export function useFolderOperations() { export function useFolderOperations() {
const rootPath = useSidebarStore(s => s.rootPath) const rootPath = useSidebarStore(s => s.rootPath)
const setRootPath = useSidebarStore(s => s.setRootPath) const setRootPath = useSidebarStore(s => s.setRootPath)
const setTree = useSidebarStore(s => s.setTree) const setTree = useSidebarStore(s => s.setTree)
const expandDirs = useSidebarStore(s => s.expandDirs) const expandDirs = useSidebarStore(s => s.expandDirs)
const setLoading = useEditorStore(s => s.setLoading) const setLoading = useEditorStore(s => s.setLoading)
const handleOpenFolder = useCallback(async () => { const handleOpenFolder = useCallback(async () => {
if (!window.electronAPI) return if (!window.electronAPI) return
const dirPath = await window.electronAPI.openFolderDialog() const dirPath = await window.electronAPI.openFolderDialog()
if (!dirPath) return if (!dirPath) return
setRootPath(dirPath) setRootPath(dirPath)
expandDirs([dirPath]) expandDirs([dirPath])
setLoading('dir-load', true) setLoading('dir-load', true)
try { try {
const dirTree = await window.electronAPI.readDirTree(dirPath) const dirTree = await window.electronAPI.readDirTree(dirPath)
if (dirTree.success && dirTree.tree) { if (dirTree.success && dirTree.tree) {
setTree(dirTree.tree) setTree(dirTree.tree)
window.electronAPI.watchDir(dirPath) window.electronAPI.watchDir(dirPath)
} }
} finally { } finally {
setLoading('dir-load', false) setLoading('dir-load', false)
} }
}, [setRootPath, setTree, expandDirs, setLoading]) }, [setRootPath, setTree, expandDirs, setLoading])
const refreshTree = useCallback(async () => { const refreshTree = useCallback(async () => {
if (!rootPath || !window.electronAPI) return if (!rootPath || !window.electronAPI) return
setLoading('dir-load', true) setLoading('dir-load', true)
try { try {
const result = await window.electronAPI.readDirTree(rootPath) const result = await window.electronAPI.readDirTree(rootPath)
if (result.success && result.tree) setTree(result.tree) if (result.success && result.tree) setTree(result.tree)
} finally { } finally {
setLoading('dir-load', false) setLoading('dir-load', false)
} }
}, [rootPath, setTree, setLoading]) }, [rootPath, setTree, setLoading])
useEffect(() => { useEffect(() => {
if (!window.electronAPI) return if (!window.electronAPI) return
const unsubscribe = window.electronAPI.onDirChanged(() => refreshTree()) const unsubscribe = window.electronAPI.onDirChanged(() => refreshTree())
return unsubscribe return unsubscribe
}, [refreshTree]) }, [refreshTree])
return { handleOpenFolder } return { handleOpenFolder }
} }
src/renderer/hooks/useIpcListeners.ts
+22 -22
View File
@@ -1,22 +1,22 @@
import { useEffect } from 'react' import { useEffect } from 'react'
import { useTabStore } from '../stores/tabStore' import { useTabStore } from '../stores/tabStore'
import { recentFilesRepository } from '../db/recentFilesRepository' import { recentFilesRepository } from '../db/recentFilesRepository'
/** /**
* 主进程事件注册 hook * 主进程事件注册 hook
* 处理通过命令行或文件关联打开的文件 * 处理通过命令行或文件关联打开的文件
*/ */
export function useIpcListeners() { export function useIpcListeners() {
const createTab = useTabStore(s => s.createTab) const createTab = useTabStore(s => s.createTab)
useEffect(() => { useEffect(() => {
if (!window.electronAPI) return if (!window.electronAPI) return
const api = window.electronAPI const api = window.electronAPI
const onOpen = (data: { filePath: string; content: string }) => { const onOpen = (data: { filePath: string; content: string }) => {
createTab(data.filePath, data.content) createTab(data.filePath, data.content)
if (data.filePath) recentFilesRepository.add(data.filePath) if (data.filePath) recentFilesRepository.add(data.filePath)
setTimeout(() => useTabStore.getState().saveToDB(), 100) setTimeout(() => useTabStore.getState().saveToDB(), 100)
} }
return api.onFileOpenInTab(onOpen) return api.onFileOpenInTab(onOpen)
}, [createTab]) }, [createTab])
} }
src/renderer/hooks/useKeyboard.ts
+74 -53
View File
@@ -1,53 +1,74 @@
import { useEffect, useCallback } from 'react' import { useEffect, useCallback } from 'react'
import { useTabStore } from '../stores/tabStore' import { useTabStore } from '../stores/tabStore'
/** /**
* 全局键盘快捷键 hook。 * 全局键盘快捷键 hook。
* MetonaEditor 内置工具栏处理格式化和模式切换（Ctrl+B/I/1/2/3）， * MetonaEditor 内置工具栏处理格式化和模式切换（Ctrl+B/I/1/2/3），
* v0.1.9 onSave 回调处理编辑器聚焦时的 Ctrl+S， * v0.1.9 onSave 回调处理编辑器聚焦时的 Ctrl+S，
* 全局 handler 作为焦点外兜底（工具栏/侧边栏聚焦时仍可保存）。 * 全局 handler 作为焦点外兜底（工具栏/侧边栏聚焦时仍可保存）。
*/ */
export function useKeyboard(handleOpenFile: () => void, handleSave: () => void, handleSaveAs: () => void) { export function useKeyboard(
const handleKeydown = useCallback((e: KeyboardEvent) => { handleOpenFile: () => void,
const isCtrl = e.ctrlKey || e.metaKey handleSave: () => void,
handleSaveAs: () => void,
if (isCtrl && e.key === 'o') { e.preventDefault(); handleOpenFile(); return } ) {
// 全局兜底：编辑器未聚焦时仍可保存（编辑器聚焦时由 onSave 回调处理） const handleKeydown = useCallback(
if (isCtrl && e.key === 's' && !e.shiftKey) { e.preventDefault(); handleSave(); return } (e: KeyboardEvent) => {
if (isCtrl && e.shiftKey && e.key === 'S') { e.preventDefault(); handleSaveAs(); return } const isCtrl = e.ctrlKey || e.metaKey
const tabState = useTabStore.getState() if (isCtrl && e.key === 'o') {
if (isCtrl && e.key === 't') { e.preventDefault(); tabState.createTab(null, ''); return } e.preventDefault()
if (isCtrl && e.key === 'w') { handleOpenFile()
e.preventDefault() return
if (tabState.activeTabId) tabState.closeTab(tabState.activeTabId) }
return // 全局兜底：编辑器未聚焦时仍可保存（编辑器聚焦时由 onSave 回调处理）
} if (isCtrl && e.key === 's' && !e.shiftKey) {
e.preventDefault()
// Ctrl+Tab / Ctrl+Shift+Tab — MRU 顺序切换 handleSave()
if (isCtrl && e.key === 'Tab') { return
e.preventDefault() }
const { tabs, activeTabId, mruStack } = tabState if (isCtrl && e.shiftKey && e.key === 'S') {
if (tabs.length > 1) { e.preventDefault()
if (mruStack.length > 0) { handleSaveAs()
const targetId = mruStack[0] return
if (tabs.find(t => t.id === targetId)) { }
tabState.switchToTab(targetId)
return const tabState = useTabStore.getState()
} if (isCtrl && e.key === 't') {
} e.preventDefault()
const idx = tabs.findIndex(t => t.id === activeTabId) tabState.createTab(null, '')
const next = e.shiftKey return
? (idx - 1 + tabs.length) % tabs.length }
: (idx + 1) % tabs.length if (isCtrl && e.key === 'w') {
tabState.switchToTab(tabs[next].id) e.preventDefault()
} if (tabState.activeTabId) tabState.closeTab(tabState.activeTabId)
return return
} }
}, [handleOpenFile, handleSave, handleSaveAs])
// Ctrl+Tab / Ctrl+Shift+Tab — MRU 顺序切换
useEffect(() => { if (isCtrl && e.key === 'Tab') {
document.addEventListener('keydown', handleKeydown) e.preventDefault()
return () => document.removeEventListener('keydown', handleKeydown) const { tabs, activeTabId, mruStack } = tabState
}, [handleKeydown]) if (tabs.length > 1) {
} if (mruStack.length > 0) {
const targetId = mruStack[0]
if (tabs.find(t => t.id === targetId)) {
tabState.switchToTab(targetId)
return
}
}
const idx = tabs.findIndex(t => t.id === activeTabId)
const next = e.shiftKey ? (idx - 1 + tabs.length) % tabs.length : (idx + 1) % tabs.length
tabState.switchToTab(tabs[next].id)
}
return
}
},
[handleOpenFile, handleSave, handleSaveAs],
)
useEffect(() => {
document.addEventListener('keydown', handleKeydown)
return () => document.removeEventListener('keydown', handleKeydown)
}, [handleKeydown])
}
src/renderer/hooks/useSettingsInit.ts
+48 -47
View File
@@ -1,47 +1,48 @@
import { useEffect, useRef } from 'react' import { useEffect, useRef } from 'react'
import { useEditorStore } from '../stores/editorStore' import { useEditorStore } from '../stores/editorStore'
import { useSidebarStore } from '../stores/sidebarStore' import { useSidebarStore } from '../stores/sidebarStore'
import { settingsRepository } from '../db/settingsRepository' import { settingsRepository } from '../db/settingsRepository'
import { logError } from '../lib/errorHandler' import { logError } from '../lib/errorHandler'
/** /**
* AR-04: 统一设置加载 hook * AR-04: 统一设置加载 hook
* 一次性从 MetonaSqlark 加载所有设置，分发到各 store， * 一次性从 MetonaSqlark 加载所有设置，分发到各 store，
* 替代各 hook 各自独立加载设置的模式。 * 替代各 hook 各自独立加载设置的模式。
*/ */
export function useSettingsInit() { export function useSettingsInit() {
const setThemeMode = useEditorStore(s => s.setThemeMode) const setThemeMode = useEditorStore(s => s.setThemeMode)
const setViewMode = useEditorStore(s => s.setViewMode) const setViewMode = useEditorStore(s => s.setViewMode)
const isInitialized = useRef(false) const isInitialized = useRef(false)
useEffect(() => { useEffect(() => {
if (isInitialized.current) return if (isInitialized.current) return
isInitialized.current = true isInitialized.current = true
settingsRepository.load() settingsRepository
.then((settings) => { .load()
// 主题：优先使用保存的设置，否则跟随系统偏好 .then(settings => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches // 主题：优先使用保存的设置，否则跟随系统偏好
const themeMode = settings.themeMode ?? (prefersDark ? 'dark' : 'light') const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
setThemeMode(themeMode) const themeMode = settings.themeMode ?? (prefersDark ? 'dark' : 'light')
setThemeMode(themeMode)
// 视图模式
setViewMode(settings.viewMode ?? 'editor') // 视图模式
setViewMode(settings.viewMode ?? 'editor')
// Sidebar 设置（直接分发，避免 sidebarStore 再次读取 IndexedDB）
const sidebarStore = useSidebarStore.getState() // Sidebar 设置（直接分发，避免 sidebarStore 再次读取 IndexedDB）
if (!sidebarStore._loaded) { const sidebarStore = useSidebarStore.getState()
useSidebarStore.setState({ if (!sidebarStore._loaded) {
isVisible: !settings.sidebarCollapsed, useSidebarStore.setState({
sidebarWidth: settings.sidebarWidth, isVisible: !settings.sidebarCollapsed,
_loaded: true sidebarWidth: settings.sidebarWidth,
}) _loaded: true,
} })
}) }
.catch((error: unknown) => { })
logError('加载设置失败', error) .catch((error: unknown) => {
}) logError('加载设置失败', error)
}, [setThemeMode, setViewMode]) })
}, [setThemeMode, setViewMode])
return { isInitialized }
} return { isInitialized }
}
src/renderer/hooks/useSidebarResize.ts
+45 -45
View File
@@ -1,45 +1,45 @@
import { useState, useRef, useEffect } from 'react' import { useState, useRef, useEffect } from 'react'
import { useSidebarStore } from '../stores/sidebarStore' import { useSidebarStore } from '../stores/sidebarStore'
/** /**
* AR-02: 从 Sidebar.tsx 提取的 resize 逻辑 * AR-02: 从 Sidebar.tsx 提取的 resize 逻辑
* *
* 拖拽过程中直接操作 DOM 宽度（避免每次 mousemove 触发 store 更新+重渲染）， * 拖拽过程中直接操作 DOM 宽度（避免每次 mousemove 触发 store 更新+重渲染），
* 拖拽结束时将最终宽度同步到 sidebarStore（持久化到 IndexedDB）。 * 拖拽结束时将最终宽度同步到 sidebarStore（持久化到 IndexedDB）。
*/ */
export function useSidebarResize() { export function useSidebarResize() {
const [isResizing, setIsResizing] = useState(false) const [isResizing, setIsResizing] = useState(false)
const sidebarRef = useRef<HTMLDivElement>(null) const sidebarRef = useRef<HTMLDivElement>(null)
useEffect(() => { useEffect(() => {
if (!isResizing) return if (!isResizing) return
const handleMouseMove = (e: MouseEvent): void => { const handleMouseMove = (e: MouseEvent): void => {
if (sidebarRef.current) { if (sidebarRef.current) {
const newWidth = Math.max(180, Math.min(500, e.clientX)) const newWidth = Math.max(180, Math.min(500, e.clientX))
sidebarRef.current.style.width = newWidth + 'px' sidebarRef.current.style.width = newWidth + 'px'
} }
} }
const handleMouseUp = (): void => { const handleMouseUp = (): void => {
// 拖拽结束时将最终宽度持久化到 store（→ IndexedDB） // 拖拽结束时将最终宽度持久化到 store（→ IndexedDB）
if (sidebarRef.current) { if (sidebarRef.current) {
const width = sidebarRef.current.offsetWidth const width = sidebarRef.current.offsetWidth
const clamped = Math.max(180, Math.min(500, width)) const clamped = Math.max(180, Math.min(500, width))
useSidebarStore.getState().setSidebarWidth(clamped) useSidebarStore.getState().setSidebarWidth(clamped)
} }
setIsResizing(false) setIsResizing(false)
} }
document.addEventListener('mousemove', handleMouseMove) document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp) document.addEventListener('mouseup', handleMouseUp)
return () => { return () => {
document.removeEventListener('mousemove', handleMouseMove) document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseUp) document.removeEventListener('mouseup', handleMouseUp)
} }
}, [isResizing]) }, [isResizing])
const startResize = (): void => setIsResizing(true) const startResize = (): void => setIsResizing(true)
return { sidebarRef, isResizing, startResize } return { sidebarRef, isResizing, startResize }
} }
src/renderer/hooks/useTheme.ts
+97 -91
View File
@@ -1,91 +1,97 @@
import { useEffect, useCallback } from 'react' import { useEffect, useCallback } from 'react'
import MeEditor from '@metona-team/metona-editor' import MeEditor from '@metona-team/metona-editor'
import { useEditorStore } from '../stores/editorStore' import { useEditorStore } from '../stores/editorStore'
import { settingsRepository } from '../db/settingsRepository' import { settingsRepository } from '../db/settingsRepository'
import type { ThemeMode } from '../types/settings' import type { ThemeMode } from '../types/settings'
/** 将 hex 颜色转为带 alpha 的版本，用于背景色 */ /** 将 hex 颜色转为带 alpha 的版本，用于背景色 */
function hexWithAlpha(hex: string, alpha: number): string { function hexWithAlpha(hex: string, alpha: number): string {
if (!hex || !hex.startsWith('#')) return hex if (!hex || !hex.startsWith('#')) return hex
const a = Math.round(alpha * 255).toString(16).padStart(2, '0') const a = Math.round(alpha * 255)
return hex.length === 7 ? hex + a : hex.slice(0, 7) + a .toString(16)
} .padStart(2, '0')
return hex.length === 7 ? hex + a : hex.slice(0, 7) + a
/** 将编辑器 CSS 变量同步到应用根元素，保持颜色一致 */ }
function syncAppColorsToEditor(): void {
try { /** 将编辑器 CSS 变量同步到应用根元素，保持颜色一致 */
// v0.5.0: MeEditor.themes.exportCSSVars() 在 0.4.0 中仍保留（themeUtils 别名） function syncAppColorsToEditor(): void {
const vars = MeEditor.themes.exportCSSVars() try {
if (!vars || typeof vars !== 'object') return // v0.5.0: MeEditor.themes.exportCSSVars() 在 0.4.0 中仍保留（themeUtils 别名）
const root = document.documentElement const vars = MeEditor.themes.exportCSSVars()
const set = (name: string, value: string | undefined) => { if (!vars || typeof vars !== 'object') return
if (value) root.style.setProperty(name, value) const root = document.documentElement
} const set = (name: string, value: string | undefined) => {
const accent = vars['--md-accent'] ?? '#1a73e8' if (value) root.style.setProperty(name, value)
// 直接映射 — 文本/边框用纯色 }
set('--bg', vars['--md-bg']) const accent = vars['--md-accent'] ?? '#1a73e8'
set('--text', vars['--md-text']) // 直接映射 — 文本/边框用纯色
set('--border', vars['--md-border']) set('--bg', vars['--md-bg'])
set('--primary', accent) set('--text', vars['--md-text'])
set('--primary-dark', accent) set('--border', vars['--md-border'])
set('--text-secondary', vars['--md-muted']) set('--primary', accent)
set('--text-tertiary', vars['--md-muted']) set('--primary-dark', accent)
set('--code-bg', vars['--md-code-bg']) set('--text-secondary', vars['--md-muted'])
// 背景派生 — 用 accent 的低透明度版本 set('--text-tertiary', vars['--md-muted'])
const accentBg = hexWithAlpha(accent, 0.12) set('--code-bg', vars['--md-code-bg'])
set('--primary-light', accentBg) // 背景派生 — 用 accent 的低透明度版本
set('--sidebar-active', accentBg) const accentBg = hexWithAlpha(accent, 0.12)
set('--sidebar-bg', vars['--md-bg']) set('--primary-light', accentBg)
set('--sidebar-border', vars['--md-border']) set('--sidebar-active', accentBg)
set('--sidebar-hover', hexWithAlpha(vars['--md-border'] ?? '#e1e4e8', 0.4)) set('--sidebar-bg', vars['--md-bg'])
set('--bg-secondary', hexWithAlpha(vars['--md-text'] ?? '#333', 0.04)) set('--sidebar-border', vars['--md-border'])
set('--bg-tertiary', hexWithAlpha(vars['--md-text'] ?? '#333', 0.08)) set('--sidebar-hover', hexWithAlpha(vars['--md-border'] ?? '#e1e4e8', 0.4))
set('--border-light', hexWithAlpha(vars['--md-border'] ?? '#e1e4e8', 0.5)) set('--bg-secondary', hexWithAlpha(vars['--md-text'] ?? '#333', 0.04))
set('--search-bg', hexWithAlpha(vars['--md-text'] ?? '#333', 0.04)) set('--bg-tertiary', hexWithAlpha(vars['--md-text'] ?? '#333', 0.08))
set('--search-border', vars['--md-border']) set('--border-light', hexWithAlpha(vars['--md-border'] ?? '#e1e4e8', 0.5))
// 阴影根据主题适配 set('--search-bg', hexWithAlpha(vars['--md-text'] ?? '#333', 0.04))
const isDark = vars['--md-bg'] && vars['--md-bg'] !== '#ffffff' && vars['--md-bg'] !== '#fff' set('--search-border', vars['--md-border'])
root.style.setProperty('--shadow', isDark // 阴影根据主题适配
? '0 1px 3px rgba(0,0,0,0.3)' const isDark = vars['--md-bg'] && vars['--md-bg'] !== '#ffffff' && vars['--md-bg'] !== '#fff'
: '0 1px 3px rgba(0,0,0,0.08)') root.style.setProperty(
root.style.setProperty('--shadow-lg', isDark '--shadow',
? '0 4px 12px rgba(0,0,0,0.4)' isDark ? '0 1px 3px rgba(0,0,0,0.3)' : '0 1px 3px rgba(0,0,0,0.08)',
: '0 4px 12px rgba(0,0,0,0.1)') )
} catch { /* 容错 */ } root.style.setProperty(
} '--shadow-lg',
isDark ? '0 4px 12px rgba(0,0,0,0.4)' : '0 4px 12px rgba(0,0,0,0.1)',
const THEME_TO_TOAST: Record<ThemeMode, string> = { )
light: 'light', } catch {
dark: 'dark', /* 容错 */
warm: 'warm', }
} }
/** const THEME_TO_TOAST: Record<ThemeMode, string> = {
* 主题 hook — 三主题循环（亮色 → 暗色 → 暖色）， light: 'light',
* 应用颜色自动同步编辑器主题，保持一致。 dark: 'dark',
*/ warm: 'warm',
export function useTheme() { }
const themeMode = useEditorStore(s => s.themeMode)
const cycleTheme = useEditorStore(s => s.cycleTheme) /**
* 主题 hook — 三主题循环（亮色 → 暗色 → 暖色），
const handleCycleTheme = useCallback(() => { * 应用颜色自动同步编辑器主题，保持一致。
const next = cycleTheme() */
// 同步编辑器全局主题 export function useTheme() {
MeEditor.setTheme(next) const themeMode = useEditorStore(s => s.themeMode)
// 同步 Toast 主题 const cycleTheme = useEditorStore(s => s.cycleTheme)
import('../lib/toast').then(({ MeToast }) => {
MeToast.themes.switchTheme(THEME_TO_TOAST[next] ?? 'auto') const handleCycleTheme = useCallback(() => {
}) const next = cycleTheme()
// 持久化 // 同步编辑器全局主题
settingsRepository.save({ themeMode: next }) MeEditor.setTheme(next)
}, [cycleTheme]) // 同步 Toast 主题
import('../lib/toast').then(({ MeToast }) => {
// themeMode 变化时同步应用颜色 MeToast.themes.switchTheme(THEME_TO_TOAST[next] ?? 'auto')
useEffect(() => { })
// 暗色/暖色统一加 .dark class（兼容 global.css 中的 :root.dark 硬编码规则） // 持久化
document.documentElement.classList.toggle('dark', themeMode === 'dark' || themeMode === 'warm') settingsRepository.save({ themeMode: next })
syncAppColorsToEditor() }, [cycleTheme])
}, [themeMode])
// themeMode 变化时同步应用颜色
return { themeMode, cycleTheme: handleCycleTheme } useEffect(() => {
} // 暗色/暖色统一加 .dark class（兼容 global.css 中的 :root.dark 硬编码规则）
document.documentElement.classList.toggle('dark', themeMode === 'dark' || themeMode === 'warm')
syncAppColorsToEditor()
}, [themeMode])
return { themeMode, cycleTheme: handleCycleTheme }
}
src/renderer/hooks/useUnsavedWarning.ts
+57 -57
View File
@@ -1,57 +1,57 @@
import { useEffect, useCallback, useRef } from 'react' import { useEffect, useCallback, useRef } from 'react'
/** /**
* 未保存提醒 hook * 未保存提醒 hook
* UX-01: 接受外部 confirm 函数，替代原生 confirm() * UX-01: 接受外部 confirm 函数，替代原生 confirm()
*/ */
export function useUnsavedWarning( export function useUnsavedWarning(
hasUnsaved: () => boolean, hasUnsaved: () => boolean,
confirmFn?: (message: string) => Promise<boolean>, confirmFn?: (message: string) => Promise<boolean>,
// D5: 关闭前回调（flush 待保存数据） // D5: 关闭前回调（flush 待保存数据）
onBeforeForceClose?: () => Promise<void> onBeforeForceClose?: () => Promise<void>,
) { ) {
const confirmFnRef = useRef(confirmFn) const confirmFnRef = useRef(confirmFn)
confirmFnRef.current = confirmFn confirmFnRef.current = confirmFn
const onBeforeForceCloseRef = useRef(onBeforeForceClose) const onBeforeForceCloseRef = useRef(onBeforeForceClose)
onBeforeForceCloseRef.current = onBeforeForceClose onBeforeForceCloseRef.current = onBeforeForceClose
const doConfirm = useCallback(async (message: string): Promise<boolean> => { const doConfirm = useCallback(async (message: string): Promise<boolean> => {
if (confirmFnRef.current) { if (confirmFnRef.current) {
return confirmFnRef.current(message) return confirmFnRef.current(message)
} }
// 后备方案：如果没有提供 confirmFn，使用 beforeunload 行为 // 后备方案：如果没有提供 confirmFn，使用 beforeunload 行为
return true return true
}, []) }, [])
useEffect(() => { useEffect(() => {
if (!window.electronAPI) { if (!window.electronAPI) {
const handler = (e: BeforeUnloadEvent) => { const handler = (e: BeforeUnloadEvent) => {
if (hasUnsaved()) { if (hasUnsaved()) {
e.preventDefault() e.preventDefault()
e.returnValue = '' e.returnValue = ''
} }
} }
window.addEventListener('beforeunload', handler) window.addEventListener('beforeunload', handler)
return () => window.removeEventListener('beforeunload', handler) return () => window.removeEventListener('beforeunload', handler)
} }
const api = window.electronAPI const api = window.electronAPI
const unsubscribe = api.onConfirmClose(async () => { const unsubscribe = api.onConfirmClose(async () => {
if (!hasUnsaved()) { if (!hasUnsaved()) {
await onBeforeForceCloseRef.current?.() await onBeforeForceCloseRef.current?.()
api.forceClose() api.forceClose()
return return
} }
const shouldClose = await doConfirm('有文件尚未保存，确定要关闭吗？') const shouldClose = await doConfirm('有文件尚未保存，确定要关闭吗？')
if (shouldClose) { if (shouldClose) {
await onBeforeForceCloseRef.current?.() await onBeforeForceCloseRef.current?.()
api.forceClose() api.forceClose()
} else { } else {
api.cancelClose() api.cancelClose()
} }
}) })
return unsubscribe return unsubscribe
}, [hasUnsaved, doConfirm]) }, [hasUnsaved, doConfirm])
} }
src/renderer/lib/__tests__/markdown.test.ts
+93 -19
View File
@@ -1,7 +1,7 @@
import { describe, it, expect } from 'vitest' import { describe, it, expect } from 'vitest'
import { renderMarkdown } from '../markdown' import { renderMarkdown, renderMarkdownSync } from '../markdown'
describe('renderMarkdown', () => { describe('renderMarkdown (MetonaEditor 内置解析器)', () => {
it('should render a simple heading', async () => { it('should render a simple heading', async () => {
const result = await renderMarkdown('# Hello World') const result = await renderMarkdown('# Hello World')
expect(result).toContain('<h1') expect(result).toContain('<h1')
@@ -26,7 +26,7 @@ describe('renderMarkdown', () => {
expect(result).toContain('code') expect(result).toContain('code')
}) })
it('should render code blocks with syntax highlighting', async () => { it('should render code blocks', async () => {
const md = '```javascript\nconst x = 1;\n```' const md = '```javascript\nconst x = 1;\n```'
const result = await renderMarkdown(md) const result = await renderMarkdown(md)
expect(result).toContain('<pre') expect(result).toContain('<pre')
@@ -75,32 +75,106 @@ describe('renderMarkdown', () => {
expect(result).toContain('deleted') expect(result).toContain('deleted')
}) })
it('should render task list', async () => {
const result = await renderMarkdown('- [x] done\n- [ ] todo')
expect(result).toContain('me-task-item')
expect(result).toContain('checked')
})
it('should render mermaid as .me-mermaid container', async () => {
const md = '```mermaid\ngraph TD\nA-->B\n```'
const result = await renderMarkdown(md)
expect(result).toContain('me-mermaid')
expect(result).toContain('class="mermaid"')
expect(result).toContain('graph TD')
})
it('should handle empty content', async () => { it('should handle empty content', async () => {
const result = await renderMarkdown('') const result = await renderMarkdown('')
expect(result).toBe('') expect(result).toBe('')
}) })
it('should return error HTML on rendering failure with invalid input', async () => { it('should handle null and undefined filePath', async () => {
// unified should still handle gracefully, but verify error path works expect(await renderMarkdown('# No File', null)).toContain('No File')
const result = await renderMarkdown('normal text') expect(await renderMarkdown('# No File')).toContain('No File')
expect(result).not.toContain('渲染错误')
}) })
it('should cache processors for same filePath', async () => { it('should be sync-callable via renderMarkdownSync', () => {
// Call twice with same filePath to test caching const result = renderMarkdownSync('# Sync')
const result1 = await renderMarkdown('# Test', '/test/file.md') expect(result).toContain('<h1')
const result2 = await renderMarkdown('# Test 2', '/test/file.md')
expect(result1).toContain('<h1')
expect(result2).toContain('Test 2')
}) })
})
it('should handle null filePath', async () => { describe('fixImageSrcs — 相对路径图片修复', () => {
const result = await renderMarkdown('# No File', null) const FILE = '/home/user/docs/note.md'
expect(result).toContain('No File')
it('should fix relative image paths to file://', async () => {
const result = await renderMarkdown('![img](./pic.png)', FILE)
expect(result).toContain('src="file:///home/user/docs/pic.png"')
})
it('should fix nested relative paths', async () => {
const result = await renderMarkdown('![img](assets/a.png)', FILE)
expect(result).toContain('src="file:///home/user/docs/assets/a.png"')
})
it('should fix unix absolute paths', async () => {
const result = await renderMarkdown('![img](/abs/pic.png)', FILE)
expect(result).toContain('src="file:///abs/pic.png"')
})
it('should not touch http/https/data:/file: URLs', async () => {
const md = '![a](https://x.com/a.png) ![b](data:image/png;base64,xx) ![c](file:///c.png)'
const result = await renderMarkdown(md, FILE)
expect(result).toContain('https://x.com/a.png')
expect(result).toContain('data:image/png;base64,xx')
expect(result).toContain('file:///c.png')
})
it('should skip out-of-directory traversal (../ and ../../)', async () => {
const md = '![a](../outside.png) ![b](../../outside.png)'
const result = await renderMarkdown(md, FILE)
// 越界路径保持原样（不注入 file://）
expect(result).not.toContain('file:')
expect(result).toContain('../outside.png')
expect(result).toContain('../../outside.png')
})
it('should not treat sibling directory with same prefix as inside', async () => {
// /home/user/docs-other/ 与 /home/user/docs/ 前缀相似但目录不同
const result = await renderMarkdown('![img](../docs-other/pic.png)', FILE)
expect(result).not.toContain('file:')
expect(result).toContain('../docs-other/pic.png')
})
it('should not touch images when filePath is null', async () => {
const result = await renderMarkdown('![img](./pic.png)')
expect(result).toContain('./pic.png')
expect(result).not.toContain('file:')
})
it('should fix relative image paths from root-level file', async () => {
const result = await renderMarkdown('![img](./pic.png)', '/note.md')
expect(result).toContain('src="file:///pic.png"')
})
it('should escape special chars in fixed path', async () => {
const result = await renderMarkdown('![img](./a&b.png)', FILE)
expect(result).toContain('src="file:///home/user/docs/a&amp;b.png"')
})
})
describe('XSS 防护（内置 safeUrl）', () => {
it('should not emit anchor for javascript: URLs', async () => {
const result = await renderMarkdown('[x](javascript:alert(1))')
// 内置解析器将危险 URL 转义原样输出（不生成 <a>），文本不构成可执行链接
expect(result).not.toContain('<a')
expect(result).not.toContain('href=')
}) })
it('should handle undefined filePath', async () => { it('should not emit img for javascript: image src', async () => {
const result = await renderMarkdown('# No File') const result = await renderMarkdown('![x](javascript:alert(1))')
expect(result).toContain('No File') expect(result).not.toContain('<img')
expect(result).not.toContain('src=')
}) })
}) })
src/renderer/lib/markdown.ts
+99 -198
View File
@@ -1,198 +1,99 @@
import { unified, type Plugin } from 'unified' import { parseMarkdown } from '@metona-team/metona-editor'
import remarkParse from 'remark-parse'
import remarkGfm from 'remark-gfm' // v0.6.0: 渲染管线迁移至 MetonaEditor 内置解析器（parseMarkdown），
import remarkRehype from 'remark-rehype' // 移除 unified/remark/rehype 自研管线。
import rehypeRaw from 'rehype-raw' // 内置解析器原生支持：GFM / 任务列表 / 脚注 / 数学公式 / 定义列表 / emoji /
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize' // mermaid（输出 .me-mermaid 容器）/ XSS 防护（escapeHTML + safeUrl）。
import rehypeStringify from 'rehype-stringify'
import rehypeHighlight from 'rehype-highlight' // 简单的路径解析（Electron renderer 中没有 path 模块）
import { visit } from 'unist-util-visit' // E1: 统一规范化 — 解析前先全部转为 /，避免混合分隔符导致的误判
import type { Element, Root } from 'hast' function normPath(p: string): string {
return p.replace(/\\/g, '/').replace(/\/+$/, '')
// 简单的路径解析（Electron renderer 中没有 path 模块） }
// E1: 统一规范化 — 解析前先全部转为 /，避免混合分隔符导致的误判
function normPath(p: string): string { function resolveRelativePath(base: string, rel: string): string {
return p.replace(/\\/g, '/').replace(/\/+$/, '') const parts = normPath(base).split('/')
} parts.pop() // 移除文件名
const relParts = rel.split('/')
function resolveRelativePath(base: string, rel: string): string { for (const p of relParts) {
const parts = normPath(base).split('/') if (p === '.' || p === '') continue
parts.pop() // 移除文件名 if (p === '..') {
const relParts = rel.split('/') if (parts.length > 0) parts.pop()
for (const p of relParts) { } else {
if (p === '.' || p === '') continue parts.push(p)
if (p === '..') { }
if (parts.length > 0) parts.pop() }
} else { return parts.join('/')
parts.push(p) }
}
} /** 属性值转义（与内置解析器 escapeAttr 行为一致） */
return parts.join('/') function escapeAttr(s: string): string {
} return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
}
// 自定义 rehype 插件：将相对路径图片转为 file:// 绝对路径
function rehypeFixImages(filePath: string | null): Plugin<[], Root> { /**
return () => (tree: Root) => { * 图片路径修复 — HTML 后处理。
if (!filePath) return *
* v0.6.0: 内置解析器的 safeUrl 会过滤 file: 协议，且 sanitize 钩子不参与预览渲染，
const dir: string = filePath.replace(/[/\\][^/\\]+$/, '') * 因此相对路径图片的修复必须在 parseMarkdown 之后、输出到 DOM 之前完成。
* 内置解析器输出的 img 标签格式固定（src 属性在最前、属性值经 escapeAttr 转义），
function visit(node: Element | Root): void { * 用正则精确匹配 src 属性即可安全替换。
if (!node.children) return *
for (const child of node.children) { * CQ-09: 保持与原 rehypeFixImages 一致的安全策略 —
if (child.type === 'element' && child.tagName === 'img') { * 解析完整路径并检查是否越界到 markdown 文件所在目录之外。
const src = child.properties?.src as string | undefined */
if (src && !src.startsWith('http://') && !src.startsWith('https://') && !src.startsWith('data:') && !src.startsWith('file://')) { function fixImageSrcs(html: string, filePath: string | null): string {
// 处理Unix风格绝对路径（以/开头） if (!filePath) return html
if (src.startsWith('/')) {
child.properties = { const dir: string = filePath.replace(/[/\\][^/\\]+$/, '')
...child.properties,
src: 'file://' + src return html.replace(/<img\b[^>]*\bsrc="([^"]*)"/g, (full, src) => {
} const raw = String(src).replace(/&amp;/g, '&') // 先还原转义，避免二次转义
continue if (!raw) return full
} if (
// 解析完整路径并检查是否越界到 markdown 文件所在目录之外 raw.startsWith('http://') ||
const resolvedPath = resolveRelativePath(dir, src) raw.startsWith('https://') ||
// E1: 统一规范化后比较，防止 ../ 路径越界 raw.startsWith('data:') ||
const normalizedBase = normPath(dir) raw.startsWith('file:')
if (!normPath(resolvedPath).startsWith(normalizedBase)) return ) {
child.properties = { return full
...child.properties, }
src: 'file://' + (normPath(dir) + '/' + src).replace(/\/+/g, '/') // 处理 Unix 风格绝对路径（以 / 开头）
} if (raw.startsWith('/')) {
} return full.replace(`src="${src}"`, `src="${escapeAttr('file://' + raw)}"`)
} }
if (child.type === 'element') { // 解析完整路径并检查是否越界
visit(child as Element) // 注意: resolveRelativePath 的 base 语义是"文件路径"（内部 pop 掉文件名），
} // 因此传入完整 filePath 而非 dir，否则会多弹掉一级目录
} const resolvedPath = resolveRelativePath(filePath, raw)
} const normalizedBase = normPath(dir)
// 用 base + '/' 前缀判断，避免 /home/docs-other/ 误判为在 /home/docs/ 内
visit(tree) const boundary = normalizedBase === '' ? '/' : normalizedBase + '/'
} if (!normPath(resolvedPath).startsWith(boundary)) return full
} const fixed = 'file://' + resolvedPath
return full.replace(`src="${src}"`, `src="${escapeAttr(fixed)}"`)
// 自定义 rehype 插件：将 mermaid 代码块转为 .me-mermaid 容器 })
// 在 rehypeHighlight 之后运行，此时 code 元素已有 language-mermaid 类名。 }
// 输出结构需与 MetonaEditor 内置解析器一致，以便 mermaid.run() 统一查询。
function rehypeMermaid(): Plugin<[], Root> { /**
return () => (tree: Root) => { * 渲染 Markdown — 使用 MetonaEditor 内置解析器。
visit(tree, 'element', (node: Element, index, parent) => { *
if (node.tagName !== 'pre') return * @param content Markdown 源码
if (parent === null || parent === undefined || index === undefined) return * @param filePath 文件路径（用于修复相对路径图片；null 时不做图片修复）
*/
const code = node.children.find( export function renderMarkdownSync(content: string, filePath?: string | null): string {
(child): child is Element => child.type === 'element' && child.tagName === 'code' try {
) const html = parseMarkdown(content)
if (!code) return return fixImageSrcs(html, filePath ?? null)
} catch (e) {
const className: string[] = (code.properties?.className as string[] | undefined) ?? [] const errorMsg: string = e instanceof Error ? e.message : String(e)
if (!className.some(c => c === 'language-mermaid' || c === 'mermaid')) return return `<p style="color:red">渲染错误: ${errorMsg}</p>`
}
// 提取代码文本内容 }
const text = (code.children ?? [])
.filter(c => c.type === 'text') /**
.map(c => (c as { type: 'text'; value: string }).value) * 异步版本 — 内置解析器为同步实现，此函数仅保持兼容签名。
.join('') */
export async function renderMarkdown(content: string, filePath?: string | null): Promise<string> {
// 替换为 mermaid 渲染容器（与 MetonaEditor 内置输出一致） return renderMarkdownSync(content, filePath)
const mermaidContainer: Element = { }
type: 'element',
tagName: 'div',
properties: { className: ['me-mermaid'] },
children: [{
type: 'element',
tagName: 'div',
properties: { className: ['mermaid'] },
children: [{ type: 'text', value: text }]
}]
}
parent.children[index] = mermaidContainer
})
}
}
// PF-01: Markdown处理器LRU缓存
const MAX_CACHE_SIZE = 20
const processorCache = new Map<string, ReturnType<typeof buildProcessor>>()
function buildProcessor(filePath: string | null) {
return unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeRaw)
// CQ-09: rehypeFixImages 必须在 rehypeSanitize 之前运行，
// 以保证 file:// URL 接受 sanitize 协议检查而非绕过。
.use(rehypeFixImages(filePath ?? null))
.use(rehypeSanitize, {
...defaultSchema,
attributes: {
...defaultSchema.attributes,
// 允许 img 的 src 属性（fixImages 注入 file:// 后 sanitize 需要放行）
img: [...(defaultSchema.attributes?.img ?? []), ['src']],
},
protocols: {
...(defaultSchema.protocols ?? {}),
src: [
...((defaultSchema.protocols as Record<string, string[]> | undefined)?.src ?? []),
'file:',
],
},
// H-05: 显式 strip 事件处理器属性，纵深防御
strip: ['script', 'on*', 'javascript:'],
})
.use(rehypeHighlight)
.use(rehypeMermaid())
.use(rehypeStringify)
}
function getCachedProcessor(filePath: string | null): ReturnType<typeof buildProcessor> {
const key: string = filePath ?? '__null__'
if (processorCache.has(key)) {
const cached = processorCache.get(key)!
processorCache.delete(key)
processorCache.set(key, cached)
return cached
}
const processor = buildProcessor(filePath)
if (processorCache.size >= MAX_CACHE_SIZE) {
const oldestKey = processorCache.keys().next().value
if (oldestKey !== undefined) {
processorCache.delete(oldestKey)
}
}
processorCache.set(key, processor)
return processor
}
export async function renderMarkdown(content: string, filePath?: string | null): Promise<string> {
try {
const processor = getCachedProcessor(filePath ?? null)
const result = await processor.process(content)
return String(result)
} catch (e) {
const errorMsg: string = e instanceof Error ? e.message : String(e)
return `<p style="color:red">渲染错误: ${errorMsg}</p>`
}
}
/**
* 同步版本 — 供 MetonaEditor 的 render 钩子使用。
* 所有 unified 插件均为同步转换器，可以在 render 钩子中同步调用。
*/
export function renderMarkdownSync(content: string, filePath?: string | null): string {
try {
const processor = getCachedProcessor(filePath ?? null)
const result = processor.processSync(content)
return String(result)
} catch (e) {
const errorMsg: string = e instanceof Error ? e.message : String(e)
return `<p style="color:red">渲染错误: ${errorMsg}</p>`
}
}
src/renderer/lib/toast.ts
+56 -50
View File
@@ -1,50 +1,56 @@
import MeToast from '@metona-team/metona-toast' import MeToast from '@metona-team/metona-toast'
import { logError } from './errorHandler'
/**
* MeToast 全局配置 /**
* * MeToast 全局配置
* 替代原自研 Toast 组件（components/Toast），由 MeToast 接管全部通知渲染。 *
* MeToast 自管理 DOM 与样式，无需在 React 树中挂载容器组件。 * 替代原自研 Toast 组件（components/Toast），由 MeToast 接管全部通知渲染。
* * MeToast 自管理 DOM 与样式，无需在 React 树中挂载容器组件。
* v0.5.0: 升级 MeToast 0.5.0，安装 keyboard / accessibility 插件。 *
*/ * v0.5.0: 升级 MeToast 0.5.0，安装 keyboard / accessibility 插件。
MeToast.configure({ * v0.6.0: 接入 dedupe 去重插件与 onError 全局错误回调。
position: 'top-right', */
duration: 3000, MeToast.configure({
max: 5, position: 'top-right',
theme: 'auto', duration: 3000,
animation: 'slide', max: 5,
pauseOnHover: true, theme: 'auto',
closeOnClick: true, animation: 'slide',
showProgress: true, pauseOnHover: true,
draggable: true, closeOnClick: true,
locale: 'zh-CN', showProgress: true,
width: 360, draggable: true,
}) locale: 'zh-CN',
width: 360,
// 安装内置插件 // v0.6.0: 钩子/定时器异常统一走应用错误日志
// eslint-disable-next-line react-hooks/rules-of-hooks -- MeToast.use() 是插件安装方法，非 React Hook onError: ({ hook, error }) => logError(`Toast ${hook} 异常`, error),
MeToast.use('keyboard') // ESC 关闭所有 Toast })
// eslint-disable-next-line react-hooks/rules-of-hooks
MeToast.use('accessibility') // 屏幕阅读器实时朗读 Toast 内容 // 安装内置插件
// eslint-disable-next-line react-hooks/rules-of-hooks -- MeToast.use() 是插件安装方法，非 React Hook
/** 与原 showToast 保持兼容的类型子集 */ MeToast.use('keyboard') // ESC 关闭所有 Toast
export type ToastType = 'success' | 'error' | 'warning' | 'info' // eslint-disable-next-line react-hooks/rules-of-hooks
MeToast.use('accessibility') // 屏幕阅读器实时朗读 Toast 内容
/** // eslint-disable-next-line react-hooks/rules-of-hooks
* 显示 Toast 通知 — 与原 useToast().showToast 签名兼容。 MeToast.use('dedupe') // 相同 type+message 自动去重（避免重复弹窗）
*
* @param msg 消息内容 /** 与原 showToast 保持兼容的类型子集 */
* @param type 通知类型（默认 info） export type ToastType = 'success' | 'error' | 'warning' | 'info'
* @param duration 显示时长(ms)，省略则用全局默认值
*/ /**
export function showToast(msg: string, type: ToastType = 'info', duration?: number): void { * 显示 Toast 通知 — 与原 useToast().showToast 签名兼容。
MeToast[type](msg, duration !== undefined ? { duration } : undefined) *
} * @param msg 消息内容
* @param type 通知类型（默认 info）
/** 同步 MeToast 主题到当前暗色模式 */ * @param duration 显示时长(ms)，省略则用全局默认值
export function syncToastTheme(darkMode: boolean): void { */
MeToast.themes.switchTheme(darkMode ? 'dark' : 'light') export function showToast(msg: string, type: ToastType = 'info', duration?: number): void {
} MeToast[type](msg, duration !== undefined ? { duration } : undefined)
}
export { MeToast }
/** 同步 MeToast 主题到当前暗色模式 */
export function syncToastTheme(darkMode: boolean): void {
MeToast.themes.switchTheme(darkMode ? 'dark' : 'light')
}
export { MeToast }
src/renderer/main.tsx
+1 -1
View File
@@ -8,5 +8,5 @@ import './styles/markdown-body.css'
ReactDOM.createRoot(document.getElementById('root')!).render( ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode> </React.StrictMode>,
) )
src/renderer/stores/__tests__/editorStore.test.ts
+139 -103
View File
@@ -1,103 +1,139 @@
import { describe, it, expect, beforeEach } from 'vitest' import { describe, it, expect, beforeEach } from 'vitest'
import { useEditorStore } from '../editorStore' import { useEditorStore } from '../editorStore'
describe('editorStore', () => { describe('editorStore', () => {
beforeEach(() => { beforeEach(() => {
useEditorStore.setState({ useEditorStore.setState({
viewMode: 'editor', viewMode: 'editor',
themeMode: 'light', themeMode: 'light',
externallyModified: null, externallyModified: null,
loadingStates: {}, loadingStates: {},
}) })
}) })
describe('setViewMode', () => { describe('setViewMode', () => {
it('should set view mode to preview', () => { it('should set view mode to preview', () => {
useEditorStore.getState().setViewMode('preview') useEditorStore.getState().setViewMode('preview')
expect(useEditorStore.getState().viewMode).toBe('preview') expect(useEditorStore.getState().viewMode).toBe('preview')
}) })
it('should set view mode to editor', () => { it('should set view mode to editor', () => {
useEditorStore.setState({ viewMode: 'preview' }) useEditorStore.setState({ viewMode: 'preview' })
useEditorStore.getState().setViewMode('editor') useEditorStore.getState().setViewMode('editor')
expect(useEditorStore.getState().viewMode).toBe('editor') expect(useEditorStore.getState().viewMode).toBe('editor')
}) })
}) })
describe('themeMode', () => { describe('themeMode', () => {
it('should default to light', () => { it('should default to light', () => {
expect(useEditorStore.getState().themeMode).toBe('light') expect(useEditorStore.getState().themeMode).toBe('light')
}) })
it('should set theme mode', () => { it('should set theme mode', () => {
useEditorStore.getState().setThemeMode('dark') useEditorStore.getState().setThemeMode('dark')
expect(useEditorStore.getState().themeMode).toBe('dark') expect(useEditorStore.getState().themeMode).toBe('dark')
}) })
it('should set warm theme', () => { it('should set warm theme', () => {
useEditorStore.getState().setThemeMode('warm') useEditorStore.getState().setThemeMode('warm')
expect(useEditorStore.getState().themeMode).toBe('warm') expect(useEditorStore.getState().themeMode).toBe('warm')
}) })
}) })
describe('cycleTheme', () => { describe('cycleTheme', () => {
it('should cycle light → dark', () => { it('should cycle light → dark', () => {
expect(useEditorStore.getState().cycleTheme()).toBe('dark') expect(useEditorStore.getState().cycleTheme()).toBe('dark')
expect(useEditorStore.getState().themeMode).toBe('dark') expect(useEditorStore.getState().themeMode).toBe('dark')
}) })
it('should cycle dark → warm', () => { it('should cycle dark → warm', () => {
useEditorStore.setState({ themeMode: 'dark' }) useEditorStore.setState({ themeMode: 'dark' })
expect(useEditorStore.getState().cycleTheme()).toBe('warm') expect(useEditorStore.getState().cycleTheme()).toBe('warm')
}) })
it('should cycle warm → light', () => { it('should cycle warm → light', () => {
useEditorStore.setState({ themeMode: 'warm' }) useEditorStore.setState({ themeMode: 'warm' })
expect(useEditorStore.getState().cycleTheme()).toBe('light') expect(useEditorStore.getState().cycleTheme()).toBe('light')
}) })
}) })
describe('setExternallyModified', () => { describe('setExternallyModified', () => {
it('should set externally modified info', () => { it('should set externally modified info', () => {
useEditorStore.getState().setExternallyModified({ filePath: '/test.md' }) useEditorStore.getState().setExternallyModified({ filePath: '/test.md' })
expect(useEditorStore.getState().externallyModified).toEqual({ filePath: '/test.md' }) expect(useEditorStore.getState().externallyModified).toEqual({ filePath: '/test.md' })
}) })
it('should clear externally modified info', () => { it('should clear externally modified info', () => {
useEditorStore.setState({ externallyModified: { filePath: '/test.md' } }) useEditorStore.setState({ externallyModified: { filePath: '/test.md' } })
useEditorStore.getState().setExternallyModified(null) useEditorStore.getState().setExternallyModified(null)
expect(useEditorStore.getState().externallyModified).toBeNull() expect(useEditorStore.getState().externallyModified).toBeNull()
}) })
}) })
describe('loading states', () => { describe('loading states', () => {
it('should set loading state', () => { it('should set loading state', () => {
useEditorStore.getState().setLoading('file-open', true) useEditorStore.getState().setLoading('file-open', true)
expect(useEditorStore.getState().isLoading('file-open')).toBe(true) expect(useEditorStore.getState().isLoading('file-open')).toBe(true)
}) })
it('should return false for unset loading key', () => { it('should return false for unset loading key', () => {
expect(useEditorStore.getState().isLoading('non-existent')).toBe(false) expect(useEditorStore.getState().isLoading('non-existent')).toBe(false)
}) })
it('should update loading state to false', () => { it('should update loading state to false', () => {
useEditorStore.getState().setLoading('file-open', true) useEditorStore.getState().setLoading('file-open', true)
useEditorStore.getState().setLoading('file-open', false) useEditorStore.getState().setLoading('file-open', false)
expect(useEditorStore.getState().isLoading('file-open')).toBe(false) expect(useEditorStore.getState().isLoading('file-open')).toBe(false)
}) })
it('should handle multiple independent loading states', () => { it('should handle multiple independent loading states', () => {
const { setLoading } = useEditorStore.getState() const { setLoading } = useEditorStore.getState()
setLoading('file-open', true) setLoading('file-open', true)
setLoading('markdown-render', true) setLoading('markdown-render', true)
const state = useEditorStore.getState() const state = useEditorStore.getState()
expect(state.isLoading('file-open')).toBe(true) expect(state.isLoading('file-open')).toBe(true)
expect(state.isLoading('markdown-render')).toBe(true) expect(state.isLoading('markdown-render')).toBe(true)
setLoading('file-open', false) setLoading('file-open', false)
expect(useEditorStore.getState().isLoading('file-open')).toBe(false) expect(useEditorStore.getState().isLoading('file-open')).toBe(false)
expect(useEditorStore.getState().isLoading('markdown-render')).toBe(true) expect(useEditorStore.getState().isLoading('markdown-render')).toBe(true)
}) })
}) })
})
describe('editor live state (v0.6.0)', () => {
beforeEach(() => {
useEditorStore.setState({ stats: null, cursor: null, zenMode: false })
})
it('should set stats', () => {
useEditorStore.getState().setStats({
characters: 10,
words: 2,
chineseChars: 5,
englishWords: 1,
lines: 3,
readingTime: 1,
})
expect(useEditorStore.getState().stats?.words).toBe(2)
expect(useEditorStore.getState().stats?.lines).toBe(3)
})
it('should clear stats', () => {
useEditorStore.getState().setStats(null)
expect(useEditorStore.getState().stats).toBeNull()
})
it('should set cursor position', () => {
useEditorStore.getState().setCursor({ line: 5, column: 12 })
expect(useEditorStore.getState().cursor).toEqual({ line: 5, column: 12 })
})
it('should set zen mode', () => {
useEditorStore.getState().setZenMode(true)
expect(useEditorStore.getState().zenMode).toBe(true)
useEditorStore.getState().setZenMode(false)
expect(useEditorStore.getState().zenMode).toBe(false)
})
})
})
src/renderer/stores/__tests__/tabStore.test.ts
+317 -317
View File
@@ -1,317 +1,317 @@
import { describe, it, expect, vi, beforeEach } from 'vitest' import { describe, it, expect, vi, beforeEach } from 'vitest'
// Mock external dependencies before importing store // Mock external dependencies before importing store
vi.mock('../../db/tabRepository', () => ({ vi.mock('../../db/tabRepository', () => ({
tabRepository: { tabRepository: {
loadAll: vi.fn().mockResolvedValue([]), loadAll: vi.fn().mockResolvedValue([]),
loadActiveTabId: vi.fn().mockResolvedValue(null), loadActiveTabId: vi.fn().mockResolvedValue(null),
saveAll: vi.fn().mockResolvedValue(undefined), saveAll: vi.fn().mockResolvedValue(undefined),
saveActiveTabId: vi.fn().mockResolvedValue(undefined), saveActiveTabId: vi.fn().mockResolvedValue(undefined),
clearAll: vi.fn().mockResolvedValue(undefined), clearAll: vi.fn().mockResolvedValue(undefined),
}, },
})) }))
vi.mock('nanoid', () => { vi.mock('nanoid', () => {
let counter = 0 let counter = 0
return { return {
nanoid: vi.fn(() => `test-id-${++counter}`), nanoid: vi.fn(() => `test-id-${++counter}`),
} }
}) })
import { useTabStore } from '../tabStore' import { useTabStore } from '../tabStore'
describe('tabStore', () => { describe('tabStore', () => {
beforeEach(() => { beforeEach(() => {
// Reset store state between tests // Reset store state between tests
useTabStore.setState({ useTabStore.setState({
tabs: [], tabs: [],
activeTabId: null, activeTabId: null,
mruStack: [], mruStack: [],
_loaded: false, _loaded: false,
}) })
}) })
describe('createTab', () => { describe('createTab', () => {
it('should create a new tab with default values', () => { it('should create a new tab with default values', () => {
const tab = useTabStore.getState().createTab() const tab = useTabStore.getState().createTab()
const state = useTabStore.getState() const state = useTabStore.getState()
expect(tab.id).toBeTruthy() expect(tab.id).toBeTruthy()
expect(tab.filePath).toBeNull() expect(tab.filePath).toBeNull()
expect(tab.content).toBe('') expect(tab.content).toBe('')
expect(tab.isModified).toBe(false) expect(tab.isModified).toBe(false)
expect(state.tabs).toHaveLength(1) expect(state.tabs).toHaveLength(1)
expect(state.activeTabId).toBe(tab.id) expect(state.activeTabId).toBe(tab.id)
}) })
it('should create a tab with file path and content', () => { it('should create a tab with file path and content', () => {
const tab = useTabStore.getState().createTab('/test.md', '# Hello') const tab = useTabStore.getState().createTab('/test.md', '# Hello')
expect(tab.filePath).toBe('/test.md') expect(tab.filePath).toBe('/test.md')
expect(tab.content).toBe('# Hello') expect(tab.content).toBe('# Hello')
}) })
it('should switch to existing tab if same filePath is opened', () => { it('should switch to existing tab if same filePath is opened', () => {
useTabStore.getState().createTab('/test.md', '# First') useTabStore.getState().createTab('/test.md', '# First')
// Create another tab to make it active // Create another tab to make it active
useTabStore.getState().createTab('/other.md', '# Other') useTabStore.getState().createTab('/other.md', '# Other')
// Now try to open the first file again // Now try to open the first file again
const existing = useTabStore.getState().createTab('/test.md', '# Updated') const existing = useTabStore.getState().createTab('/test.md', '# Updated')
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.tabs).toHaveLength(2) expect(state.tabs).toHaveLength(2)
expect(state.activeTabId).toBe(existing.id) expect(state.activeTabId).toBe(existing.id)
}) })
}) })
describe('closeTab', () => { describe('closeTab', () => {
it('should close a tab and update activeTabId', () => { it('should close a tab and update activeTabId', () => {
const { createTab, closeTab } = useTabStore.getState() const { createTab, closeTab } = useTabStore.getState()
const tab1 = createTab('/file1.md') const tab1 = createTab('/file1.md')
const tab2 = createTab('/file2.md') const tab2 = createTab('/file2.md')
closeTab(tab1.id) closeTab(tab1.id)
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.tabs).toHaveLength(1) expect(state.tabs).toHaveLength(1)
expect(state.tabs[0].id).toBe(tab2.id) expect(state.tabs[0].id).toBe(tab2.id)
expect(state.activeTabId).toBe(tab2.id) expect(state.activeTabId).toBe(tab2.id)
}) })
it('should set activeTabId to null when closing last tab', () => { it('should set activeTabId to null when closing last tab', () => {
const { createTab, closeTab } = useTabStore.getState() const { createTab, closeTab } = useTabStore.getState()
const tab = createTab('/file1.md') const tab = createTab('/file1.md')
closeTab(tab.id) closeTab(tab.id)
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.tabs).toHaveLength(0) expect(state.tabs).toHaveLength(0)
expect(state.activeTabId).toBeNull() expect(state.activeTabId).toBeNull()
}) })
it('should handle closing non-existent tab gracefully', () => { it('should handle closing non-existent tab gracefully', () => {
const { createTab, closeTab } = useTabStore.getState() const { createTab, closeTab } = useTabStore.getState()
createTab('/file1.md') createTab('/file1.md')
closeTab('non-existent') closeTab('non-existent')
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.tabs).toHaveLength(1) expect(state.tabs).toHaveLength(1)
}) })
}) })
describe('closeOtherTabs', () => { describe('closeOtherTabs', () => {
it('should close all tabs except the specified one', () => { it('should close all tabs except the specified one', () => {
const { createTab, closeOtherTabs } = useTabStore.getState() const { createTab, closeOtherTabs } = useTabStore.getState()
const tab1 = createTab('/file1.md') const tab1 = createTab('/file1.md')
createTab('/file2.md') createTab('/file2.md')
createTab('/file3.md') createTab('/file3.md')
closeOtherTabs(tab1.id) closeOtherTabs(tab1.id)
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.tabs).toHaveLength(1) expect(state.tabs).toHaveLength(1)
expect(state.tabs[0].id).toBe(tab1.id) expect(state.tabs[0].id).toBe(tab1.id)
expect(state.activeTabId).toBe(tab1.id) expect(state.activeTabId).toBe(tab1.id)
}) })
}) })
describe('closeAllTabs', () => { describe('closeAllTabs', () => {
it('should close all tabs', () => { it('should close all tabs', () => {
const { createTab, closeAllTabs } = useTabStore.getState() const { createTab, closeAllTabs } = useTabStore.getState()
createTab('/file1.md') createTab('/file1.md')
createTab('/file2.md') createTab('/file2.md')
closeAllTabs() closeAllTabs()
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.tabs).toHaveLength(0) expect(state.tabs).toHaveLength(0)
expect(state.activeTabId).toBeNull() expect(state.activeTabId).toBeNull()
expect(state.mruStack).toHaveLength(0) expect(state.mruStack).toHaveLength(0)
}) })
}) })
describe('closeTabsToRight', () => { describe('closeTabsToRight', () => {
it('should close tabs to the right of the specified tab', () => { it('should close tabs to the right of the specified tab', () => {
const { createTab, closeTabsToRight } = useTabStore.getState() const { createTab, closeTabsToRight } = useTabStore.getState()
const tab1 = createTab('/file1.md') const tab1 = createTab('/file1.md')
createTab('/file2.md') createTab('/file2.md')
createTab('/file3.md') createTab('/file3.md')
closeTabsToRight(tab1.id) closeTabsToRight(tab1.id)
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.tabs).toHaveLength(1) expect(state.tabs).toHaveLength(1)
expect(state.tabs[0].id).toBe(tab1.id) expect(state.tabs[0].id).toBe(tab1.id)
}) })
it('should keep active tab if it is in the remaining set', () => { it('should keep active tab if it is in the remaining set', () => {
const { createTab, switchToTab, closeTabsToRight } = useTabStore.getState() const { createTab, switchToTab, closeTabsToRight } = useTabStore.getState()
const tab1 = createTab('/file1.md') const tab1 = createTab('/file1.md')
createTab('/file2.md') createTab('/file2.md')
createTab('/file3.md') createTab('/file3.md')
switchToTab(tab1.id) switchToTab(tab1.id)
closeTabsToRight(tab1.id) closeTabsToRight(tab1.id)
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.activeTabId).toBe(tab1.id) expect(state.activeTabId).toBe(tab1.id)
}) })
}) })
describe('switchToTab', () => { describe('switchToTab', () => {
it('should switch active tab and update MRU stack', () => { it('should switch active tab and update MRU stack', () => {
const { createTab, switchToTab } = useTabStore.getState() const { createTab, switchToTab } = useTabStore.getState()
const tab1 = createTab('/file1.md') const tab1 = createTab('/file1.md')
const tab2 = createTab('/file2.md') const tab2 = createTab('/file2.md')
switchToTab(tab1.id) switchToTab(tab1.id)
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.activeTabId).toBe(tab1.id) expect(state.activeTabId).toBe(tab1.id)
expect(state.mruStack).toContain(tab2.id) expect(state.mruStack).toContain(tab2.id)
}) })
it('should not update if switching to already active tab', () => { it('should not update if switching to already active tab', () => {
const { createTab, switchToTab } = useTabStore.getState() const { createTab, switchToTab } = useTabStore.getState()
createTab('/file1.md') createTab('/file1.md')
const stateBefore = useTabStore.getState() const stateBefore = useTabStore.getState()
switchToTab(stateBefore.activeTabId!) switchToTab(stateBefore.activeTabId!)
const stateAfter = useTabStore.getState() const stateAfter = useTabStore.getState()
expect(stateAfter.mruStack).toEqual(stateBefore.mruStack) expect(stateAfter.mruStack).toEqual(stateBefore.mruStack)
}) })
}) })
describe('updateTabContent', () => { describe('updateTabContent', () => {
it('should update content and mark as modified', () => { it('should update content and mark as modified', () => {
const { createTab, updateTabContent } = useTabStore.getState() const { createTab, updateTabContent } = useTabStore.getState()
const tab = createTab('/file.md', '# Old') const tab = createTab('/file.md', '# Old')
updateTabContent(tab.id, '# New Content') updateTabContent(tab.id, '# New Content')
const state = useTabStore.getState() const state = useTabStore.getState()
const updated = state.tabs.find(t => t.id === tab.id)! const updated = state.tabs.find(t => t.id === tab.id)!
expect(updated.content).toBe('# New Content') expect(updated.content).toBe('# New Content')
expect(updated.isModified).toBe(true) expect(updated.isModified).toBe(true)
}) })
}) })
describe('getActiveTab', () => { describe('getActiveTab', () => {
it('should return the active tab', () => { it('should return the active tab', () => {
const { createTab, getActiveTab } = useTabStore.getState() const { createTab, getActiveTab } = useTabStore.getState()
const tab = createTab('/file.md') const tab = createTab('/file.md')
const active = getActiveTab() const active = getActiveTab()
expect(active?.id).toBe(tab.id) expect(active?.id).toBe(tab.id)
}) })
it('should return null when no tabs exist', () => { it('should return null when no tabs exist', () => {
const { getActiveTab } = useTabStore.getState() const { getActiveTab } = useTabStore.getState()
expect(getActiveTab()).toBeNull() expect(getActiveTab()).toBeNull()
}) })
}) })
describe('setModified', () => { describe('setModified', () => {
it('should set modified flag on a tab', () => { it('should set modified flag on a tab', () => {
const { createTab, setModified } = useTabStore.getState() const { createTab, setModified } = useTabStore.getState()
const tab = createTab('/file.md') const tab = createTab('/file.md')
setModified(tab.id, true) setModified(tab.id, true)
const state = useTabStore.getState() const state = useTabStore.getState()
const updated = state.tabs.find(t => t.id === tab.id)! const updated = state.tabs.find(t => t.id === tab.id)!
expect(updated.isModified).toBe(true) expect(updated.isModified).toBe(true)
setModified(tab.id, false) setModified(tab.id, false)
const state2 = useTabStore.getState() const state2 = useTabStore.getState()
const updated2 = state2.tabs.find(t => t.id === tab.id)! const updated2 = state2.tabs.find(t => t.id === tab.id)!
expect(updated2.isModified).toBe(false) expect(updated2.isModified).toBe(false)
}) })
}) })
describe('updateTabScroll', () => { describe('updateTabScroll', () => {
it('should update scroll position', () => { it('should update scroll position', () => {
const { createTab, updateTabScroll } = useTabStore.getState() const { createTab, updateTabScroll } = useTabStore.getState()
const tab = createTab('/file.md') const tab = createTab('/file.md')
updateTabScroll(tab.id, { scrollTop: 100, selectionStart: 10, selectionEnd: 20 }) updateTabScroll(tab.id, { scrollTop: 100, selectionStart: 10, selectionEnd: 20 })
const state = useTabStore.getState() const state = useTabStore.getState()
const updated = state.tabs.find(t => t.id === tab.id)! const updated = state.tabs.find(t => t.id === tab.id)!
expect(updated.scrollTop).toBe(100) expect(updated.scrollTop).toBe(100)
expect(updated.selectionStart).toBe(10) expect(updated.selectionStart).toBe(10)
expect(updated.selectionEnd).toBe(20) expect(updated.selectionEnd).toBe(20)
}) })
}) })
describe('updateTabContent same-content guard (A3)', () => { describe('updateTabContent same-content guard (A3)', () => {
it('should not mark as modified when content is unchanged', () => { it('should not mark as modified when content is unchanged', () => {
const { createTab, updateTabContent } = useTabStore.getState() const { createTab, updateTabContent } = useTabStore.getState()
const tab = createTab('/file.md', '# Same Content') const tab = createTab('/file.md', '# Same Content')
updateTabContent(tab.id, '# Same Content') updateTabContent(tab.id, '# Same Content')
const state = useTabStore.getState() const state = useTabStore.getState()
const updated = state.tabs.find(t => t.id === tab.id)! const updated = state.tabs.find(t => t.id === tab.id)!
expect(updated.content).toBe('# Same Content') expect(updated.content).toBe('# Same Content')
expect(updated.isModified).toBe(false) expect(updated.isModified).toBe(false)
}) })
it('should mark as modified when content changes', () => { it('should mark as modified when content changes', () => {
const { createTab, updateTabContent } = useTabStore.getState() const { createTab, updateTabContent } = useTabStore.getState()
const tab = createTab('/file.md', '# Old') const tab = createTab('/file.md', '# Old')
updateTabContent(tab.id, '# New') updateTabContent(tab.id, '# New')
const state = useTabStore.getState() const state = useTabStore.getState()
const updated = state.tabs.find(t => t.id === tab.id)! const updated = state.tabs.find(t => t.id === tab.id)!
expect(updated.content).toBe('# New') expect(updated.content).toBe('# New')
expect(updated.isModified).toBe(true) expect(updated.isModified).toBe(true)
}) })
}) })
describe('moveTab (D1)', () => { describe('moveTab (D1)', () => {
it('should move tab to a new position', () => { it('should move tab to a new position', () => {
const { createTab, moveTab } = useTabStore.getState() const { createTab, moveTab } = useTabStore.getState()
const tab1 = createTab('/file1.md') const tab1 = createTab('/file1.md')
const tab2 = createTab('/file2.md') const tab2 = createTab('/file2.md')
const tab3 = createTab('/file3.md') const tab3 = createTab('/file3.md')
// tab1 移到末尾：期望 [tab2, tab3, tab1] // tab1 移到末尾：期望 [tab2, tab3, tab1]
moveTab(tab1.id, 2) moveTab(tab1.id, 2)
const state = useTabStore.getState() const state = useTabStore.getState()
// 用引用相等而非基于全局计数器 ID // 用引用相等而非基于全局计数器 ID
expect(state.tabs[0]).toBe(tab2) expect(state.tabs[0]).toBe(tab2)
expect(state.tabs[1]).toBe(tab3) expect(state.tabs[1]).toBe(tab3)
expect(state.tabs[2]).toBe(tab1) expect(state.tabs[2]).toBe(tab1)
}) })
it('should handle moving to same position (no-op)', () => { it('should handle moving to same position (no-op)', () => {
const { createTab, moveTab } = useTabStore.getState() const { createTab, moveTab } = useTabStore.getState()
const tab1 = createTab('/file1.md') const tab1 = createTab('/file1.md')
createTab('/file2.md') createTab('/file2.md')
moveTab(tab1.id, 0) moveTab(tab1.id, 0)
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.tabs[0].id).toBe(tab1.id) expect(state.tabs[0].id).toBe(tab1.id)
expect(state.tabs.length).toBe(2) expect(state.tabs.length).toBe(2)
}) })
it('should handle moving non-existent tab gracefully', () => { it('should handle moving non-existent tab gracefully', () => {
const { createTab, moveTab } = useTabStore.getState() const { createTab, moveTab } = useTabStore.getState()
createTab('/file1.md') createTab('/file1.md')
moveTab('non-existent', 0) moveTab('non-existent', 0)
const state = useTabStore.getState() const state = useTabStore.getState()
expect(state.tabs.length).toBe(1) expect(state.tabs.length).toBe(1)
}) })
}) })
}) })
src/renderer/stores/autoSaveStore.ts
+24 -24
View File
@@ -1,24 +1,24 @@
import { create } from 'zustand' import { create } from 'zustand'
/** /**
* 轻量 auto-save 状态 store * 轻量 auto-save 状态 store
* *
* 解耦 useAutoSave hook 与状态栏组件——状态栏的 auto-save 项通过 * 解耦 useAutoSave hook 与状态栏组件——状态栏的 auto-save 项通过
* 本 store 读取状态，无需在 render 函数中重复调用 useAutoSave()。 * 本 store 读取状态，无需在 render 函数中重复调用 useAutoSave()。
* useAutoSave hook 负责写入本 store。 * useAutoSave hook 负责写入本 store。
*/ */
interface AutoSaveState { interface AutoSaveState {
isAutoSaving: boolean isAutoSaving: boolean
autoSaveEnabled: boolean autoSaveEnabled: boolean
} }
interface AutoSaveStore extends AutoSaveState { interface AutoSaveStore extends AutoSaveState {
setState: (partial: Partial<AutoSaveState>) => void setState: (partial: Partial<AutoSaveState>) => void
} }
export const useAutoSaveStore = create<AutoSaveStore>((set) => ({ export const useAutoSaveStore = create<AutoSaveStore>(set => ({
isAutoSaving: false, isAutoSaving: false,
autoSaveEnabled: true, autoSaveEnabled: true,
setState: (partial) => set(partial) setState: partial => set(partial),
})) }))
src/renderer/stores/editorStore.ts
+86 -56
View File
@@ -1,56 +1,86 @@
import { create } from 'zustand' import { create } from 'zustand'
import type { ViewMode, ThemeMode } from '../types/settings' import type { ViewMode, ThemeMode } from '../types/settings'
import type { MarkdownEditor } from '@metona-team/metona-editor' import type { MarkdownEditor } from '@metona-team/metona-editor'
// Module-level getter for the MetonaEditor instance // Module-level getter for the MetonaEditor instance
// Used by OutlinePanel for heading navigation // Used by OutlinePanel for heading navigation
let _getEditor: (() => MarkdownEditor | null) | null = null let _getEditor: (() => MarkdownEditor | null) | null = null
export function setMetonaEditorGetter(fn: () => MarkdownEditor | null) { export function setMetonaEditorGetter(fn: () => MarkdownEditor | null) {
_getEditor = fn _getEditor = fn
} }
export function getMetonaEditor(): MarkdownEditor | null { export function getMetonaEditor(): MarkdownEditor | null {
return _getEditor ? _getEditor() : null return _getEditor ? _getEditor() : null
} }
const THEME_CYCLE: ThemeMode[] = ['light', 'dark', 'warm'] const THEME_CYCLE: ThemeMode[] = ['light', 'dark', 'warm']
interface EditorState { /** v0.6.0: 编辑器实时状态（由 Editor 组件绑定事件写入，状态栏消费） */
viewMode: ViewMode export interface EditorLiveStats {
themeMode: ThemeMode characters: number
// AR-03: 外部修改检测状态，替代 DOM CustomEvent words: number
externallyModified: { filePath: string } | null chineseChars: number
// UX-02: 全局加载状态 englishWords: number
loadingStates: Record<string, boolean> lines: number
readingTime: number
setViewMode: (mode: ViewMode) => void }
setThemeMode: (mode: ThemeMode) => void
cycleTheme: () => ThemeMode export interface EditorCursor {
setExternallyModified: (info: { filePath: string } | null) => void line: number
// UX-02: 加载状态管理 column: number
setLoading: (key: string, loading: boolean) => void }
isLoading: (key: string) => boolean
} interface EditorState {
viewMode: ViewMode
export const useEditorStore = create<EditorState>((set, get) => ({ themeMode: ThemeMode
viewMode: 'editor', // AR-03: 外部修改检测状态，替代 DOM CustomEvent
themeMode: 'light', externallyModified: { filePath: string } | null
externallyModified: null, // UX-02: 全局加载状态
loadingStates: {}, loadingStates: Record<string, boolean>
// v0.6.0: 编辑器实时状态
setViewMode: (mode: ViewMode) => set({ viewMode: mode }), stats: EditorLiveStats | null
setThemeMode: (mode: ThemeMode) => set({ themeMode: mode }), cursor: EditorCursor | null
cycleTheme: () => { zenMode: boolean
const current = get().themeMode
const idx = THEME_CYCLE.indexOf(current) setViewMode: (mode: ViewMode) => void
const next = THEME_CYCLE[(idx + 1) % THEME_CYCLE.length] setThemeMode: (mode: ThemeMode) => void
set({ themeMode: next }) cycleTheme: () => ThemeMode
return next setExternallyModified: (info: { filePath: string } | null) => void
}, // UX-02: 加载状态管理
setExternallyModified: (info: { filePath: string } | null) => set({ externallyModified: info }), setLoading: (key: string, loading: boolean) => void
setLoading: (key: string, loading: boolean) => set(state => ({ isLoading: (key: string) => boolean
loadingStates: { ...state.loadingStates, [key]: loading } // v0.6.0: 编辑器状态同步
})), setStats: (stats: EditorLiveStats | null) => void
isLoading: (key: string) => get().loadingStates[key] ?? false setCursor: (cursor: EditorCursor | null) => void
})) setZenMode: (zen: boolean) => void
}
export const useEditorStore = create<EditorState>((set, get) => ({
viewMode: 'editor',
themeMode: 'light',
externallyModified: null,
loadingStates: {},
stats: null,
cursor: null,
zenMode: false,
setViewMode: (mode: ViewMode) => set({ viewMode: mode }),
setThemeMode: (mode: ThemeMode) => set({ themeMode: mode }),
cycleTheme: () => {
const current = get().themeMode
const idx = THEME_CYCLE.indexOf(current)
const next = THEME_CYCLE[(idx + 1) % THEME_CYCLE.length]
set({ themeMode: next })
return next
},
setExternallyModified: (info: { filePath: string } | null) => set({ externallyModified: info }),
setLoading: (key: string, loading: boolean) =>
set(state => ({
loadingStates: { ...state.loadingStates, [key]: loading },
})),
isLoading: (key: string) => get().loadingStates[key] ?? false,
setStats: (stats: EditorLiveStats | null) => set({ stats }),
setCursor: (cursor: EditorCursor | null) => set({ cursor }),
setZenMode: (zenMode: boolean) => set({ zenMode }),
}))
src/renderer/stores/sidebarStore.ts
+4 -6
View File
@@ -18,7 +18,7 @@ interface SidebarState {
setSidebarWidth: (width: number) => void setSidebarWidth: (width: number) => void
} }
export const useSidebarStore = create<SidebarState>((set) => ({ export const useSidebarStore = create<SidebarState>(set => ({
isVisible: true, isVisible: true,
rootPath: null, rootPath: null,
tree: [], tree: [],
@@ -36,17 +36,15 @@ export const useSidebarStore = create<SidebarState>((set) => ({
set(state => ({ set(state => ({
expandedDirs: state.expandedDirs.includes(path) expandedDirs: state.expandedDirs.includes(path)
? state.expandedDirs.filter(p => p !== path) ? state.expandedDirs.filter(p => p !== path)
: [...state.expandedDirs, path] : [...state.expandedDirs, path],
})), })),
expandDirs: (paths: string[]) => expandDirs: (paths: string[]) =>
set(state => { set(state => {
const newDirs = paths.filter(p => !state.expandedDirs.includes(p)) const newDirs = paths.filter(p => !state.expandedDirs.includes(p))
return newDirs.length > 0 return newDirs.length > 0 ? { expandedDirs: [...state.expandedDirs, ...newDirs] } : state
? { expandedDirs: [...state.expandedDirs, ...newDirs] }
: state
}), }),
setSidebarWidth: (width: number) => { setSidebarWidth: (width: number) => {
set({ sidebarWidth: width }) set({ sidebarWidth: width })
settingsRepository.save({ sidebarWidth: width }) settingsRepository.save({ sidebarWidth: width })
} },
})) }))
src/renderer/stores/tabStore.ts
+278 -271
View File
@@ -1,271 +1,278 @@
import { create } from 'zustand' import { create } from 'zustand'
import { nanoid } from 'nanoid' import { nanoid } from 'nanoid'
import type { Tab } from '../types/tab' import type { Tab } from '../types/tab'
import { tabRepository } from '../db/tabRepository' import { tabRepository } from '../db/tabRepository'
// PF-08: 防抖工具函数 // PF-08: 防抖工具函数
function debounce<F extends (...args: unknown[]) => void>(fn: F, delay: number): F & { cancel: () => void } { function debounce<F extends (...args: unknown[]) => void>(
let timer: ReturnType<typeof setTimeout> | null = null fn: F,
const debounced = ((...args: unknown[]) => { delay: number,
if (timer) clearTimeout(timer) ): F & { cancel: () => void } {
timer = setTimeout(() => { let timer: ReturnType<typeof setTimeout> | null = null
fn(...args) const debounced = ((...args: unknown[]) => {
timer = null if (timer) clearTimeout(timer)
}, delay) timer = setTimeout(() => {
}) as F & { cancel: () => void } fn(...args)
debounced.cancel = () => { timer = null
if (timer) { }, delay)
clearTimeout(timer) }) as F & { cancel: () => void }
timer = null debounced.cancel = () => {
} if (timer) {
} clearTimeout(timer)
return debounced timer = null
} }
}
interface TabState { return debounced
tabs: Tab[] }
activeTabId: string | null
mruStack: string[] interface TabState {
_loaded: boolean tabs: Tab[]
activeTabId: string | null
createTab: (filePath?: string | null, content?: string) => Tab mruStack: string[]
closeTab: (tabId: string) => void _loaded: boolean
closeOtherTabs: (tabId: string) => void
closeAllTabs: () => void createTab: (filePath?: string | null, content?: string) => Tab
closeTabsToRight: (tabId: string) => void closeTab: (tabId: string) => void
moveTab: (fromId: string, toIndex: number) => void closeOtherTabs: (tabId: string) => void
switchToTab: (tabId: string) => void closeAllTabs: () => void
updateTabContent: (tabId: string, content: string) => void closeTabsToRight: (tabId: string) => void
setModified: (tabId: string, modified: boolean) => void moveTab: (fromId: string, toIndex: number) => void
getActiveTab: () => Tab | null switchToTab: (tabId: string) => void
updateTabScroll: (tabId: string, scroll: Partial<Pick<Tab, 'scrollTop' | 'selectionStart' | 'selectionEnd'>>) => void updateTabContent: (tabId: string, content: string) => void
loadFromDB: () => Promise<void> setModified: (tabId: string, modified: boolean) => void
saveToDB: () => Promise<void> getActiveTab: () => Tab | null
} updateTabScroll: (
tabId: string,
// PF-08: 模块级防抖保存函数（500ms延迟） scroll: Partial<Pick<Tab, 'scrollTop' | 'selectionStart' | 'selectionEnd'>>,
let _debouncedSaveToDB: (() => void) & { cancel: () => void } | null = null ) => void
loadFromDB: () => Promise<void>
function getActualSaveToDB(get: () => TabState) { saveToDB: () => Promise<void>
return async () => { }
const { tabs } = get()
if (tabs.length === 0) { // PF-08: 模块级防抖保存函数（500ms延迟）
await tabRepository.clearAll() let _debouncedSaveToDB: ((() => void) & { cancel: () => void }) | null = null
return
} function getActualSaveToDB(get: () => TabState) {
const snapshots = tabs.map(t => ({ return async () => {
id: t.id, const { tabs } = get()
filePath: t.filePath, if (tabs.length === 0) {
content: t.content, await tabRepository.clearAll()
isModified: t.isModified, return
scrollTop: t.scrollTop, }
selectionStart: t.selectionStart, const snapshots = tabs.map(t => ({
selectionEnd: t.selectionEnd, id: t.id,
updatedAt: Date.now() filePath: t.filePath,
})) content: t.content,
await tabRepository.saveAll(snapshots) isModified: t.isModified,
await tabRepository.saveActiveTabId(get().activeTabId) scrollTop: t.scrollTop,
} selectionStart: t.selectionStart,
} selectionEnd: t.selectionEnd,
updatedAt: Date.now(),
export const useTabStore = create<TabState>((set, get) => { }))
const actualSave = getActualSaveToDB(get) await tabRepository.saveAll(snapshots)
_debouncedSaveToDB = debounce(actualSave, 500) await tabRepository.saveActiveTabId(get().activeTabId)
}
return { }
tabs: [],
activeTabId: null, export const useTabStore = create<TabState>((set, get) => {
mruStack: [], const actualSave = getActualSaveToDB(get)
_loaded: false, _debouncedSaveToDB = debounce(actualSave, 500)
loadFromDB: async () => { return {
if (get()._loaded) return tabs: [],
try { activeTabId: null,
const [snapshots, savedActiveTabId] = await Promise.all([ mruStack: [],
tabRepository.loadAll(), _loaded: false,
tabRepository.loadActiveTabId()
]) loadFromDB: async () => {
if (snapshots.length > 0) { if (get()._loaded) return
const tabs: Tab[] = snapshots.map(s => ({ try {
id: s.id, const [snapshots, savedActiveTabId] = await Promise.all([
filePath: s.filePath, tabRepository.loadAll(),
content: s.content, tabRepository.loadActiveTabId(),
isModified: s.isModified, ])
scrollTop: s.scrollTop, if (snapshots.length > 0) {
selectionStart: s.selectionStart, const tabs: Tab[] = snapshots.map(s => ({
selectionEnd: s.selectionEnd id: s.id,
})) filePath: s.filePath,
const activeTabId = (savedActiveTabId && tabs.find(t => t.id === savedActiveTabId)) content: s.content,
? savedActiveTabId isModified: s.isModified,
: tabs[tabs.length - 1].id scrollTop: s.scrollTop,
set({ tabs, activeTabId, _loaded: true }) selectionStart: s.selectionStart,
} else { selectionEnd: s.selectionEnd,
set({ _loaded: true }) }))
} const activeTabId =
} catch (err) { savedActiveTabId && tabs.find(t => t.id === savedActiveTabId)
// eslint-disable-next-line no-console -- DB load error ? savedActiveTabId
console.error('Failed to load tabs from DB:', err) : tabs[tabs.length - 1].id
set({ _loaded: true }) set({ tabs, activeTabId, _loaded: true })
} } else {
}, set({ _loaded: true })
}
saveToDB: async () => { } catch (err) {
if (_debouncedSaveToDB) { // eslint-disable-next-line no-console -- DB load error
_debouncedSaveToDB() console.error('Failed to load tabs from DB:', err)
} set({ _loaded: true })
}, }
},
createTab: (filePath: string | null = null, content: string = ''): Tab => {
if (filePath) { saveToDB: async () => {
const existing = get().tabs.find(t => t.filePath === filePath) if (_debouncedSaveToDB) {
if (existing) { _debouncedSaveToDB()
get().switchToTab(existing.id) }
return existing },
}
} createTab: (filePath: string | null = null, content: string = ''): Tab => {
if (filePath) {
const tab: Tab = { const existing = get().tabs.find(t => t.filePath === filePath)
id: nanoid(), if (existing) {
filePath, get().switchToTab(existing.id)
content, return existing
isModified: false, }
scrollTop: 0, }
selectionStart: 0,
selectionEnd: 0 const tab: Tab = {
} id: nanoid(),
filePath,
set(state => ({ content,
tabs: [...state.tabs, tab], isModified: false,
activeTabId: tab.id scrollTop: 0,
})) selectionStart: 0,
selectionEnd: 0,
_debouncedSaveToDB?.() }
return tab
}, set(state => ({
tabs: [...state.tabs, tab],
closeTab: (tabId: string) => { activeTabId: tab.id,
set(state => { }))
const index = state.tabs.findIndex(t => t.id === tabId)
if (index === -1) return state _debouncedSaveToDB?.()
return tab
const newTabs = state.tabs.filter(t => t.id !== tabId) },
const newMru = state.mruStack.filter(id => id !== tabId)
closeTab: (tabId: string) => {
let newActiveId = state.activeTabId set(state => {
if (state.activeTabId === tabId) { const index = state.tabs.findIndex(t => t.id === tabId)
if (newTabs.length === 0) { if (index === -1) return state
newActiveId = null
} else { const newTabs = state.tabs.filter(t => t.id !== tabId)
const mruCandidate = newMru.find(id => newTabs.some(t => t.id === id)) const newMru = state.mruStack.filter(id => id !== tabId)
if (mruCandidate) {
newActiveId = mruCandidate let newActiveId = state.activeTabId
newMru.splice(newMru.indexOf(mruCandidate), 1) if (state.activeTabId === tabId) {
} else { if (newTabs.length === 0) {
const newIndex = Math.min(index, newTabs.length - 1) newActiveId = null
newActiveId = newTabs[newIndex].id } else {
} const mruCandidate = newMru.find(id => newTabs.some(t => t.id === id))
} if (mruCandidate) {
} newActiveId = mruCandidate
newMru.splice(newMru.indexOf(mruCandidate), 1)
return { tabs: newTabs, activeTabId: newActiveId, mruStack: newMru } } else {
}) const newIndex = Math.min(index, newTabs.length - 1)
newActiveId = newTabs[newIndex].id
_debouncedSaveToDB?.() }
}, }
}
closeOtherTabs: (tabId: string) => {
set(state => { return { tabs: newTabs, activeTabId: newActiveId, mruStack: newMru }
const target = state.tabs.find(t => t.id === tabId) })
if (!target) return state
return { tabs: [target], activeTabId: tabId, mruStack: [] } _debouncedSaveToDB?.()
}) },
_debouncedSaveToDB?.()
}, closeOtherTabs: (tabId: string) => {
set(state => {
closeAllTabs: () => { const target = state.tabs.find(t => t.id === tabId)
set({ tabs: [], activeTabId: null, mruStack: [] }) if (!target) return state
_debouncedSaveToDB?.() return { tabs: [target], activeTabId: tabId, mruStack: [] }
}, })
_debouncedSaveToDB?.()
closeTabsToRight: (tabId: string) => { },
set(state => {
const index = state.tabs.findIndex(t => t.id === tabId) closeAllTabs: () => {
if (index === -1) return state set({ tabs: [], activeTabId: null, mruStack: [] })
const newTabs = state.tabs.slice(0, index + 1) _debouncedSaveToDB?.()
const newActiveId = state.activeTabId && newTabs.find(t => t.id === state.activeTabId) },
? state.activeTabId
: tabId closeTabsToRight: (tabId: string) => {
return { set(state => {
tabs: newTabs, const index = state.tabs.findIndex(t => t.id === tabId)
activeTabId: newActiveId, if (index === -1) return state
mruStack: state.mruStack.filter(id => newTabs.some(t => t.id === id)) const newTabs = state.tabs.slice(0, index + 1)
} const newActiveId =
}) state.activeTabId && newTabs.find(t => t.id === state.activeTabId)
_debouncedSaveToDB?.() ? state.activeTabId
}, : tabId
return {
// D1: 拖拽排序 — 将 fromId 标签移动到新的数组位置 tabs: newTabs,
moveTab: (fromId: string, toIndex: number) => { activeTabId: newActiveId,
set(state => { mruStack: state.mruStack.filter(id => newTabs.some(t => t.id === id)),
const fromIndex = state.tabs.findIndex(t => t.id === fromId) }
if (fromIndex === -1 || fromIndex === toIndex) return state })
const newTabs = [...state.tabs] _debouncedSaveToDB?.()
const [moved] = newTabs.splice(fromIndex, 1) },
// 移除后直接插入目标位置即可（splice 在移除元素后数组已缩短，
// toIndex 相对于原数组的位置在移除后无需调整） // D1: 拖拽排序 — 将 fromId 标签移动到新的数组位置
newTabs.splice(toIndex, 0, moved) moveTab: (fromId: string, toIndex: number) => {
return { tabs: newTabs } set(state => {
}) const fromIndex = state.tabs.findIndex(t => t.id === fromId)
_debouncedSaveToDB?.() if (fromIndex === -1 || fromIndex === toIndex) return state
}, const newTabs = [...state.tabs]
const [moved] = newTabs.splice(fromIndex, 1)
switchToTab: (tabId: string) => { // 移除后直接插入目标位置即可（splice 在移除元素后数组已缩短，
set(state => { // toIndex 相对于原数组的位置在移除后无需调整）
if (state.activeTabId === tabId) return state newTabs.splice(toIndex, 0, moved)
const newMru = state.activeTabId return { tabs: newTabs }
? [state.activeTabId, ...state.mruStack.filter(id => id !== state.activeTabId)] })
: state.mruStack _debouncedSaveToDB?.()
return { activeTabId: tabId, mruStack: newMru } },
})
setTimeout(() => tabRepository.saveActiveTabId(tabId), 0) switchToTab: (tabId: string) => {
}, set(state => {
if (state.activeTabId === tabId) return state
updateTabContent: (tabId: string, content: string) => { const newMru = state.activeTabId
set(state => ({ ? [state.activeTabId, ...state.mruStack.filter(id => id !== state.activeTabId)]
tabs: state.tabs.map(t => { : state.mruStack
if (t.id !== tabId) return t return { activeTabId: tabId, mruStack: newMru }
// A3: 内容未变时不变更对象引用（避免误标记 isModified） })
if (t.content === content) return t setTimeout(() => tabRepository.saveActiveTabId(tabId), 0)
return { ...t, content, isModified: true } },
})
})) updateTabContent: (tabId: string, content: string) => {
}, set(state => ({
tabs: state.tabs.map(t => {
setModified: (tabId: string, modified: boolean) => { if (t.id !== tabId) return t
set(state => ({ // A3: 内容未变时不变更对象引用（避免误标记 isModified）
tabs: state.tabs.map(t => if (t.content === content) return t
t.id === tabId ? { ...t, isModified: modified } : t return { ...t, content, isModified: true }
) }),
})) }))
}, },
getActiveTab: (): Tab | null => { setModified: (tabId: string, modified: boolean) => {
const { tabs, activeTabId } = get() set(state => ({
return tabs.find(t => t.id === activeTabId) ?? null tabs: state.tabs.map(t => (t.id === tabId ? { ...t, isModified: modified } : t)),
}, }))
},
updateTabScroll: (tabId: string, scroll: Partial<Pick<Tab, 'scrollTop' | 'selectionStart' | 'selectionEnd'>>) => {
set(state => ({ getActiveTab: (): Tab | null => {
tabs: state.tabs.map(t => const { tabs, activeTabId } = get()
t.id === tabId ? { ...t, ...scroll } : t return tabs.find(t => t.id === activeTabId) ?? null
) },
}))
} updateTabScroll: (
} tabId: string,
}) scroll: Partial<Pick<Tab, 'scrollTop' | 'selectionStart' | 'selectionEnd'>>,
) => {
// D5: 立即 flush 待保存的标签状态到 IndexedDB（取消防抖后同步写入） set(state => ({
export function flushSaveToDB(): Promise<void> { tabs: state.tabs.map(t => (t.id === tabId ? { ...t, ...scroll } : t)),
_debouncedSaveToDB?.cancel() }))
return getActualSaveToDB(useTabStore.getState)() },
} }
})
// D5: 立即 flush 待保存的标签状态到 IndexedDB（取消防抖后同步写入）
export function flushSaveToDB(): Promise<void> {
_debouncedSaveToDB?.cancel()
return getActualSaveToDB(useTabStore.getState)()
}
src/renderer/styles/global.css
+37 -168
View File
@@ -87,6 +87,38 @@ body {
min-height: 0; min-height: 0;
} }
/* v0.6.0: StatusBar */
#statusbar {
height: var(--statusbar-height);
background: var(--bg);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 16px;
padding: 0 12px;
font-size: 12px;
color: var(--text-tertiary);
flex-shrink: 0;
user-select: none;
}
.statusbar-item {
white-space: nowrap;
}
.statusbar-spacer {
flex: 1;
}
.statusbar-zen {
color: var(--primary);
font-weight: 500;
}
.statusbar-autosave.saving {
color: var(--primary);
}
#main-content { #main-content {
flex: 1; flex: 1;
display: flex; display: flex;
@@ -128,6 +160,11 @@ body {
height: 100%; height: 100%;
} }
/* v0.6.0: Zen 专注模式加宽 — 覆盖内置 820px（同优先级下运行时注入的样式会赢，用更高 specificity） */
.metona-editor-wrapper .me-wrapper.me-zen .me-body {
max-width: 1200px;
}
/* FIX: Allow text selection in the preview pane. /* FIX: Allow text selection in the preview pane.
global.css sets user-select:none on html/body to prevent global.css sets user-select:none on html/body to prevent
selection in UI chrome (toolbar, tabs, sidebar), but this selection in UI chrome (toolbar, tabs, sidebar), but this
@@ -906,174 +943,6 @@ body {
background: var(--primary-dark); background: var(--primary-dark);
} }
/* ===== UX-01: ConfirmDialog ===== */
.confirm-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
animation: fadeIn 0.15s ease;
}
.confirm-dialog {
background: var(--bg);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
width: 380px;
max-width: 90vw;
overflow: hidden;
animation: fadeIn 0.15s ease;
}
.confirm-header {
padding: 20px 24px 0;
}
.confirm-header h3 {
font-size: 16px;
font-weight: 600;
color: var(--text);
margin: 0;
}
.confirm-header.confirm-danger h3 {
color: #d93025;
}
.confirm-header.confirm-warning h3 {
color: #e37400;
}
:root.dark .confirm-header.confirm-warning h3 {
color: #fdd663;
}
.confirm-body {
padding: 12px 24px 20px;
}
.confirm-body p {
font-size: 14px;
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
.confirm-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 24px 20px;
}
.confirm-btn {
padding: 8px 20px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 13px;
font-family: var(--font-ui);
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
background: var(--bg);
color: var(--text);
}
.confirm-btn-cancel:hover {
background: var(--bg-tertiary);
}
.confirm-btn-danger {
background: #d93025;
border-color: #d93025;
color: white;
}
.confirm-btn-danger:hover {
background: #b5271d;
}
.confirm-btn-warning {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.confirm-btn-warning:hover {
background: var(--primary-dark);
}
.confirm-btn-info {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.confirm-btn-info:hover {
background: var(--primary-dark);
}
.confirm-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* ===== UX-02: LoadingSpinner ===== */
.loading-spinner {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-secondary);
}
.loading-spinner-svg {
animation: spin 0.8s linear infinite;
}
.loading-spinner-label {
font-size: 13px;
font-family: var(--font-ui);
color: var(--text-secondary);
}
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
:root.dark .loading-overlay {
background: rgba(30, 30, 30, 0.8);
}
.preview-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 0;
color: var(--text-tertiary);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ===== UX-07: 通用可访问性增强 ===== */ /* ===== UX-07: 通用可访问性增强 ===== */
/* Focus visible 为所有交互元素提供清晰的焦点指示 */ /* Focus visible 为所有交互元素提供清晰的焦点指示 */
src/renderer/styles/markdown-body.css
+45 -16
View File
@@ -7,8 +7,12 @@
word-wrap: break-word; word-wrap: break-word;
} }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h1,
.markdown-body h4, .markdown-body h5, .markdown-body h6 { .markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-top: 24px; margin-top: 24px;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 600; font-weight: 600;
@@ -28,10 +32,19 @@
border-bottom: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
} }
.markdown-body h3 { font-size: 1.25em; } .markdown-body h3 {
.markdown-body h4 { font-size: 1em; } font-size: 1.25em;
.markdown-body h5 { font-size: 0.875em; } }
.markdown-body h6 { font-size: 0.85em; color: var(--text-secondary); } .markdown-body h4 {
font-size: 1em;
}
.markdown-body h5 {
font-size: 0.875em;
}
.markdown-body h6 {
font-size: 0.85em;
color: var(--text-secondary);
}
.markdown-body p { .markdown-body p {
margin-top: 0; margin-top: 0;
@@ -44,8 +57,12 @@
cursor: pointer; cursor: pointer;
} }
.markdown-body a:hover { text-decoration: underline; } .markdown-body a:hover {
.markdown-body strong { font-weight: 600; } text-decoration: underline;
}
.markdown-body strong {
font-weight: 600;
}
.markdown-body img { .markdown-body img {
max-width: 100%; max-width: 100%;
@@ -71,16 +88,23 @@
border-radius: 0 var(--radius) var(--radius) 0; border-radius: 0 var(--radius) var(--radius) 0;
} }
.markdown-body blockquote p:last-child { margin-bottom: 0; } .markdown-body blockquote p:last-child {
margin-bottom: 0;
}
.markdown-body ul, .markdown-body ol { .markdown-body ul,
.markdown-body ol {
margin-top: 0; margin-top: 0;
margin-bottom: 16px; margin-bottom: 16px;
padding-left: 2em; padding-left: 2em;
} }
.markdown-body li { margin-top: 4px; } .markdown-body li {
.markdown-body li + li { margin-top: 4px; } margin-top: 4px;
}
.markdown-body li + li {
margin-top: 4px;
}
.markdown-body code { .markdown-body code {
font-family: var(--font-mono); font-family: var(--font-mono);
@@ -91,7 +115,9 @@
color: #e83e8c; color: #e83e8c;
} }
:root.dark .markdown-body code { color: #f48fb1; } :root.dark .markdown-body code {
color: #f48fb1;
}
.markdown-body pre { .markdown-body pre {
margin-top: 0; margin-top: 0;
@@ -119,7 +145,8 @@
display: block; display: block;
} }
.markdown-body table th, .markdown-body table td { .markdown-body table th,
.markdown-body table td {
padding: 8px 16px; padding: 8px 16px;
border: 1px solid var(--border); border: 1px solid var(--border);
text-align: left; text-align: left;
@@ -130,9 +157,11 @@
background: var(--bg-secondary); background: var(--bg-secondary);
} }
.markdown-body table tr:nth-child(even) { background: var(--bg-secondary); } .markdown-body table tr:nth-child(even) {
background: var(--bg-secondary);
}
.markdown-body input[type="checkbox"] { .markdown-body input[type='checkbox'] {
margin-right: 6px; margin-right: 6px;
accent-color: var(--primary); accent-color: var(--primary);
} }
src/renderer/types/ipc.ts
+65 -51
View File
@@ -1,51 +1,65 @@
import type { import type {
OpenFileResponse, OpenFileResponse,
ReadFileResult, ReadFileResult,
SaveFilePayload, SaveFilePayload,
SaveFileResult, SaveFileResult,
SaveAsPayload, SaveAsPayload,
ReloadFileResult, ReloadFileResult,
FileStatsResult, FileStatsResult,
ReadDirTreeResult ReadDirTreeResult,
} from '../../shared/types' } from '../../shared/types'
export interface IpcInvokeMap { export interface IpcInvokeMap {
'dialog:openFile': [void, OpenFileResponse] 'dialog:openFile': [void, OpenFileResponse]
'file:read': [string, ReadFileResult] 'file:read': [string, ReadFileResult]
'file:save': [SaveFilePayload, SaveFileResult] 'file:save': [SaveFilePayload, SaveFileResult]
'file:saveAs': [SaveAsPayload, SaveFileResult] 'file:saveAs': [SaveAsPayload, SaveFileResult]
'file:getCurrentPath': [void, string | null] 'file:getCurrentPath': [void, string | null]
'file:stats': [string, FileStatsResult] 'file:stats': [string, FileStatsResult]
'file:reload': [void, ReloadFileResult] 'file:reload': [void, ReloadFileResult]
'tab:switched': [string | null, void] 'tab:switched': [string | null, void]
'window:forceClose': [void, void] 'window:forceClose': [void, void]
'window:cancelClose': [void, void] 'window:cancelClose': [void, void]
'dir:readTree': [string, ReadDirTreeResult] 'dir:readTree': [string, ReadDirTreeResult]
'dir:openDialog': [void, string | null] 'dir:openDialog': [void, string | null]
'dir:watch': [string, void] 'dir:watch': [string, void]
'dir:unwatch': [void, void] 'dir:unwatch': [void, void]
} 'data:export': [
string,
export type Unsubscribe = () => void { success: boolean; canceled?: boolean; filePath?: string; error?: string },
]
export interface ElectronAPI { 'data:import': [void, { success: boolean; canceled?: boolean; content?: string; error?: string }]
openFile: () => Promise<OpenFileResponse> }
readFile: (filePath: string) => Promise<ReadFileResult>
saveFile: (data: SaveFilePayload) => Promise<SaveFileResult> export type Unsubscribe = () => void
saveFileAs: (data: SaveAsPayload) => Promise<SaveFileResult>
getCurrentPath: () => Promise<string | null> export interface ElectronAPI {
getFileStats: (filePath: string) => Promise<FileStatsResult> openFile: () => Promise<OpenFileResponse>
reloadFile: () => Promise<ReloadFileResult> readFile: (filePath: string) => Promise<ReadFileResult>
tabSwitched: (filePath: string | null) => Promise<void> saveFile: (data: SaveFilePayload) => Promise<SaveFileResult>
forceClose: () => Promise<void> saveFileAs: (data: SaveAsPayload) => Promise<SaveFileResult>
cancelClose: () => Promise<void> getCurrentPath: () => Promise<string | null>
openExternal: (url: string) => void getFileStats: (filePath: string) => Promise<FileStatsResult>
readDirTree: (dirPath: string) => Promise<ReadDirTreeResult> reloadFile: () => Promise<ReloadFileResult>
openFolderDialog: () => Promise<string | null> tabSwitched: (filePath: string | null) => Promise<void>
watchDir: (dirPath: string) => Promise<void> forceClose: () => Promise<void>
unwatchDir: () => Promise<void> cancelClose: () => Promise<void>
onFileOpenInTab: (callback: (data: { filePath: string; content: string }) => void) => Unsubscribe openExternal: (url: string) => void
onExternalModification: (callback: (filePath: string) => void) => Unsubscribe readDirTree: (dirPath: string) => Promise<ReadDirTreeResult>
onDirChanged: (callback: () => void) => Unsubscribe openFolderDialog: () => Promise<string | null>
onConfirmClose: (callback: () => void) => Unsubscribe watchDir: (dirPath: string) => Promise<void>
} unwatchDir: () => Promise<void>
exportData: (
content: string,
) => Promise<{ success: boolean; canceled?: boolean; filePath?: string; error?: string }>
importData: () => Promise<{
success: boolean
canceled?: boolean
content?: string
error?: string
}>
onFileOpenInTab: (callback: (data: { filePath: string; content: string }) => void) => Unsubscribe
onExternalModification: (callback: (filePath: string) => void) => Unsubscribe
onDirChanged: (callback: () => void) => Unsubscribe
onConfirmClose: (callback: () => void) => Unsubscribe
}
src/renderer/types/settings.ts
+16 -16
View File
@@ -1,16 +1,16 @@
export type ThemeMode = 'light' | 'dark' | 'warm' export type ThemeMode = 'light' | 'dark' | 'warm'
export type ViewMode = 'editor' | 'preview' | 'source' export type ViewMode = 'editor' | 'preview' | 'source'
export interface Settings { export interface Settings {
themeMode: ThemeMode themeMode: ThemeMode
viewMode: ViewMode viewMode: ViewMode
sidebarCollapsed: boolean sidebarCollapsed: boolean
sidebarWidth: number sidebarWidth: number
} }
export const DEFAULT_SETTINGS: Settings = { export const DEFAULT_SETTINGS: Settings = {
themeMode: 'light', themeMode: 'light',
viewMode: 'editor', viewMode: 'editor',
sidebarCollapsed: false, sidebarCollapsed: false,
sidebarWidth: 240 sidebarWidth: 240,
} }
src/renderer/vite-env.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
src/shared/constants.ts
+16 -8
View File
@@ -1,8 +1,16 @@
// 共享常量 — 主进程和渲染进程共用 // 共享常量 — 主进程和渲染进程共用
export const APP_VERSION = 'v0.5.0' export const APP_VERSION = 'v0.6.0'
export const MAX_FILE_SIZE = 20 * 1024 * 1024 // 20MB export const MAX_FILE_SIZE = 20 * 1024 * 1024 // 20MB
export const ALLOWED_EXTENSIONS = ['.md', '.markdown', '.txt'] as const export const ALLOWED_EXTENSIONS = ['.md', '.markdown', '.txt'] as const
export const SKIP_DIRS = new Set([ export const SKIP_DIRS = new Set([
'node_modules', '.git', '.svn', '.hg', 'dist', 'out', 'node_modules',
'.next', '.nuxt', '__pycache__', '.DS_Store' '.git',
]) '.svn',
'.hg',
'dist',
'out',
'.next',
'.nuxt',
'__pycache__',
'.DS_Store',
])
src/shared/ipc-channels.ts
+30 -26
View File
@@ -1,26 +1,30 @@
// IPC 通道名常量 — 主进程和渲染进程共享 // IPC 通道名常量 — 主进程和渲染进程共享
export const IPC_CHANNELS = { export const IPC_CHANNELS = {
// 渲染进程 → 主进程 (invoke) // 渲染进程 → 主进程 (invoke)
DIALOG_OPEN_FILE: 'dialog:openFile', DIALOG_OPEN_FILE: 'dialog:openFile',
FILE_READ: 'file:read', FILE_READ: 'file:read',
FILE_SAVE: 'file:save', FILE_SAVE: 'file:save',
FILE_SAVE_AS: 'file:saveAs', FILE_SAVE_AS: 'file:saveAs',
FILE_GET_CURRENT_PATH: 'file:getCurrentPath', FILE_GET_CURRENT_PATH: 'file:getCurrentPath',
FILE_STATS: 'file:stats', FILE_STATS: 'file:stats',
FILE_RELOAD: 'file:reload', FILE_RELOAD: 'file:reload',
TAB_SWITCHED: 'tab:switched', TAB_SWITCHED: 'tab:switched',
WINDOW_FORCE_CLOSE: 'window:forceClose', WINDOW_FORCE_CLOSE: 'window:forceClose',
WINDOW_CANCEL_CLOSE: 'window:cancelClose', WINDOW_CANCEL_CLOSE: 'window:cancelClose',
DIR_READ_TREE: 'dir:readTree', DIR_READ_TREE: 'dir:readTree',
DIR_OPEN_DIALOG: 'dir:openDialog', DIR_OPEN_DIALOG: 'dir:openDialog',
DIR_WATCH: 'dir:watch', DIR_WATCH: 'dir:watch',
DIR_UNWATCH: 'dir:unwatch', DIR_UNWATCH: 'dir:unwatch',
// 主进程 → 渲染进程 (send) // v0.6.0: 数据备份导出/导入（JSON）
FILE_OPEN_IN_TAB: 'file:openInTab', DATA_EXPORT: 'data:export',
FILE_EXTERNALLY_MODIFIED: 'file:externallyModified', DATA_IMPORT: 'data:import',
WINDOW_CONFIRM_CLOSE: 'window:confirmClose',
SIDEBAR_DIR_CHANGED: 'sidebar:dirChanged' // 主进程 → 渲染进程 (send)
} as const FILE_OPEN_IN_TAB: 'file:openInTab',
FILE_EXTERNALLY_MODIFIED: 'file:externallyModified',
export type IpcChannel = (typeof IPC_CHANNELS)[keyof typeof IPC_CHANNELS] WINDOW_CONFIRM_CLOSE: 'window:confirmClose',
SIDEBAR_DIR_CHANGED: 'sidebar:dirChanged',
} as const
export type IpcChannel = (typeof IPC_CHANNELS)[keyof typeof IPC_CHANNELS]