component_requirements:
  name: "UserProfile"
  description: "显示用户信息的卡片组件"
  features:
    - "显示头像"
    - "显示用户名"
    - "编辑功能"
    - "加载状态"

design_mock: "user-profile-card.png"
state_complexity: "medium"

component_code: |
  import React, { useState, useCallback } from 'react';
  import './UserProfile.css';
  
  interface UserProfileProps {
    user: {
      id: string;
      name: string;
      avatar: string;
    };
    onEdit?: (userId: string) => void;
    loading?: boolean;
  }
  
  export const UserProfile: React.FC<UserProfileProps> = ({
    user,
    onEdit,
    loading = false
  }) => {
    const [isEditing, setIsEditing] = useState(false);
    
    const handleEdit = useCallback(() => {
      setIsEditing(true);
      onEdit?.(user.id);
    }, [user.id, onEdit]);
    
    if (loading) {
      return <div className="user-profile-loading">Loading...</div>;
    }
    
    return (
      <div className="user-profile">
        <img src={user.avatar} alt={user.name} />
        <h3>{user.name}</h3>
        <button onClick={handleEdit}>Edit</button>
      </div>
    );
  };

props_interface: |
  interface UserProfileProps {
    user: {
      id: string;
      name: string;
      avatar: string;
    };
    onEdit?: (userId: string) => void;
    loading?: boolean;
  }

test_code: |
  import { render, screen, fireEvent } from '@testing-library/react';
  import { UserProfile } from './UserProfile';
  
  describe('UserProfile', () => {
    const mockUser = {
      id: '1',
      name: 'John Doe',
      avatar: 'avatar.jpg'
    };
    
    it('renders user information', () => {
      render(<UserProfile user={mockUser} />);
      expect(screen.getByText('John Doe')).toBeInTheDocument();
    });
    
    it('calls onEdit when edit button clicked', () => {
      const onEdit = jest.fn();
      render(<UserProfile user={mockUser} onEdit={onEdit} />);
      fireEvent.click(screen.getByText('Edit'));
      expect(onEdit).toHaveBeenCalledWith('1');
    });
  });

storybook: |
  export default {
    title: 'Components/UserProfile',
    component: UserProfile
  };
  
  export const Default = () => (
    <UserProfile user={{ id: '1', name: 'John', avatar: 'avatar.jpg' }} />
  );
  
  export const Loading = () => (
    <UserProfile user={{ id: '1', name: 'John', avatar: 'avatar.jpg' }} loading />
  );