Kimi K3 + 全栈开发实战：从原型到部署的 AI 协作工作流（2026）

我正在开发一个全栈待办应用，叫 TaskFlow。

## 核心功能
- 用户可以注册/登录
- 创建、编辑、删除待办任务
- 任务支持分类（工作/个人/学习）
- 拖拽排序
- 任务搜索和筛选

## 技术栈
我计划使用 Next.js 14 + Supabase + Tailwind CSS。

请帮我完成以下工作：
1. 梳理完整的功能需求列表（按优先级 P0/P1/P2 分级）
2. 设计数据库表结构（PostgreSQL，给出完整的 DDL）
3. 给出项目的目录结构建议
4. 列出开发阶段和每个阶段需要调用的 Supabase API

-- 用户表（由 Supabase Auth 自动管理，这里不用建）
-- 但我们需要一个 public.profiles 表扩展用户信息

CREATE TABLE public.profiles (
  id UUID REFERENCES auth.users(id) PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- 任务表
CREATE TABLE public.tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  category TEXT CHECK (category IN ('work', 'personal', 'study')) DEFAULT 'personal',
  priority INTEGER CHECK (priority BETWEEN 1 AND 5) DEFAULT 3,
  is_completed BOOLEAN DEFAULT FALSE,
  due_date DATE,
  position INTEGER DEFAULT 0, -- 用于排序
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- 索引
CREATE INDEX idx_tasks_user_id ON public.tasks(user_id);
CREATE INDEX idx_tasks_category ON public.tasks(user_id, category);
CREATE INDEX idx_tasks_due_date ON public.tasks(user_id, due_date);

-- 实时订阅（Supabase Realtime）
ALTER PUBLICATION supabase_realtime ADD TABLE public.tasks;

-- RLS 策略：用户只能访问自己的任务
ALTER TABLE public.tasks ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view own tasks"
  ON public.tasks FOR SELECT
  USING (auth.uid() = user_id);

CREATE POLICY "Users can create own tasks"
  ON public.tasks FOR INSERT
  WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update own tasks"
  ON public.tasks FOR UPDATE
  USING (auth.uid() = user_id);

CREATE POLICY "Users can delete own tasks"
  ON public.tasks FOR DELETE
  USING (auth.uid() = user_id);

请帮我完成以下步骤，给出完整的命令和代码：

1. 使用 create-next-app 初始化 Next.js 14 项目（TypeScript, App Router, Tailwind CSS）
2. 安装 Supabase 客户端库
3. 创建 .env.local 配置文件模板
4. 创建 lib/supabase.ts（客户端和服务端 Supabase 实例）
5. 在 Supabase SQL Editor 中执行数据库初始化脚本（我在阶段一已经设计好了 DDL）

对每一步给出详细的操作说明。

为 TaskFlow 实现完整的认证系统。

## 要求
- 使用 Supabase Auth
- 注册页面：邮箱 + 密码 + 用户名
- 登录页面：邮箱 + 密码
- 登录后自动创建 profiles 记录
- 使用 Next.js Middleware 保护需要登录的路由
- 使用 Server Component 在服务端判断登录状态
- 登录/登出按钮放在顶部导航栏

## 文件清单
请创建以下文件：
- app/auth/signup/page.tsx（注册页）
- app/auth/login/page.tsx（登录页）
- app/auth/callback/route.ts（OAuth 回调）
- middleware.ts（路由保护）
- components/Navbar.tsx（导航栏）
- components/AuthForm.tsx（登录/注册表单组件）

请逐个文件输出完整代码。

为 TaskFlow 实现任务管理功能。

## API Routes（Next.js Route Handlers）
1. GET /api/tasks — 获取用户的所有任务（支持 category、search、is_completed 筛选）
2. POST /api/tasks — 创建新任务
3. PATCH /api/tasks/[id] — 更新任务（标题、分类、优先级、状态）
4. DELETE /api/tasks/[id] — 删除任务
5. PATCH /api/tasks/reorder — 批量更新任务排序

## 前端组件
1. components/TaskList.tsx — 任务列表（支持虚拟滚动，因为任务可能很多）
2. components/TaskItem.tsx — 单个任务（支持内联编辑、勾选完成、拖拽手柄）
3. components/TaskForm.tsx — 新建/编辑任务表单（Modal 形式）
4. components/TaskFilter.tsx — 搜索框 + 分类筛选 + 状态筛选
5. components/TaskStats.tsx — 简单的统计（总数、已完成、各分类数量）

## 技术要点
- 使用 Server Component 做数据获取，Client Component 做交互
- 使用 SWR 做客户端数据缓存和乐观更新
- API Routes 中使用 RLS（Row Level Security），确保用户只能操作自己的数据
- 搜索支持任务标题模糊匹配（使用 Supabase 的 ilike）

// app/api/tasks/route.ts
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const supabase = createRouteHandlerClient({ cookies });
  const { searchParams } = new URL(request.url);

  const category = searchParams.get('category');
  const search = searchParams.get('search');
  const status = searchParams.get('status');

  // 获取当前用户（RLS 会自动根据 user_id 过滤）
  const { data: { session } } = await supabase.auth.getSession();
  if (!session) {
    return NextResponse.json({ error: '未登录' }, { status: 401 });
  }

  let query = supabase
    .from('tasks')
    .select('*')
    .order('position', { ascending: true });

  // 分类筛选
  if (category && category !== 'all') {
    query = query.eq('category', category);
  }

  // 标题模糊搜索
  if (search) {
    query = query.ilike('title', `%${search}%`);
  }

  // 状态筛选
  if (status === 'completed') {
    query = query.eq('is_completed', true);
  } else if (status === 'active') {
    query = query.eq('is_completed', false);
  }

  const { data: tasks, error } = await query;

  if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }

  return NextResponse.json(tasks);
}

