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

vue_version: "3.x"
api_style: "composition"

component_code: |
  <template>
    <div class="user-card" :class="{ loading }">
      <img :src="user.avatar" :alt="user.name" />
      <h3>{{ user.name }}</h3>
      <button @click="handleEdit">Edit</button>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  interface User {
    id: string;
    name: string;
    avatar: string;
  }
  
  interface Props {
    user: User;
    loading?: boolean;
  }
  
  const props = withDefaults(defineProps<Props>(), {
    loading: false
  });
  
  const emit = defineEmits<{
    edit: [userId: string];
  }>();
  
  const isEditing = ref(false);
  
  const handleEdit = () => {
    isEditing.value = true;
    emit('edit', props.user.id);
  };
  </script>
  
  <style scoped>
  .user-card {
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  
  .user-card.loading {
    opacity: 0.5;
  }
  </style>

props_definition: |
  interface Props {
    user: {
      id: string;
      name: string;
      avatar: string;
    };
    loading?: boolean;
  }

emits_definition: |
  defineEmits<{
    edit: [userId: string];
  }>();

test_code: |
  import { describe, it, expect } from 'vitest';
  import { mount } from '@vue/test-utils';
  import UserCard from './UserCard.vue';
  
  describe('UserCard', () => {
    const mockUser = {
      id: '1',
      name: 'John Doe',
      avatar: 'avatar.jpg'
    };
    
    it('renders user information', () => {
      const wrapper = mount(UserCard, {
        props: { user: mockUser }
      });
      expect(wrapper.text()).toContain('John Doe');
    });
    
    it('emits edit event when button clicked', async () => {
      const wrapper = mount(UserCard, {
        props: { user: mockUser }
      });
      await wrapper.find('button').trigger('click');
      expect(wrapper.emitted('edit')).toBeTruthy();
      expect(wrapper.emitted('edit')[0]).toEqual(['1']);
    });
  });