跳到主要内容

📋 SimpleTodo - 现代化看板任务管理工具

ZeTodo 界面预览

SimpleTodo 是一个功能强大、界面优雅的看板式任务管理工具，支持多项目管理、拖拽排序、实时协作等功能。基于 React + TypeScript 构建，提供流畅的用户体验。

🚀 项目亮点​

💎 核心特性​

  • 拖拽式操作: 支持卡片在列间拖拽移动，操作直观流畅
  • 多项目支持: 支持多个项目并行管理，一键切换不同工作空间
  • 智能搜索: 支持按标题和描述内容搜索卡片，实时过滤
  • 数据统计: 记录操作历史，显示项目进度和完成率等关键指标
  • 响应式设计: 适配不同屏幕尺寸，支持移动端访问

🎨 用户体验​

  • 现代化界面: 采用 Radix UI 组件库，界面清爽专业
  • 流畅动画: 精心设计的交互动画，提升用户体验
  • 主题定制: 支持深色模式和自定义颜色主题
  • 直观操作: 双击编辑、拖拽移动、快速添加等便捷操作

🛠️ 技术架构​

前端技术栈​

  • 框架: React 18.3.1 + TypeScript
  • 构建工具: Vite 6.3.5
  • UI组件: Radix UI (无障碍、可定制)
  • 拖拽功能: React DnD
  • 样式方案: Tailwind CSS
  • 状态管理: Custom Hooks + LocalStorage

项目架构​

SimpleTodo/
├── src/
│   ├── components/         # 组件目录
│   │   ├── ui/            # 基础UI组件
│   │   ├── KanbanColumn.tsx
│   │   ├── ProjectSelector.tsx
│   │   └── ...
│   ├── hooks/             # 自定义Hooks
│   │   ├── useKanbanStore.ts
│   │   ├── useProjectStore.ts
│   │   └── ...
│   ├── types/
│   │   └── kanban.ts      # 类型定义
│   └── styles/            # 样式文件

🎯 主要功能​

看板管理​

  • ✅ 自定义列管理（添加、编辑、删除）
  • ✅ 卡片拖拽移动和排序
  • ✅ 卡片详情编辑（标题、描述、状态）
  • ✅ 快速添加新卡片
  • ✅ 颜色主题自定义

项目管理​

  • ✅ 多项目并行管理
  • ✅ 项目切换和配置
  • ✅ 默认项目模板
  • ✅ 项目描述和时间追踪

数据功能​

  • ✅ 本地数据持久化 (LocalStorage)
  • ✅ 操作历史记录
  • ✅ 项目统计面板
  • ✅ 数据导出功能
  • ✅ 关键词搜索和筛选

🌟 在线体验​

🚀 快速开始​

环境要求​

  • Node.js >= 16.0.0
  • npm >= 7.0.0

本地运行​

# 克隆项目
git clone https://github.com/heihuzicity-tech/SimpleTodo.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

访问 http://localhost:3000 即可使用。

💾 数据存储​

使用浏览器 LocalStorage 进行数据持久化：

  • 看板数据: kanban-board-{projectId}
  • 活动记录: kanban-activities-{projectId}
  • 项目列表: kanban-projects
  • 当前项目: kanban-current-project

📖 使用指南​

基础操作​

  1. 创建项目: 点击项目选择器创建新的工作空间
  2. 管理看板列: 添加、编辑、删除看板列，设置颜色主题
  3. 操作卡片: 通过拖拽移动卡片，双击编辑详情
  4. 搜索筛选: 使用搜索栏快速定位所需卡片

高级功能​

  1. 数据导出: 通过导出菜单备份项目数据
  2. 活动追踪: 查看所有操作历史和项目进度
  3. 批量操作: 支持多选和批量操作卡片

🔧 自定义扩展​

添加新的卡片属性​

// 在 types/kanban.ts 中扩展 Card 接口
export interface Card {
  // ... 现有属性
  priority?: 'low' | 'medium' | 'high';
  tags?: string[];
}

自定义主题颜色​

// 修改 src/components/ColumnColorPicker.tsx
const colorOptions = [
  { name: 'purple', class: 'bg-purple-100', label: '紫色' },
  // 添加更多颜色选项
];

🤝 贡献指南​

欢迎提交 Issue 和 Pull Request！

  1. Fork 本仓库
  2. 创建特性分支: git checkout -b feature/NewFeature
  3. 提交更改: git commit -m 'Add NewFeature'
  4. 推送分支: git push origin feature/NewFeature
  5. 提交 Pull Request

📜 开源协议​

本项目基于 MIT 许可证开源。

🏷️ 项目标签​

  • 前端开发: React, TypeScript, Vite
  • UI组件: Radix UI, Tailwind CSS
  • 功能特性: 看板管理, 拖拽操作, 项目管理
  • 用户体验: 响应式设计, 现代化界面

💡 用现代化技术栈打造的高效任务管理工具

🌐 在线体验 · 📱 GitHub