Claude Code首次使用指南：十分钟创建完整项目

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'react-hot-toast';

import { AuthProvider } from './contexts/AuthContext';
import { ThemeProvider } from './contexts/ThemeContext';
import { ProtectedRoute } from './components/auth/ProtectedRoute';
import { Layout } from './components/layout/Layout';

// Pages
import { LoginPage } from './pages/auth/LoginPage';
import { RegisterPage } from './pages/auth/RegisterPage';
import { DashboardPage } from './pages/DashboardPage';
import { TasksPage } from './pages/TasksPage';
import { AnalyticsPage } from './pages/AnalyticsPage';
import { SettingsPage } from './pages/SettingsPage';

// React Query client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        <AuthProvider>
          <Router>
            <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
              <Routes>
                {/* 公开路由 */}
                <Route path="/login" element={<LoginPage />} />
                <Route path="/register" element={<RegisterPage />} />
                
                {/* 受保护的路由 */}
                <Route
                  path="/*"
                  element={
                    <ProtectedRoute>
                      <Layout>
                        <Routes>
                          <Route path="/" element={<Navigate to="/dashboard" replace />} />
                          <Route path="/dashboard" element={<DashboardPage />} />
                          <Route path="/tasks" element={<TasksPage />} />
                          <Route path="/analytics" element={<AnalyticsPage />} />
                          <Route path="/settings" element={<SettingsPage />} />
                        </Routes>
                      </Layout>
                    </ProtectedRoute>
                  }
                />
              </Routes>
              
              {/* 全局通知 */}
              <Toaster
                position="top-right"
                toastOptions=
              />
            </div>
          </Router>
        </AuthProvider>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

export default App;

import React, { useState, useMemo } from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
import { MagnifyingGlassIcon, FunnelIcon, PlusIcon } from '@heroicons/react/24/outline';

import { useTaskStore } from '../../stores/taskStore';
import { TaskCard } from './TaskCard';
import { TaskFilters } from './TaskFilters';
import { CreateTaskModal } from './CreateTaskModal';
import { Task, TaskStatus, TaskPriority } from '../../types/task';

interface TaskListProps {
  view?: 'list' | 'board' | 'calendar';
}

