TeamMember

简介

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

组件特性：

支持头像图片展示
可显示姓名、职位和描述文本
支持添加社交媒体链接
提供多个样式自定义选项
响应式设计，适配不同屏幕尺寸
卡片阴影（shadow/hoverShadow）强度可自定义（如 cosy:shadow-md、cosy:shadow-lg 等）

基础用法

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

张三

前端开发工程师

拥有5年前端开发经验，专注于React和Vue生态系统。

---
/**
 * @component TeamMemberBasic
 * @description TeamMember 组件基础用法示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

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

<TeamMember
  name="张三"
  role="前端开发工程师"
  avatar={avatar}
  bio="拥有5年前端开发经验，专注于React和Vue生态系统。"
/>

社交媒体链接

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

李四

UI设计师

专注于用户体验和界面设计，热爱创造直观易用的产品。

---
/**
 * @component TeamMemberWithSocial
 * @description TeamMember 组件带社交媒体链接用法示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

// 显式声明类型，避免类型不匹配
interface SocialLink {
  platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
  url: string;
}

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member2',
});
const socialLinks: SocialLink[] = [
  { platform: 'github', url: 'https://github.com/lisi' },
  { platform: 'twitter', url: 'https://twitter.com/lisi' },
  { platform: 'linkedin', url: 'https://linkedin.com/in/lisi' },
];
---

<TeamMember
  name="李四"
  role="UI设计师"
  avatar={avatar}
  bio="专注于用户体验和界面设计，热爱创造直观易用的产品。"
  socialLinks={socialLinks}
/>

阴影强度

通过 shadow 和 hoverShadow 属性自定义阴影强度：

shadow=sm, hover=md

后端开发

shadow=sm, hoverShadow=md

shadow=md, hover=lg

后端开发

shadow=md, hoverShadow=lg

shadow=lg, hover=xl

后端开发

shadow=lg, hoverShadow=xl

shadow=xl, hover=sm

后端开发

shadow=xl, hoverShadow=sm

---
/**
 * @component TeamMemberShadowSmMd
 * @description TeamMember 组件 shadow=sm, hoverShadow=md 示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member-shadow-sm-md',
});
---

<TeamMember
  name="shadow=sm, hover=md"
  role="后端开发"
  avatar={avatar}
  bio="shadow=sm, hoverShadow=md"
  shadow="sm"
  hoverShadow="md"
/>

shadow=sm, hover=md

后端开发

shadow=sm, hoverShadow=md

shadow=md, hover=lg

后端开发

shadow=md, hoverShadow=lg

shadow=lg, hover=xl

后端开发

shadow=lg, hoverShadow=xl

shadow=xl, hover=sm

后端开发

shadow=xl, hoverShadow=sm

---
/**
 * @component TeamMemberShadowMdLg
 * @description TeamMember 组件 shadow=md, hoverShadow=lg 示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member-shadow-md-lg',
});
---

<TeamMember
  name="shadow=md, hover=lg"
  role="后端开发"
  avatar={avatar}
  bio="shadow=md, hoverShadow=lg"
  shadow="md"
  hoverShadow="lg"
/>

shadow=sm, hover=md

后端开发

shadow=sm, hoverShadow=md

shadow=md, hover=lg

后端开发

shadow=md, hoverShadow=lg

shadow=lg, hover=xl

后端开发

shadow=lg, hoverShadow=xl

shadow=xl, hover=sm

后端开发

shadow=xl, hoverShadow=sm

---
/**
 * @component TeamMemberShadowLgXl
 * @description TeamMember 组件 shadow=lg, hoverShadow=xl 示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member-shadow-lg-xl',
});
---

<TeamMember
  name="shadow=lg, hover=xl"
  role="后端开发"
  avatar={avatar}
  bio="shadow=lg, hoverShadow=xl"
  shadow="lg"
  hoverShadow="xl"
/>

shadow=sm, hover=md

后端开发

shadow=sm, hoverShadow=md

shadow=md, hover=lg

后端开发

shadow=md, hoverShadow=lg

shadow=lg, hover=xl

后端开发

shadow=lg, hoverShadow=xl

shadow=xl, hover=sm

后端开发

shadow=xl, hoverShadow=sm

---
/**
 * @component TeamMemberShadowXlSm
 * @description TeamMember 组件 shadow=xl, hoverShadow=sm 示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member-shadow-xl-sm',
});
---

<TeamMember
  name="shadow=xl, hover=sm"
  role="后端开发"
  avatar={avatar}
  bio="shadow=xl, hoverShadow=sm"
  shadow="xl"
  hoverShadow="sm"
/>

自定义样式

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

王五

后端开发工程师

专注于Node.js和云原生架构，热爱开源。

---
/**
 * @component TeamMemberCustomStyle
 * @description TeamMember 组件自定义 class 用法示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

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

<TeamMember
  name="王五"
  role="后端开发工程师"
  avatar={avatar}
  bio="专注于Node.js和云原生架构，热爱开源。"
  class="cosy:border-2 cosy:border-primary cosy:shadow-xl"
/>