# Todo Monitor

双视图待办管理工具——在无限画布上创建 Markdown 便签，一键切换为结构化监控大屏。

## 技术栈

| 层级 | 技术 |
|------|------|
| 前端 | Vue 3 + Composition API + TypeScript |
| 画布 | Konva.js |
| 状态管理 | Pinia |
| 构建 | Vite |
| 后端 | Express + better-sqlite3 |
| 数据库 | SQLite |

## 快速开始

```bash
# 启动后端（端口 3001）
cd backend
npm install
npm run dev

# 启动前端（端口 5173）
cd frontend
npm install
npm run dev
```

浏览器打开 `http://localhost:5173`。

## 核心功能

### 无限画布
- 双击空画布创建便签，支持 Markdown 编辑
- 拖拽便签移动 / 右下角缩放
- 滚轮缩放画布，空画布拖拽平移视角
- 分组框：拖拽绘制矩形区域，便签落入框内自动归属分组

### 监控大屏
- 便签自动解析为监控卡片，5 种类型：任务卡、里程碑卡、指标卡、倒计时卡、项目卡
- 看板 / 列表 / 网格三种布局
- 按状态、优先级、标签等维度筛选排序
- 统计概览栏：总数 / 进行中 / 已完成 / 逾期 / 阻塞

### 选择系统
- 指针 / 便签 / 分组 / 框选 四种工具模式
- Ctrl+点击选中对象，框选批量选中
- 选中多个对象后整体拖拽移动

### 语法解析
支持三种 Markdown 解析模式，详见 [语法说明](语法说明.md)：
1. **YAML Front Matter** — 结构化元数据
2. **约定式 Markdown** — 按自然书写风格自动识别
3. **行内快捷字段** — `@字段名(值)` 快速标注

编辑器内 `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) |