项目任务看板（Kanban）

你是一位资深全栈工程师，擅长 Next.js 16、Tailwind CSS 4、Supabase 和拖拽交互开发。

请为 {company_name} 构建一个自托管的项目任务看板系统（类似 Trello/Asana），支持 {num_projects} 个项目看板和 {team_size} 人团队协作。主品牌色为 {primary_color}。

## 角色与背景
- 你是一位资深全栈工程师，擅长 Next.js 16、Tailwind CSS 4、Supabase 和拖拽交互。

## 项目目标
- 构建一个自托管的项目任务看板系统，支持多项目、多成员协作，替代 Trello/Asana。

## 目标用户
- {company_name} 的团队，最多 {team_size} 人，需要管理 {num_projects} 个项目。

## 核心体验与界面
- 项目列表页：展示所有项目看板，支持创建、编辑、归档。
- 看板视图：每个看板包含可自定义的列（默认：待办、进行中、审核、完成），支持拖拽排序和列管理。
- 任务卡片：包含标题、描述（Markdown）、负责人、截止日期、优先级（紧急/高/中/低，颜色区分）、标签、附件、子任务清单（含进度条）、自动编号。
- 拖拽交互：使用 @dnd-kit 实现卡片在列间和列内拖拽，拖拽后通过 Supabase Realtime 实时同步。
- 团队管理：邀请成员（最多 {team_size} 人），角色分管理员、成员、观察者，集成 Supabase Auth（邮箱密码，可选 Google OAuth）。
- 评论与活动日志：任务评论支持 @提及，自动记录活动日志。
- 通知：截止日期提醒、指派通知、@提及通知，通知中心显示未读计数。
- 筛选与搜索：全局搜索任务，按负责人、优先级、标签、截止日期筛选，可保存常用筛选。
- 数据分析仪表盘：本周完成任务数、逾期数、成员工作量分布、团队速度趋势、优先级占比。
- 日历视图：按截止日期展示任务，支持拖拽修改日期。
- 我的任务视图：跨项目汇总当前用户任务，按状态和日期分组，快速跳转看板。

## 主要工作流程
1. 用户登录后进入项目列表，选择或创建项目看板。
2. 在看板中创建列和任务卡片，拖拽卡片改变状态或排序。
3. 团队成员实时看到更新，可评论、指派、设置优先级和截止日期。
4. 通过通知和仪表盘跟踪进度。

## 业务规则
- 项目成员只能访问所属项目数据。
- 管理员可管理成员和删除资源，成员可编辑任务，观察者只读。
- 活动日志只追加不可修改。
- 所有外键字段建立索引。

## 设计方向
- 主色调 {primary_color}，专业简洁。
- 响应式：桌面端看板视图，移动端列表视图。
- 任务卡片紧凑显示标题、头像、优先级色条、标签、截止日期、清单进度。
- 列头部显示任务计数，空列显示引导文案。
- 加载骨架屏，支持深色模式。

## 构建方式
- 使用 Next.js 16 (App Router) + TypeScript + Tailwind CSS 4。
- 后端使用 Supabase（Postgres + Auth + Realtime）。
- 拖拽使用 @dnd-kit，日期处理使用 date-fns。
- 附件存储到 Supabase Storage。
- 先输出简短实施计划，优先实现核心看板功能（项目、列、任务、拖拽、团队），再逐步添加其他功能。
- 提供完整可运行代码，包含 Supabase 客户端封装、拖拽逻辑、核心页面和组件。
- 确保代码可运行，并说明如何运行和测试。

## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。