export const TaskList: React.FC<TaskListProps> = ({ view = 'list' }) => {
  const {
    tasks,
    loading,
    searchQuery,
    filters,
    updateTask,
    setSearchQuery,
    setFilters,
  } = useTaskStore();

  const [showFilters, setShowFilters] = useState(false);
  const [showCreateModal, setShowCreateModal] = useState(false);

  // 筛选和搜索逻辑
  const filteredTasks = useMemo(() => {
    return tasks.filter(task => {
      // 搜索过滤
      if (searchQuery) {
        const query = searchQuery.toLowerCase();
        if (
          !task.title.toLowerCase().includes(query) &&
          !task.description?.toLowerCase().includes(query) &&
          !task.tags.some(tag => tag.name.toLowerCase().includes(query))
        ) {
          return false;
        }
      }

      // 状态过滤
      if (filters.status.length > 0 && !filters.status.includes(task.status)) {
        return false;
      }

      // 优先级过滤
      if (filters.priority.length > 0 && !filters.priority.includes(task.priority)) {
        return false;
      }

      // 标签过滤
      if (filters.tags.length > 0) {
        const taskTagIds = task.tags.map(tag => tag.id);
        if (!filters.tags.some(tagId => taskTagIds.includes(tagId))) {
          return false;
        }
      }

      // 截止日期过滤
      if (filters.dueDateRange) {
        const taskDueDate = task.dueDate ? new Date(task.dueDate) : null;
        if (!taskDueDate) return false;
        
        if (taskDueDate < filters.dueDateRange.start || taskDueDate > filters.dueDateRange.end) {
          return false;
        }
      }

      return true;
    });
  }, [tasks, searchQuery, filters]);

  // 拖拽处理
  const handleDragEnd = async (result: DropResult) => {
    if (!result.destination) return;

    const { draggableId, destination } = result;
    const taskId = parseInt(draggableId);
    const newStatus = destination.droppableId as TaskStatus;

    await updateTask(taskId, { status: newStatus });
  };

  // 渲染不同视图
  const renderListView = () => (
    <div className="space-y-3">
      {filteredTasks.map((task, index) => (
        <Draggable key={task.id} draggableId={task.id.toString()} index={index}>
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              className={`transition-transform ${snapshot.isDragging ? 'rotate-2 scale-105' : ''}`}
            >
              <TaskCard task={task} />
            </div>
          )}
        </Draggable>
      ))}
    </div>
  );

  const renderBoardView = () => {
    const statusGroups = {
      todo: filteredTasks.filter(task => task.status === 'todo'),
      inProgress: filteredTasks.filter(task => task.status === 'inProgress'),
      completed: filteredTasks.filter(task => task.status === 'completed'),
    };

    return (
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {Object.entries(statusGroups).map(([status, statusTasks]) => (
          <Droppable key={status} droppableId={status}>
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                {...provided.droppableProps}
                className={`bg-gray-50 dark:bg-gray-800 rounded-lg p-4 min-h-[400px] transition-colors ${
                  snapshot.isDraggingOver ? 'bg-blue-50 dark:bg-blue-900/20' : ''
                }`}
              >
                <h3 className="font-semibold text-gray-900 dark:text-white mb-4 capitalize">
                  {status === 'inProgress' ? '进行中' : status === 'todo' ? '待办' : '已完成'}
                  <span className="ml-2 text-sm text-gray-500">({statusTasks.length})</span>
                </h3>
                
                <div className="space-y-3">
                  {statusTasks.map((task, index) => (
                    <Draggable key={task.id} draggableId={task.id.toString()} index={index}>
                      {(provided, snapshot) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          className={`transition-transform ${
                            snapshot.isDragging ? 'rotate-2 scale-105 z-50' : ''
                          }`}
                        >
                          <TaskCard task={task} compact />
                        </div>
                      )}
                    </Draggable>
                  ))}
                </div>
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        ))}
      </div>
    );
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
      </div>
    );
  }

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <div className="space-y-6">
        {/* 搜索和过滤栏 */}
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1 relative">
            <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="搜索任务、标签或内容..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg 
                         bg-white dark:bg-gray-800 text-gray-900 dark:text-white
                         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                         placeholder-gray-500 dark:placeholder-gray-400"
            />
          </div>
          
          <div className="flex gap-2">
            <button
              onClick={() => setShowFilters(!showFilters)}
              className={`flex items-center gap-2 px-4 py-2.5 border rounded-lg transition-colors ${
                showFilters
                  ? 'bg-blue-50 border-blue-300 text-blue-700 dark:bg-blue-900/20 dark:border-blue-600 dark:text-blue-300'
                  : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700'
              }`}
            >
              <FunnelIcon className="w-5 h-5" />
              筛选
            </button>
            
            <button
              onClick={() => setShowCreateModal(true)}
              className="flex items-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 
                         text-white rounded-lg transition-colors"
            >
              <PlusIcon className="w-5 h-5" />
              新建任务
            </button>
          </div>
        </div>

        {/* 过滤器面板 */}
        {showFilters && (
          <TaskFilters
            filters={filters}
            onFiltersChange={setFilters}
            onClose={() => setShowFilters(false)}
          />
        )}

        {/* 任务内容 */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          {filteredTasks.length === 0 ? (
            <div className="text-center py-12">
              <div className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600">
                <svg fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                {searchQuery || Object.values(filters).some(f => f.length > 0)
                  ? '没有找到匹配的任务'
                  : '还没有任务'}
              </h3>
              <p className="text-gray-500 dark:text-gray-400 mb-4">
                {searchQuery || Object.values(filters).some(f => f.length > 0)
                  ? '尝试调整搜索条件或筛选器'
                  : '创建你的第一个任务来开始管理待办事项'}
              </p>
              <button
                onClick={() => setShowCreateModal(true)}
                className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 
                           text-white rounded-lg transition-colors"
              >
                <PlusIcon className="w-5 h-5" />
                创建任务
              </button>
            </div>
          ) : (
            <>
              {view === 'list' && renderListView()}
              {view === 'board' && renderBoardView()}
            </>
          )}
        </div>

        {/* 创建任务模态框 */}
        <CreateTaskModal
          isOpen={showCreateModal}
          onClose={() => setShowCreateModal(false)}
        />
      </div>
    </DragDropContext>
  );
};

import { Request, Response, NextFunction } from 'express';
import { TaskService } from '../services/TaskService';
import { CreateTaskDTO, UpdateTaskDTO, TaskQueryParams } from '../types/task';
import { AuthenticatedRequest } from '../types/auth';
import { ValidationError } from '../utils/errors';

