113 lines
3.2 KiB
Markdown
113 lines
3.2 KiB
Markdown
# 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) |
|