# electron-react-note

**Repository Path**: zhqiok/electron-react-note

## Basic Information

- **Project Name**: electron-react-note
- **Description**: 个人笔记软件，基于 Electron + React 构建的单机版桌面端笔记与待办管理应用。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-17
- **Last Updated**: 2026-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 电子笔记 (Electron Note)

个人笔记软件，基于 Electron 构建的桌面端笔记与待办管理应用。

## 技术栈

| 类别 | 技术 |
|------|------|
| **桌面框架** | Electron 33 |
| **构建工具** | electron-vite + Vite 5 |
| **前端框架** | React 18 + TypeScript 5 |
| **UI 组件库** | Ant Design 5 + @ant-design/icons |
| **富文本编辑器** | TipTap 3（所见即所得） |
| **Markdown 编辑器** | CodeMirror 6 + @uiw/react-md-editor（编辑+预览） |
| **状态管理** | Zustand 5 |
| **路由** | React Router DOM v6 |
| **数据库** | sql.js（SQLite 编译为 WebAssembly，本地存储） |
| **测试** | Playwright（E2E 测试） |
| **打包** | electron-builder |

## 界面预览图

<img src="docs/images/ScreenShot_2026-05-17_144011_146.png" width="800" />

## 功能

### 笔记模块

- **文件夹管理**：支持多级文件夹，自由组织笔记
- **双编辑器模式**：支持富文本（所见即所得）和 Markdown 两种编辑方式
- **笔记列表**：按文件夹筛选，查看最近编辑的笔记
- **关键词搜索**：快速检索笔记内容
- **自动保存**：编辑内容自动定时保存，防止数据丢失

### 待办模块

- **待办事项**：添加、完成、删除待办任务
- **状态筛选**：按"全部 / 已完成 / 未完成"分类查看

### 数据管理

- **数据导出**：一键备份全部数据为文件
- **数据导入**：从备份文件恢复数据

## 项目结构

```
electron-note/
├── electron/              # Electron 主进程
│   ├── main.ts            # 主进程入口
│   ├── preload.ts         # 预加载脚本（IPC 桥接）
│   ├── database/          # 数据库初始化与连接
│   └── ipc/               # IPC 通信模块
├── src/                   # 渲染进程（React 前端）
│   ├── components/        # 通用组件
│   │   ├── notes/         # 笔记相关组件（编辑器、文件夹树等）
│   │   └── todos/         # 待办相关组件
│   ├── pages/             # 页面组件
│   │   ├── notes/         # 笔记列表、笔记编辑页
│   │   └── todos/         # 待办列表页
│   ├── layouts/           # 布局组件
│   ├── stores/            # Zustand 状态管理
│   └── types/             # TypeScript 类型定义
├── tests/e2e/             # Playwright 端到端测试
└── docs/                  # 设计文档
```

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发环境
npm run dev

# 构建生产版本
npm run build

# 打包为可执行文件
npm run package

# 运行 E2E 测试
npx playwright test
```