从零构建 Web 应用

帮我初始化一个 Next.js 项目，要求：
- 使用 TypeScript
- 使用 App Router
- 使用 Tailwind CSS
- 项目名称为 todo-app
- 不需要 ESLint（后面手动配置）

检查项目结构是否正确，确认 TypeScript 和 Tailwind CSS 已正确配置，然后运行 dev server 测试一下

安装 Prisma 并配置 SQLite 数据库。创建以下数据模型：
1. User 模型：id、email（唯一）、name、password（哈希后存储）、createdAt
2. Todo 模型：id、title、description（可选）、completed（布尔值，默认false）、createdAt、updatedAt、userId（关联 User）

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  password  String
  createdAt DateTime @default(now())
  todos     Todo[]
}

model Todo {
  id          String   @id @default(cuid())
  title       String
  description String?
  completed   Boolean  @default(false)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  userId      String
  user        User     @relation(fields: [userId], references: [id])
}

创建一个 lib/prisma.ts 工具文件，使用单例模式确保在开发环境中不会创建过多的 Prisma Client 实例

import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const prisma = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = prisma;
}

实现用户认证系统，要求：
1. 使用 bcryptjs 对密码进行哈希处理
2. 使用 jose 库实现 JWT token
3. 创建 Server Actions：注册（signup）和登录（login）
4. 创建一个认证中间件，验证请求中的 JWT token
5. 将 token 存储在 httpOnly cookie 中
6. 创建注册页面 /signup 和登录页面 /login

import bcrypt from "bcryptjs";
import { SignJWT, jwtVerify } from "jose";

const secret = new TextEncoder().encode(process.env.JWT_SECRET || "your-secret-key");

export async function hashPassword(password: string) {
  return bcrypt.hash(password, 12);
}

export async function verifyPassword(password: string, hashedPassword: string) {
  return bcrypt.compare(password, hashedPassword);
}

export async function createToken(userId: string) {
  return new SignJWT({ userId })
    .setProtectedHeader({ alg: "HS256" })
    .setExpirationTime("7d")
    .sign(secret);
}

export async function verifyToken(token: string) {
  const { payload } = await jwtVerify(token, secret);
  return payload as { userId: string };
}

创建注册和登录页面，使用 Tailwind CSS 做样式，要求：
- 简洁的表单设计，居中显示
- 包含表单验证（邮箱格式、密码长度）
- 注册成功后自动跳转到登录页
- 登录成功后跳转到主页
- 显示错误信息（如邮箱已存在、密码错误等）

登录页面的样式太朴素了，加一些视觉元素：
- 添加一个应用 logo 或标题
- 使用卡片式布局加阴影
- 在表单下方添加"还没有账号？去注册"的链接

创建 Todo 的 CRUD 功能，包括：

1. 主页（/dashboard）展示当前用户的所有 Todo，按创建时间倒序
2. 新建 Todo 的表单（可以是模态框或内联表单）
3. 编辑 Todo（点击可编辑标题和描述）
4. 删除 Todo（带确认提示）
5. 切换完成状态（点击复选框）
6. 使用 Server Actions 处理所有数据操作
7. 添加加载状态和乐观更新

"use server";

import { prisma } from "@/lib/prisma";
import { getCurrentUser } from "@/lib/auth";
import { revalidatePath } from "next/cache";

export async function createTodo(formData: FormData) {
  const user = await getCurrentUser();
  if (!user) throw new Error("未登录");

  const title = formData.get("title") as string;
  const description = formData.get("description") as string;

  await prisma.todo.create({
    data: {
      title,
      description: description || null,
      userId: user.id,
    },
  });

  revalidatePath("/dashboard");
}

export async function toggleTodo(todoId: string) {
  const user = await getCurrentUser();
  if (!user) throw new Error("未登录");

  const todo = await prisma.todo.findUnique({ where: { id: todoId } });
  if (!todo || todo.userId !== user.id) throw new Error("无权操作");

  await prisma.todo.update({
    where: { id: todoId },
    data: { completed: !todo.completed },
  });

  revalidatePath("/dashboard");
}

export async function deleteTodo(todoId: string) {
  const user = await getCurrentUser();
  if (!user) throw new Error("未登录");

  await prisma.todo.deleteMany({
    where: { id: todoId, userId: user.id },
  });

  revalidatePath("/dashboard");
}

为 Dashboard 页面添加以下优化：
1. Todo 列表为空时显示引导提示
2. 添加筛选功能：全部 / 待完成 / 已完成
3. 显示完成进度（例如"已完成 3/10"）
4. 添加键盘快捷键：Enter 快速创建，Escape 取消编辑
5. 添加简单的动画过渡效果

在 Dashboard 顶部添加搜索框，支持按标题和描述搜索 Todo，使用防抖处理

为 Todo 添加标签（Tag）功能：
1. 在 Prisma schema 中添加 Tag 模型和多对多关系
2. 创建/编辑 Todo 时可以选择或新建标签
3. 支持按标签筛选 Todo
4. 标签用不同颜色显示

确保整个应用在移动端也有良好的体验，检查所有页面的响应式布局，特别是：
- 导航栏在移动端改为汉堡菜单
- Todo 列表在小屏幕上改为单列
- 表单在移动端适当调整间距

为这个项目添加测试：
1. 安装 Jest 和 React Testing Library
2. 为认证相关的工具函数编写单元测试
3. 为 Todo 的 Server Actions 编写集成测试
4. 为登录表单组件编写一个基本的渲染测试

// 不推荐 - 一次性给出过多需求
帮我创建一个完整的 Todo 应用，包含用户认证、CRUD、标签、搜索、
响应式设计、暗色模式、导出功能、通知系统...

// 推荐 - 分步骤逐步构建
第一步：帮我初始化 Next.js 项目并配置好 Tailwind CSS
第二步：设置 Prisma 和数据库模型
第三步：实现用户注册和登录
...

运行 npm run dev 后出现这个错误：
[粘贴错误信息]

请分析原因并修复

你用的是客户端组件来获取数据，但我希望用 Server Component 直接在服务端获取，
这样首屏加载更快。请重构 Dashboard 页面

# 项目规范

## 技术栈
- Next.js 15 (App Router)
- TypeScript (strict mode)
- Prisma + SQLite
- Tailwind CSS

## 代码规范
- 使用 Server Components 优先，只在需要交互时使用 Client Components
- Server Actions 放在 app/actions/ 目录下
- 工具函数放在 lib/ 目录下
- 所有数据库操作必须检查用户权限

## 命名规范
- 组件使用 PascalCase
- 文件名使用 kebab-case
- Server Actions 使用 camelCase