# superpowers-todo

**Repository Path**: roboslyq/superpowers-todo

## Basic Information

- **Project Name**: superpowers-todo
- **Description**: TODO 待办管理工具
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-25
- **Last Updated**: 2026-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Superpowers Todo

<p align="center">
  <strong>一款简洁高效的个人待办管理桌面应用</strong>
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Electron-28-47848F?style=flat-square&logo=electron" alt="Electron">
  <img src="https://img.shields.io/badge/Vue-3-4FC08D?style=flat-square&logo=vue.js" alt="Vue 3">
  <img src="https://img.shields.io/badge/TypeScript-6-3178C6?style=flat-square&logo=typescript" alt="TypeScript">
  <img src="https://img.shields.io/badge/SQLite-better--sqlite3-003B57?style=flat-square&logo=sqlite" alt="SQLite">
</p>

---

## 简介

Superpowers Todo 是一款基于 Electron 和 Vue 3 构建的跨平台桌面待办管理应用。采用 SQLite 本地数据库存储，数据安全可控，无需联网即可使用。

## 功能特性

### 核心功能
- **任务管理** - 创建、编辑、删除、完成任务
- **子任务** - 为任务添加子任务清单，逐步完成目标
- **分类管理** - 按工作、学习、生活等分类组织任务
- **标签系统** - 多标签灵活管理，快速筛选
- **优先级** - 高/中/低三级优先级设置
- **截止日期** - 任务到期提醒

### 多视图展示
- **列表视图** - 传统列表展示，支持分组和排序
- **树形视图** 🆕 - 基于任务关联关系的层级结构，支持展开/折叠
- **看板视图** - 拖拽式看板，支持自定义看板和泳道
- **日历视图** - 按日期查看任务，支持月/周/日视图
- **卡片视图** - 瀑布流卡片布局
- **甘特图** - 项目进度时间线视图
- **思维导图** 🆕 - 可视化任务结构，支持多种布局和全屏模式

### 任务关联
- **依赖关系** - 设置任务依赖，A 完成后 B 才能开始
- **阻塞关系** - 标记阻塞任务，A 阻塞 B 的进行
- **关联可视化** - 在思维导图和树形视图中展示关联关系

### 主题系统
- 浅色/深色/跟随系统三种外观模式
- 4 种预设主题（默认、海洋、森林、暖橙）
- 完整自定义支持，可配置 25+ CSS 变量
- 主题导入/导出功能

### 数据统计
- 任务完成趋势图表
- 分类分布可视化
- 本地 SQLite 存储，数据安全可控

## 技术栈

| 技术 | 说明 |
|------|------|
| Vue 3 | 渐进式 JavaScript 框架 |
| TypeScript | 类型安全的 JavaScript 超集 |
| Vite | 下一代前端构建工具 |
| Pinia | Vue 状态管理库 |
| Vue Router | Vue 官方路由 |
| Electron 28 | 跨平台桌面应用框架 |
| SQLite (better-sqlite3) | 嵌入式关系数据库 |
| simple-mind-map | 思维导图渲染库 |
| electron-builder | Electron 应用打包工具 |

## 项目结构

```
├── electron/                  # Electron 主进程
│   ├── main.ts               # 主进程入口
│   ├── preload.ts            # IPC 通信桥接
│   ├── updater.ts            # 自动更新逻辑
│   ├── database/             # 数据库模块
│   │   ├── index.ts          # 数据库初始化
│   │   ├── migrations.ts     # 数据迁移
│   │   └── repositories/     # SQLite 仓库实现
│   └── ipc/                  # IPC 通信
├── src/                      # Vue 渲染进程
│   ├── components/           # Vue 组件
│   │   ├── common/           # 通用组件
│   │   ├── task/             # 任务组件
│   │   │   ├── TaskList.vue  # 列表视图
│   │   │   ├── TreeListView.vue # 树形视图 🆕
│   │   │   ├── TreeNode.vue  # 树节点组件 🆕
│   │   │   ├── TaskBoard.vue # 看板视图
│   │   │   ├── TaskCalendar.vue # 日历视图
│   │   │   ├── TaskGrid.vue  # 卡片视图
│   │   │   └── ViewSwitcher.vue # 视图切换器
│   │   ├── mindmap/          # 思维导图组件 🆕
│   │   │   └── MindMapView.vue
│   │   ├── gantt/            # 甘特图组件
│   │   ├── category/         # 分类组件
│   │   ├── stats/            # 统计图表
│   │   └── layout/           # 布局组件
│   ├── views/                # 页面视图
│   ├── stores/               # Pinia 状态管理
│   │   ├── taskStore.ts      # 任务状态
│   │   ├── taskRelationStore.ts # 任务关联状态 🆕
│   │   ├── viewStore.ts      # 视图设置状态
│   │   └── themeStore.ts     # 主题状态
│   ├── repositories/         # 数据访问层
│   ├── types/                # TypeScript 类型
│   │   ├── task.ts           # 任务类型
│   │   ├── relation.ts       # 关联类型 🆕
│   │   └── view.ts           # 视图类型
│   └── utils/                # 工具函数
├── dist/                     # Web 构建输出
├── dist-electron/            # Electron 构建输出
└── release/                  # 安装包输出
```