export class TaskController {
  private taskService: TaskService;

  constructor() {
    this.taskService = new TaskService();
  }

  /**
   * 获取任务列表
   */
  getTasks = async (req: AuthenticatedRequest, res: Response, next: NextFunction) => {
    try {
      const userId = req.user!.id;
      const query: TaskQueryParams = {
        page: parseInt(req.query.page as string) || 1,
        limit: parseInt(req.query.limit as string) || 20,
        search: req.query.search as string,
        status: req.query.status as string,
        priority: req.query.priority as string,
        tags: req.query.tags as string,
        sortBy: req.query.sortBy as string || 'createdAt',
        sortOrder: (req.query.sortOrder as string) || 'desc',
        dueDateFrom: req.query.dueDateFrom as string,
        dueDateTo: req.query.dueDateTo as string,
      };

      const result = await this.taskService.getTasks(userId, query);

      res.json({
        success: true,
        data: result.tasks,
        pagination: {
          page: result.page,
          limit: result.limit,
          total: result.total,
          totalPages: result.totalPages,
        },
      });
    } catch (error) {
      next(error);
    }
  };

  /**
   * 获取单个任务
   */
  getTask = async (req: AuthenticatedRequest, res: Response, next: NextFunction) => {
    try {
      const userId = req.user!.id;
      const taskId = parseInt(req.params.id);

      if (isNaN(taskId)) {
        throw new ValidationError('无效的任务ID');
      }

      const task = await this.taskService.getTaskById(taskId, userId);

      if (!task) {
        return res.status(404).json({
          success: false,
          message: '任务不存在',
        });
      }

      res.json({
        success: true,
        data: task,
      });
    } catch (error) {
      next(error);
    }
  };

  /**
   * 创建任务
   */
  createTask = async (req: AuthenticatedRequest, res: Response, next: NextFunction) => {
    try {
      const userId = req.user!.id;
      const taskData: CreateTaskDTO = {
        ...req.body,
        userId,
      };

      // 验证必填字段
      if (!taskData.title?.trim()) {
        throw new ValidationError('任务标题不能为空');
      }

      // 验证截止日期
      if (taskData.dueDate) {
        const dueDate = new Date(taskData.dueDate);
        if (isNaN(dueDate.getTime())) {
          throw new ValidationError('无效的截止日期格式');
        }
        if (dueDate < new Date()) {
          throw new ValidationError('截止日期不能早于当前时间');
        }
      }

      // 验证优先级
      if (taskData.priority && !['low', 'medium', 'high', 'urgent'].includes(taskData.priority)) {
        throw new ValidationError('无效的优先级值');
      }

      const task = await this.taskService.createTask(taskData);

      res.status(201).json({
        success: true,
        data: task,
        message: '任务创建成功',
      });
    } catch (error) {
      next(error);
    }
  };

  /**
   * 更新任务
   */
  updateTask = async (req: AuthenticatedRequest, res: Response, next: NextFunction) => {
    try {
      const userId = req.user!.id;
      const taskId = parseInt(req.params.id);
      const updateData: UpdateTaskDTO = req.body;

      if (isNaN(taskId)) {
        throw new ValidationError('无效的任务ID');
      }

      // 验证任务是否存在且属于当前用户
      const existingTask = await this.taskService.getTaskById(taskId, userId);
      if (!existingTask) {
        return res.status(404).json({
          success: false,
          message: '任务不存在',
        });
      }

      // 验证更新数据
      if (updateData.title !== undefined && !updateData.title.trim()) {
        throw new ValidationError('任务标题不能为空');
      }

      if (updateData.dueDate) {
        const dueDate = new Date(updateData.dueDate);
        if (isNaN(dueDate.getTime())) {
          throw new ValidationError('无效的截止日期格式');
        }
      }

      if (updateData.priority && !['low', 'medium', 'high', 'urgent'].includes(updateData.priority)) {
        throw new ValidationError('无效的优先级值');
      }

      if (updateData.status && !['todo', 'inProgress', 'completed'].includes(updateData.status)) {
        throw new ValidationError('无效的任务状态');
      }

      const updatedTask = await this.taskService.updateTask(taskId, updateData);

      res.json({
        success: true,
        data: updatedTask,
        message: '任务更新成功',
      });
    } catch (error) {
      next(error);
    }
  };

