Claude Code实战：从零构建完整项目

# 原生安装器（推荐）
curl -fsSL https://claude.ai/install.sh | bash

# 或通过 npm
npm install -g @anthropic-ai/claude-code

# 在空目录中启动
mkdir task-manager && cd task-manager
claude

# CLAUDE.md - Task Manager 项目

## 项目概述
全栈任务管理应用，前端 React + TypeScript，后端 Python FastAPI。

## 技术栈
- Frontend: React 18, TypeScript 5, Vite, TailwindCSS
- Backend: Python 3.12, FastAPI, SQLAlchemy 2.0, Alembic
- Database: PostgreSQL 16
- Testing: Pytest (backend), Vitest (frontend)

## 代码规范
- Python: 使用 Ruff 格式化，类型注解必填
- TypeScript: 严格模式，使用 ESLint + Prettier
- 提交信息：Conventional Commits 格式

## 常用命令
- `cd backend && uvicorn app.main:app --reload` - 启动后端
- `cd frontend && npm run dev` - 启动前端
- `cd backend && pytest -v` - 运行后端测试
- `cd frontend && npm test` - 运行前端测试

## 架构约定
- API 路由定义在 backend/app/routers/
- 数据模型在 backend/app/models/
- 前端组件遵循 Feature-based 目录结构

[Plan Mode] 我需要一个任务管理 API，支持以下功能：
1. CRUD 操作（创建、读取、更新、删除任务）
2. 任务状态流转（待办 → 进行中 → 已完成）
3. 按优先级和状态筛选
4. 用户认证（JWT）
5. 前端看板视图

请分析技术需求，列出实现计划，但不要修改任何文件。

# backend/app/main.py - Claude 生成的项目入口
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from app.routers import tasks, auth
from app.database import engine
from app import models

models.Base.metadata.create_all(bind=engine)

app = FastAPI(title="Task Manager API", version="1.0.0")

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

app.include_router(auth.router, prefix="/api/auth", tags=["auth"])
app.include_router(tasks.router, prefix="/api/tasks", tags=["tasks"])

# backend/app/models/task.py - 数据模型
from sqlalchemy import Column, Integer, String, Enum, ForeignKey, DateTime
from sqlalchemy.sql import func
from app.database import Base
import enum

class TaskStatus(str, enum.Enum):
    TODO = "todo"
    IN_PROGRESS = "in_progress"
    DONE = "done"

class TaskPriority(str, enum.Enum):
    LOW = "low"
    MEDIUM = "medium"
    HIGH = "high"

class Task(Base):
    __tablename__ = "tasks"

    id = Column(Integer, primary_key=True, index=True)
    title = Column(String(200), nullable=False)
    description = Column(String(1000))
    status = Column(Enum(TaskStatus), default=TaskStatus.TODO)
    priority = Column(Enum(TaskPriority), default=TaskPriority.MEDIUM)
    owner_id = Column(Integer, ForeignKey("users.id"))
    created_at = Column(DateTime(timezone=True), server_default=func.now())
    updated_at = Column(DateTime(timezone=True), onupdate=func.now())

// frontend/src/features/tasks/TaskBoard.tsx - 看板组件
import { useState, useEffect } from 'react';
import { TaskColumn } from './TaskColumn';
import { TaskCard } from './TaskCard';
import { useTasks } from '../../hooks/useTasks';
import type { Task, TaskStatus } from '../../types/task';

const COLUMNS: TaskStatus[] = ['todo', 'in_progress', 'done'];

export const TaskBoard = () => {
  const { tasks, updateTask, isLoading } = useTasks();

  const handleDragEnd = async (taskId: number, newStatus: TaskStatus) => {
    await updateTask(taskId, { status: newStatus });
  };

  if (isLoading) return <div className="loading-spinner" />;

  return (
    <div className="grid grid-cols-3 gap-6 p-6">
      {COLUMNS.map(status => (
        <TaskColumn
          key={status}
          status={status}
          tasks={tasks.filter(t => t.status === status)}
          onDrop={handleDragEnd}
        />
      ))}
    </div>
  );
};

实现"创建任务"的完整 Vertical Slice：
1. 数据库迁移（Alembic）
2. API 端点 POST /api/tasks
3. 请求/响应 Schema（Pydantic）
4. 前端表单组件
5. 对应的单元测试

