提醒事项 · Reminders

Author: Henry empowered by AI

一个简洁、耐看的本地提醒事项工具。纯前端，所有数据存在浏览器本地 IndexedDB。

功能

• ✅ 拖拽排序（左侧每条事项 hover 时显示拖动手柄）
• 🎨 8 种柔和颜色标签，可随时切换
• 📝 自定义标题 + 多行备注
• 🔗 添加/打开链接
• 📎 拖拽或点击上传附件，支持下载
• ⏳ 全部 / 进行中 / 已完成 三种过滤
• 💾 数据保存在 IndexedDB（包含附件二进制）

技术栈

类别	选用
框架	React 18 + TypeScript + Vite
样式	TailwindCSS（自定义 ink 调色板 + 柔光阴影）
拖拽	@dnd-kit
状态	Zustand
存储	Dexie (IndexedDB)
图标	Lucide

启动

cd c:\GitHub\reminders-app
npm install
npm run dev

默认在 http://localhost:5174 打开。

打包

npm run build
npm run preview

dist/ 即为静态产物，可直接放到任意静态服务器（Netlify / Vercel / Nginx）。

目录

src/
├── components/
│   ├── ColorPicker.tsx     # 颜色选择小圆点
│   ├── ReminderItem.tsx    # 列表行（拖拽 + 完成 + 标题）
│   └── DetailPanel.tsx     # 右侧详情：备注 / 链接 / 附件
├── App.tsx                 # 双栏布局 + DnD 上下文
├── db.ts                   # Dexie schema（reminders + attachments）
├── store.ts                # Zustand store（CRUD + 持久化）
├── types.ts                # 颜色定义 + Reminder 接口
├── styles.css              # Tailwind 入口
└── main.tsx

后续可扩展

• 截止日期 + 桌面通知（Notification API）
• 标签 / 分组
• 全文搜索
• 导出 / 导入 JSON 备份
• PWA 离线
• 多端同步（接入 Supabase / Firebase）