## 快速开始

### 环境要求

- Node.js >= 18
- npm >= 9

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
# 启动 Web 开发服务器
npm run dev

# 启动 Electron 开发模式
npm run electron:dev
```

### 构建打包

```bash
# 构建 Windows 版本
npm run electron:build:win

# 构建 macOS 版本
npm run electron:build:mac

# 构建所有平台
npm run electron:build:all
```

构建产物位于 `release/` 目录。

## 架构设计

### 仓库模式

数据访问通过仓库接口抽象，支持多种存储后端：

```typescript
interface TaskRepository {
  getAll(): Task[]
  getById(id: string): Task | undefined
  save(task: Task): Task
  delete(id: string): void
}

interface TaskRelationRepository {
  getAll(): TaskRelation[]
  getByTaskId(taskId: string): TaskRelation[]
  save(relation: TaskRelation): TaskRelation
  delete(id: string): void
}
```

- **LocalStorage 仓库** - Web 浏览器降级方案
- **Electron IPC 仓库** - 通过 IPC 调用主进程 SQLite

### IPC 通信

渲染进程与主进程通过 `contextBridge` 安全通信：

```typescript
// 渲染进程调用
const tasks = await window.electronAPI.task.getAll()
await window.electronAPI.task.save(task)
const relations = await window.electronAPI.relation.getAll()
await window.electronAPI.relation.save(relation)
```

### 数据库表结构

| 表名 | 说明 |
|------|------|
| tasks | 任务主表 |
| categories | 分类表 |
| tags | 标签表 |
| subtasks | 子任务表 |
| task_tags | 任务-标签关联表 |
| task_relations | 任务关联关系表 🆕 |
| settings | 应用设置（含主题配置） |
| kanban_boards | 看板配置表 |
| kanban_swimlanes | 看板泳道表 |

### 任务关联关系

支持两种关联类型：

- **dependency** - 依赖关系：A 完成后 B 才能开始
- **blocking** - 阻塞关系：A 阻塞 B 的进行

```typescript
interface TaskRelation {
  id: string
  sourceTaskId: string      // 源任务 ID
  targetTaskId: string      // 目标任务 ID
  relationType: 'dependency' | 'blocking'
  createdAt: string
  updatedAt: string
}
```

### 视图系统

应用支持 7 种视图模式：

| 视图 | 说明 | 特性 |
|------|------|------|
| 列表 | 传统列表展示 | 分组、排序、筛选 |
| 树形 | 层级结构展示 | 基于关联关系、展开/折叠、分组 |
| 看板 | 拖拽式看板 | 自定义看板、泳道、WIP 限制 |
| 日历 | 按日期查看 | 月/周/日视图、拖拽调整 |
| 卡片 | 瀑布流布局 | 卡片尺寸、封面图 |
| 甘特图 | 时间线视图 | 任务进度、依赖关系 |
| 思维导图 | 可视化结构 | 多种布局、全屏模式、关联显示 |

### 主题系统

应用支持完整的主题定制功能：

**外观模式**
- 浅色模式 - 固定使用浅色主题
- 深色模式 - 固定使用深色主题
- 跟随系统 - 自动跟随操作系统设置

**预设主题**
- 默认（紫色）- 经典紫粉渐变
- 海洋 - 清新蓝色系
- 森林 - 自然绿色系
- 暖橙 - 温暖橙红系

**自定义主题**
- 可自定义 25+ CSS 变量
- 支持背景、文字、边框、渐变、分类颜色等
- 主题配置自动持久化

**导入导出**
- 导出当前主题为 JSON 文件
- 从 JSON 文件导入主题配置

主题相关文件：
- `src/stores/themeStore.ts` - 主题状态管理
- `src/utils/theme.ts` - 主题工具函数
- `src/types/theme.ts` - 主题类型定义
- `src/assets/styles/themes/` - 主题 CSS 文件

## 开发指南

### 代码规范

- 使用 TypeScript 编写，确保类型安全
- 组件采用 `<script setup>` 语法
- 遵循 Vue 3 组合式 API 最佳实践

### 提交规范

```
feat: 新功能
fix: 修复 Bug
docs: 文档更新
style: 代码格式
refactor: 重构
test: 测试相关
chore: 构建/工具相关
```

## 常见问题

### 原生模块编译失败

如果 `better-sqlite3` 编译失败，尝试：

```bash
npm rebuild better-sqlite3
# 或
npx @electron/rebuild -f -w better-sqlite3
```

### Electron 主进程 ESM 导入

使用默认导入方式：

```typescript
import pkg from 'module'
const { named } = pkg
```

## 参与贡献

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'feat: 添加某某功能'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 许可证

[MIT License](LICENSE)

## 联系方式

如有问题或建议，欢迎提交 [Issue](https://gitee.com/roboslyq/superpowers-todo/issues)。