MultiPlanner

一个基于 React + TypeScript + Vite 的多项目任务看板应用，支持侧边栏项目管理、页签化工作区、拖拽任务流转、子任务与重复规则。

功能概览

• 多项目管理：创建、编辑、归档、删除项目
• 页签工作区：一个项目一个页签，可快速切换与关闭
• 看板流转：TODO / IN_PROGRESS / DONE 三列管理，支持拖拽排序与跨列移动
• 任务编辑：支持标题、描述、截止日期、子任务
• 重复任务：支持每天、工作日、每周、每月、每年规则
• 子任务联动：子任务全部完成时可自动将任务置为完成
• 任务归档与回收站：支持恢复与永久删除
• 主题切换：内置多套主题，支持在设置中切换

技术栈

• React 18
• TypeScript 5
• Vite 5
• Zustand（状态管理）
• Tailwind CSS + shadcn/ui（界面样式与组件）

快速开始

1. 安装依赖

npm install

2. 启动开发环境

npm run dev

默认会启动在本地 Vite 开发端口（通常为 http://localhost:5173）。

3. 构建生产版本

npm run build

4. 本地预览构建产物

npm run preview

项目结构

src/
  components/         # 页面与业务组件（侧边栏、看板、任务卡、页签工作区）
  stores/             # Zustand 状态（数据与页签管理）
  data/               # 初始化种子数据
  lib/                # 主题、重复规则、工具函数
  types.ts            # 核心类型定义

数据与状态说明

• 初始化数据来自 src/data/seed.ts（包含一个引导用 Dummy 项目）
• 主题设置会持久化到 localStorage（key: multi_planner_settings）
• 项目与任务目前为运行时内存态，刷新页面后会回到初始种子数据
• 重复任务重置逻辑会在应用可见时与定时器中自动执行

后续可扩展方向

• 增加项目与任务的本地持久化（localStorage / IndexedDB）
• 增加用户身份与云端同步
• 增加筛选、搜索、标签与优先级
• 增加单元测试与端到端测试