init: Todo Monitor 初始提交

2026-08-02 02:47:50 +08:00
commit a3a9972ab7
45 changed files with 7880 additions and 0 deletions
@@ -0,0 +1,112 @@
+# 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) |