// hooks/useTasks.ts
import useSWR from 'swr';
import { Task } from '@/types';

const fetcher = (url: string) => fetch(url).then(res => res.json());

export function useTasks(filters?: { category?: string; search?: string }) {
  const params = new URLSearchParams(filters as Record<string, string>).toString();
  const { data, error, mutate } = useSWR<Task[]>(
    `/api/tasks?${params}`,
    fetcher
  );

  // 乐观更新：先更新 UI，再发送请求
  const toggleTask = async (taskId: string, completed: boolean) => {
    // 立即更新本地数据
    mutate(
      (tasks) =>
        tasks?.map((t) =>
          t.id === taskId ? { ...t, is_completed: completed } : t
        ),
      false // 不重新验证，等待 API 返回
    );

    // 发送 API 请求
    await fetch(`/api/tasks/${taskId}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ is_completed: completed }),
    });

    // API 成功后重新验证
    mutate();
  };

  return { tasks: data, error, isLoading: !error && !data, toggleTask };
}

为 TaskFlow 实现拖拽排序功能。

## 技术选型
- 使用 @dnd-kit/core + @dnd-kit/sortable
- 拖拽时实时更新 UI（乐观更新）
- 拖拽结束后发送 PATCH /api/tasks/reorder 批量更新位置
- 使用 position 字段（整数）做排序

## 关键要求
1. 处理快速连续拖拽的竞态条件（使用版本号或请求序列号）
2. 拖拽失败时回滚 UI 到原始状态
3. 支持键盘拖拽（无障碍访问）
4. 拖拽动画流畅（60fps）

// 批量更新位置的优化算法
async function reorderTasks(
  tasks: { id: string; position: number }[]
) {
  // 使用请求序列号防止竞态条件
  const sequenceId = Date.now();

  const { error } = await supabase.rpc('reorder_tasks', {
    p_tasks: tasks,
    p_sequence_id: sequenceId
  });

  if (error) {
    // 回滚：重新获取服务端的任务列表
    throw new ReorderError('排序失败，已恢复原始顺序');
  }
}

TaskFlow 开发完成。请帮我准备部署：

1. 生成 Vercel 部署所需的配置（vercel.json、环境变量列表）
2. 创建一个 scripts/seed.ts（数据种子脚本，用于演示）
3. 写一个 README.md（包含项目介绍、本地运行指南、部署步骤）
4. 检查所有文件的 import 路径是否正确
5. 确保所有环境变量的命名与 Vercel 约定一致