一个现代化的桌面笔记和待办事项管理应用,使用 Vue 3 + Tauri + Express 构建。
- 富文本编辑器:基于 Vditor 的 Markdown 编辑器
- 树形结构:文件夹和笔记的层级管理
- 版本控制:自动保存和版本管理 (已废弃)
- 任务管理:创建、编辑、删除待办事项
- 状态追踪:未完成/已完成状态管理
- 优先级设置:五级优先级分类
- 截止日期:设置任务截止时间
- 标签分类:使用标签组织任务
- 筛选排序:多条件筛选和排序
- JWT 认证:安全的用户登录注册
- 密码加密:BCrypt 密码哈希存储
- 用户会话:持久化登录状态
- 邮箱验证:注册邮箱验证
- 本地数据库:SQLite 数据持久化
- RESTful API:标准化数据接口
- 数据同步:前后端数据同步
- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - 类型安全的 JavaScript
- Tauri - 跨平台桌面应用框架
- PrimeVue - UI 组件库
- TailwindCSS - 原子化 CSS 框架
- Vditor - Markdown 编辑器
- Vue Router - 路由管理
- Node.js - JavaScript 运行时
- Express - Web 应用框架
- SQLite - 轻量级数据库
- JWT - JSON Web Tokens
- BCrypt - 密码加密
- Rollup - 构建工具
- Vite - 快速构建工具
- ESLint - 代码检查工具
- TypeScript - 类型检查
- PNPM - 包管理器
- Jest - 测试框架
- Node.js 18+
- PNPM 9+
- Rust (用于 Tauri)
# 安装根目录依赖
pnpm i
# 安装服务端依赖
cd server
pnpm i
cd ..# 启动前端 + 后端开发服务器
pnpm run dev
# 或者分别启动
pnpm run dev:client # 前端开发服务器 (http://localhost:1420)
pnpm run dev:server # 后端开发服务器 (http://localhost:3000)
# 启动 Tauri 桌面应用
pnpm tauri dev# 构建前端
pnpm run build:frontend
# 构建后端
pnpm run build:server
# 构建 Tauri 桌面应用
pnpm run build:tauri
# 或者完整构建
pnpm run buildTodo-Note/
├── src/ # 前端源码
│ ├── components/ # 公共组件
│ │ ├── Icon.vue # 图标组件
│ │ ├── InplaceEdit.vue # 内联编辑组件
│ │ ├── PageHeader.vue # 页面头部组件
│ │ ├── Time.vue # 时间组件
│ ├── screens/ # 页面组件
│ │ ├── Home/ # 主应用页面
│ │ │ ├── HomeView.vue # 主页面容器
│ │ │ ├── Note/ # 笔记功能模块
│ │ │ │ ├── NoteView.vue # 笔记主界面
│ │ │ │ └── components/ # 笔记相关组件
│ │ │ │ ├── NoteEdit.vue # 笔记编辑器
│ │ │ │ ├── NoteMeta.vue # 笔记元数据
│ │ │ │ └── NoteTree.vue # 笔记树形导航
│ │ │ ├── Todo/ # 待办事项功能模块
│ │ │ │ ├── TodoView.vue # 待办事项主界面
│ │ │ │ └── components/ # 待办相关组件
│ │ │ │ ├── TodoFilter.vue # 待办筛选器
│ │ │ │ ├── TodoForm.vue # 待办表单
│ │ │ │ └── TodoItem.vue # 单个待办项
│ │ │ └── Overview/ # 概览页面
│ │ │ ├── Overview.vue # 概览主界面
│ │ │ └── components/ # 概览组件
│ │ │ ├── NoteBlock.vue # 笔记块
│ │ │ ├── QuickAdd.vue # 快速添加
│ │ │ └── TodoOverview.vue # 待办概览
│ │ └── Login/ # 登录注册页面
│ │ ├── LoginView.vue # 登录主界面
│ │ ├── LoginCard.vue # 登录卡片
│ │ ├── RegisterCard.vue # 注册卡片
│ │ ├── InitialCard.vue # 初始化卡片
│ │ └── components/ # 登录组件
│ │ └── LoginInput.vue # 登录输入框
│ ├── api/ # API 接口层
│ │ ├── auth/ # 认证相关 API
│ │ │ ├── auth.ts # 用户认证接口
│ │ │ └── cookie.ts # Cookie 管理
│ │ ├── note/ # 笔记相关 API
│ │ │ └── note.ts # 笔记 CRUD 和版本管理
│ │ ├── todo/ # 待办事项相关 API
│ │ │ └── todo.ts # 待办事项 CRUD
│ │ ├── types/ # TypeScript 类型定义
│ │ │ ├── user.d.ts # 用户类型
│ │ │ ├── note.d.ts # 笔记类型
│ │ │ ├── todo.d.ts # 待办事项类型
│ │ │ └── gerneral.d.ts # 通用类型
│ │ ├── utils/ # 工具函数
│ │ │ ├── request.ts # HTTP 请求封装
│ │ │ ├── indexedDB.ts # IndexedDB 操作
│ │ │ ├── note.ts # 笔记工具函数
│ │ │ ├── todo.ts # 待办事项工具函数
│ │ │ ├── time.ts # 时间处理
│ │ │ ├── toast.ts # PrimeVue toast 封装
│ │ │ └── perform.ts # 性能优化工具
│ │ └── constants/ # 常量定义
│ │ └── test.ts # 前端测试用数据
│ ├── router/ # 路由配置
│ │ └── index.ts # Vue Router 配置
│ ├── styles/ # 样式文件
│ │ └── global.css # 全局样式
│ ├── App.vue # 根组件
│ ├── main.ts # 应用入口
│ └── vite-env.d.ts # Vite 环境类型
├── server/ # 后端源码
│ ├── src/
│ │ ├── controllers/ # 控制器层
│ │ │ ├── authController.ts # 用户认证控制器
│ │ │ ├── noteController.ts # 笔记管理控制器
│ │ │ ├── todoController.ts # 待办事项控制器
│ │ │ └── userController.ts # 用户管理控制器
│ │ ├── models/ # 数据模型层
│ │ │ ├── user.ts # 用户数据模型
│ │ │ ├── note.ts # 笔记数据模型
│ │ │ └── todo.ts # 待办事项数据模型
│ │ ├── routes/ # 路由定义
│ │ │ ├── auth.ts # 认证路由
│ │ │ ├── note.ts # 笔记路由
│ │ │ ├── todo.ts # 待办事项路由
│ │ │ └── user.ts # 用户路由
│ │ ├── middleware/ # 中间件
│ │ │ └── auth.ts # JWT 认证中间件
│ │ ├── services/ # 业务逻辑层
│ │ │ ├── userService.ts # 用户业务逻辑
│ │ │ └── todoService.ts # 待办事项业务逻辑
│ │ ├── types/ # 后端类型定义
│ │ │ ├── user.d.ts # 用户类型
│ │ │ ├── note.d.ts # 笔记类型
│ │ │ ├── todo.d.ts # 待办事项类型
│ │ │ ├── request.d.ts # 请求类型
│ │ │ └── db.d.ts # 数据库类型
│ │ ├── utils/ # 工具函数
│ │ │ ├── db.ts # 数据库连接工具
│ │ │ ├── jwt.ts # JWT 工具
│ │ │ └── password.ts # 密码加密工具
│ │ ├── config/ # 配置文件
│ │ │ └── database.ts # 数据库配置
│ │ ├── app.ts # Express 应用配置
│ │ └── index.ts # 服务器入口
│ ├── database/ # 数据库文件
│ │ └── database.sqlite # SQLite 数据库
│ ├── package.json # 后端依赖配置
│ ├── tsconfig.json # TypeScript 配置
│ └── rollup.config.js # Rollup 构建配置
├── src-tauri/ # Tauri 桌面应用配置
│ ├── src/
│ │ ├── main.rs # Rust 主程序
│ │ └── lib.rs # Rust 库文件
│ ├── icons/ # 应用图标
│ ├── capabilities/ # Tauri 权限配置
│ │ └── default.json # 默认权限
│ ├── Cargo.toml # Rust 依赖配置
│ ├── tauri.conf.json # Tauri 应用配置
│ └── build.rs # 构建脚本
├── docs/ # 项目文档
│ ├── AI-Gen/ # AI 生成的文档
│ │ ├── auth-best-practices.md # 认证最佳实践
│ │ ├── note-version-indexeddb.md # 笔记版本管理指南
│ │ └── vditor-diff-guide.md # Vditor 差异比较指南
│ └── server/ # 服务器相关文档
│ ├── general.md # 服务器通用说明
│ └── note.md # 笔记功能说明
├── package.json # 前端依赖配置
├── tsconfig.json # TypeScript 配置
├── vite.config.ts # Vite 构建配置
├── eslint.config.js # ESLint 代码检查配置
├── index.html # HTML 入口文件
├── pnpm-lock.yaml # PNPM 锁定文件
└── README.md # 项目说明文档
应用使用 SQLite 数据库,数据库文件位于 server/database/database.sqlite。首次运行时会自动创建数据库表。
在 server 目录下将 .env.example 复制为 .env :
PROD=true
PORT=3000
JWT_SECRET=jwt_secret
MAIL_HOST=smtp.163.com
MAIL_PORT=465
MAIL_USER=
MAIL_SMTP=POST /api/auth/register- 用户注册POST /api/auth/login- 用户登录POST /api/auth/send- 发送邮箱验证码
GET /api/todos- 获取用户待办事项POST /api/todos- 创建待办事项PUT /api/todos- 更新待办事项DELETE /api/todos/:id- 删除待办事项PATCH /api/todos/toggle- 切换 todo 完成状态 @todo 应该使用 :id ()
GET /api/notes- 获取所有笔记POST /api/notes- 创建笔记GET /api/notes/:id- 获取单个笔记PUT /api/notes/:id- 更新笔记DELETE /api/notes/:id- 删除笔记GET /api/notes/folders- 获取笔记目录结构数据,类型定义见 note.d.ts
- Markdown 实时预览
- 版本管理和比较
- 文件夹树形结构
- 任务状态管理
- 优先级设置
- 筛选和排序
- 现代化 UI 设计
- 响应式布局
欢迎提交 Issue 和 Pull Request!
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
感谢所有开源项目的贡献者,让这个项目成为可能。
如果你觉得这个项目有用,请给它一个 ⭐️!