Todo Monitor
双视图待办管理工具——在无限画布上创建 Markdown 便签，一键切换为结构化监控大屏。
技术栈
| 层级 | 技术 |
|---|---|
| 前端 | Vue 3 + Composition API + TypeScript |
| 画布 | Konva.js |
| 状态管理 | Pinia |
| 构建 | Vite |
| 后端 | Express + better-sqlite3 |
| 数据库 | SQLite |
快速开始
# 启动后端（端口 3001）
cd backend
npm install
npm run dev
# 启动前端（端口 5173）
cd frontend
npm install
npm run dev
浏览器打开 http://localhost:5173。
核心功能
无限画布
- 双击空画布创建便签，支持 Markdown 编辑
- 拖拽便签移动 / 右下角缩放
- 滚轮缩放画布，空画布拖拽平移视角
- 分组框：拖拽绘制矩形区域，便签落入框内自动归属分组
监控大屏
- 便签自动解析为监控卡片，5 种类型：任务卡、里程碑卡、指标卡、倒计时卡、项目卡
- 看板 / 列表 / 网格三种布局
- 按状态、优先级、标签等维度筛选排序
- 统计概览栏：总数 / 进行中 / 已完成 / 逾期 / 阻塞
选择系统
- 指针 / 便签 / 分组 / 框选 四种工具模式
- Ctrl+点击选中对象，框选批量选中
- 选中多个对象后整体拖拽移动
语法解析
支持三种 Markdown 解析模式，详见 语法说明：
- YAML Front Matter — 结构化元数据
- 约定式 Markdown — 按自然书写风格自动识别
- 行内快捷字段 —
@字段名(值)快速标注
编辑器内 Ctrl+S 保存。
项目结构
todomonitor/
├── backend/
│ └── src/
│ ├── index.js # Express 入口
│ ├── db.js # SQLite 初始化
│ └── routes/
│ ├── notes.js # 便签 CRUD
│ ├── groups.js # 分组 CRUD
│ └── batch.js # 批量操作
├── frontend/
│ └── src/
│ ├── App.vue
│ ├── components/
│ │ ├── canvas/ # 画布视图组件
│ │ ├── dashboard/ # 大屏视图组件
│ │ ├── shared/ # 共享 UI 组件
│ │ └── layout/ # 导航栏
│ ├── stores/ # Pinia 状态管理
│ ├── utils/ # API 客户端 / 解析引擎
│ ├── types/ # TypeScript 类型
│ └── composables/ # 组合式函数
├── 需求.md
├── 语法说明.md
└── README.md
数据模型
便签 (notes)
| 字段 | 类型 | 说明 |
|---|---|---|
| id | INTEGER | 主键 |
| content | TEXT | Markdown 内容 |
| x, y | REAL | 画布坐标 |
| width, height | REAL | 尺寸 |
| color | TEXT | 背景色 |
| group_id | INTEGER | 所属分组 |
| created_at | TEXT | 创建时间 |
| updated_at | TEXT | 更新时间 |
分组 (groups)
| 字段 | 类型 | 说明 |
|---|---|---|
| id | INTEGER | 主键 |
| name | TEXT | 分组名称 |
| x, y | REAL | 坐标 |
| width, height | REAL | 尺寸 |
| color | TEXT | 边框颜色 |
| priority | INTEGER | 排序优先级 (0-99) |