backend/
├── alembic/versions/001_create_tasks.py   # 数据库迁移
├── app/schemas/task.py                     # Pydantic Schema
├── app/routers/tasks.py                    # API 路由
└── tests/test_tasks.py                     # 后端测试

frontend/
├── src/features/tasks/CreateTaskForm.tsx   # 表单组件
├── src/api/tasks.ts                        # API 调用层
└── src/features/tasks/__tests__/           # 前端测试

# 启动时开启
claude --auto-accept

# 或在会话中动态切换
/auto-accept on

# backend/tests/test_tasks.py - Claude 自动生成
import pytest
from httpx import AsyncClient
from app.main import app
from app.models.task import TaskStatus, TaskPriority

@pytest.fixture
async def client():
    async with AsyncClient(app=app, base_url="http://test") as ac:
        yield ac

@pytest.fixture
async def auth_headers(client):
    response = await client.post("/api/auth/register", json={
        "email": "test@example.com",
        "password": "securepassword123"
    })
    token = response.json()["access_token"]
    return {"Authorization": f"Bearer {token}"}

class TestCreateTask:
    async def test_create_task_success(self, client, auth_headers):
        response = await client.post("/api/tasks", json={
            "title": "完成项目文档",
            "priority": "high"
        }, headers=auth_headers)
        assert response.status_code == 201
        data = response.json()
        assert data["title"] == "完成项目文档"
        assert data["status"] == "todo"
        assert data["priority"] == "high"

    async def test_create_task_missing_title(self, client, auth_headers):
        response = await client.post("/api/tasks", json={
            "priority": "low"
        }, headers=auth_headers)
        assert response.status_code == 422

    async def test_create_task_unauthorized(self, client):
        response = await client.post("/api/tasks", json={
            "title": "未授权测试"
        })
        assert response.status_code == 401

// frontend/src/features/tasks/__tests__/CreateTaskForm.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { CreateTaskForm } from '../CreateTaskForm';
import { vi } from 'vitest';

describe('CreateTaskForm', () => {
  const mockOnSubmit = vi.fn();

  beforeEach(() => {
    mockOnSubmit.mockClear();
  });

  it('should render all form fields', () => {
    render(<CreateTaskForm onSubmit={mockOnSubmit} />);
    expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/priority/i)).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /create/i })).toBeInTheDocument();
  });

  it('should validate required fields', async () => {
    render(<CreateTaskForm onSubmit={mockOnSubmit} />);
    fireEvent.click(screen.getByRole('button', { name: /create/i }));
    await waitFor(() => {
      expect(screen.getByText(/title is required/i)).toBeInTheDocument();
    });
    expect(mockOnSubmit).not.toHaveBeenCalled();
  });

  it('should submit valid form data', async () => {
    render(<CreateTaskForm onSubmit={mockOnSubmit} />);
    fireEvent.change(screen.getByLabelText(/title/i), {
      target: { value: '新任务' }
    });
    fireEvent.click(screen.getByRole('button', { name: /create/i }));
    await waitFor(() => {
      expect(mockOnSubmit).toHaveBeenCalledWith({
        title: '新任务',
        priority: 'medium'
      });
    });
  });
});

/agents create test-expert "你是一个测试专家。专注于：
1. 分析代码覆盖率缺口
2. 生成边界条件测试
3. 确保错误路径都有覆盖
4. 不要修改业务代码，只编写测试文件"

测试 test_create_task_success 失败了，错误信息是：
AssertionError: assert 200 == 201

请帮我调试：
1. 检查 tasks router 中 create_task 的返回状态码
2. 检查 Schema 定义是否有遗漏
3. 修复问题并重新运行测试

请审查当前分支所有的改动，关注：
1. 安全性：SQL 注入、XSS、认证绕过
2. 性能：N+1 查询、不必要的循环
3. 规范：是否符合 CLAUDE.md 中的约定
4. 测试：是否有未覆盖的关键路径

为这个项目生成 Docker 部署配置：
1. 后端 Dockerfile（多阶段构建）
2. 前端 Dockerfile（Nginx 静态部署）
3. docker-compose.yml（含 PostgreSQL）
4. 环境变量模板 .env.example

运行完整的部署前检查：后端 pytest + mypy + ruff，前端 vitest + tsc + eslint。
汇总结果，标记任何需要修复的问题。