TeamMember

简介

TeamMember组件用于展示团队成员的详细信息，支持头像、姓名、职位、描述文本和社交媒体链接等内容的展示。

组件特性：

支持头像图片展示
可显示姓名、职位和描述文本
支持添加社交媒体链接
提供多个样式自定义选项
响应式设计，适配不同屏幕尺寸
可组合使用，展示完整团队

基础用法

最简单的团队成员信息展示：

张三

产品设计师

专注于用户体验设计，拥有5年产品设计经验

---
/**
 * @component TeamMember.Basic
 *
 * @description
 * 基础的团队成员展示组件示例，展示最简单的成员信息展示方式。
 */
import '../../style.ts';
import TeamMember from './TeamMember.astro';
import { getExampleImage } from '../../src/utils/image.ts';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member1',
});
---

<TeamMember
  name="张三"
  role="产品设计师"
  avatar={avatar}
  bio="专注于用户体验设计，拥有5年产品设计经验"
/>

社交媒体链接

通过socialLinks属性添加社交媒体链接：

李四

高级开发工程师

全栈开发专家，热爱开源项目，专注于前端框架和性能优化

---
/**
 * @component TeamMember.WithSocial
 *
 * @description
 * 带社交媒体链接的团队成员展示组件示例，展示如何添加社交媒体链接。
 */
import '../../style.ts';
import TeamMember from './TeamMember.astro';
import { getExampleImage } from '../../src/utils/image.ts';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member2',
});
---

<TeamMember
  name="李四"
  role="高级开发工程师"
  avatar={avatar}
  bio="全栈开发专家，热爱开源项目，专注于前端框架和性能优化"
  socialLinks={[
    { platform: 'github', url: 'https://github.com' },
    { platform: 'twitter', url: 'https://twitter.com' },
    { platform: 'linkedin', url: 'https://linkedin.com' },
  ]}
/>

自定义样式

使用class属性自定义成员卡片样式：

王五

市场总监

负责产品市场策略和品牌推广，拥有丰富的市场营销经验

---
/**
 * @component TeamMember.CustomStyle
 *
 * @description
 * 自定义样式的团队成员展示组件示例，展示如何使用class属性自定义样式。
 */
import '../../style.ts';
import TeamMember from './TeamMember.astro';
import { getExampleImage } from '../../src/utils/image.ts';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member3',
});
---

<TeamMember
  name="王五"
  role="市场总监"
  avatar={avatar}
  bio="负责产品市场策略和品牌推广，拥有丰富的市场营销经验"
  class="cosy:bg-gradient-to-r cosy:from-purple-100 cosy:to-pink-100 cosy:shadow-lg cosy:w-72"
/>

团队展示

组合多个TeamMember组件展示完整团队：

张三