  /**
   * 删除任务
   */
  deleteTask = async (req: AuthenticatedRequest, res: Response, next: NextFunction) => {
    try {
      const userId = req.user!.id;
      const taskId = parseInt(req.params.id);

      if (isNaN(taskId)) {
        throw new ValidationError('无效的任务ID');
      }

      // 验证任务是否存在且属于当前用户
      const existingTask = await this.taskService.getTaskById(taskId, userId);
      if (!existingTask) {
        return res.status(404).json({
          success: false,
          message: '任务不存在',
        });
      }

      await this.taskService.deleteTask(taskId);

      res.json({
        success: true,
        message: '任务删除成功',
      });
    } catch (error) {
      next(error);
    }
  };

  /**
   * 批量操作任务
   */
  batchUpdateTasks = async (req: AuthenticatedRequest, res: Response, next: NextFunction) => {
    try {
      const userId = req.user!.id;
      const { taskIds, operation, data } = req.body;

      if (!Array.isArray(taskIds) || taskIds.length === 0) {
        throw new ValidationError('任务ID列表不能为空');
      }

      if (!operation || !['update', 'delete', 'complete', 'archive'].includes(operation)) {
        throw new ValidationError('无效的批量操作类型');
      }

      const result = await this.taskService.batchUpdateTasks(userId, taskIds, operation, data);

      res.json({
        success: true,
        data: result,
        message: `批量操作完成，影响 ${result.affectedCount} 个任务`,
      });
    } catch (error) {
      next(error);
    }
  };

  /**
   * 获取任务统计信息
   */
  getTaskStatistics = async (req: AuthenticatedRequest, res: Response, next: NextFunction) => {
    try {
      const userId = req.user!.id;
      const dateRange = {
        from: req.query.from as string,
        to: req.query.to as string,
      };

      const statistics = await this.taskService.getTaskStatistics(userId, dateRange);

      res.json({
        success: true,
        data: statistics,
      });
    } catch (error) {
      next(error);
    }
  };

  /**
   * 导出任务数据
   */
  exportTasks = async (req: AuthenticatedRequest, res: Response, next: NextFunction) => {
    try {
      const userId = req.user!.id;
      const format = req.query.format as string || 'json';
      const includeCompleted = req.query.includeCompleted === 'true';

      if (!['json', 'csv'].includes(format)) {
        throw new ValidationError('不支持的导出格式');
      }

      const exportData = await this.taskService.exportTasks(userId, {
        format,
        includeCompleted,
      });

      const filename = `tasks_export_${new Date().toISOString().split('T')[0]}.${format}`;
      
      res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);
      res.setHeader('Content-Type', format === 'csv' ? 'text/csv' : 'application/json');
      
      res.send(exportData);
    } catch (error) {
      next(error);
    }
  };
}

// frontend/src/components/__tests__/TaskCard.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { TaskCard } from '../TaskCard';
import { mockTask } from '../../__mocks__/taskMocks';

const createWrapper = () => {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });
  
  return ({ children }: { children: React.ReactNode }) => (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
};

describe('TaskCard', () => {
  it('renders task information correctly', () => {
    render(<TaskCard task={mockTask} />, { wrapper: createWrapper() });
    
    expect(screen.getByText(mockTask.title)).toBeInTheDocument();
    expect(screen.getByText(mockTask.description)).toBeInTheDocument();
    expect(screen.getByTestId('task-priority')).toHaveTextContent(mockTask.priority);
  });

  it('handles task completion toggle', async () => {
    const onUpdateMock = jest.fn();
    render(
      <TaskCard task={mockTask} onUpdate={onUpdateMock} />, 
      { wrapper: createWrapper() }
    );
    
    const checkbox = screen.getByRole('checkbox');
    fireEvent.click(checkbox);
    
    await waitFor(() => {
      expect(onUpdateMock).toHaveBeenCalledWith(mockTask.id, { 
        completed: !mockTask.completed 
      });
    });
  });

  it('displays due date warning for overdue tasks', () => {
    const overdueTask = {
      ...mockTask,
      dueDate: '2023-01-01T00:00:00Z',
      completed: false,
    };
    
    render(<TaskCard task={overdueTask} />, { wrapper: createWrapper() });
    
    expect(screen.getByTestId('overdue-warning')).toBeInTheDocument();
    expect(screen.getByText(/已逾期/)).toBeInTheDocument();
  });
});