字母头像系统 📝

现代简约的字母头像设计，基于用户ID自动生成唯一的颜色和字母组合。 智能识别姓名格式，支持邮箱、用户名、驼峰命名等多种格式。

🧪 实时测试工具

JD
john.doe
显示字母: JD
头像颜色: #8B5CF6

智能识别规则:

  • • john.doe → JD (名.姓格式)
  • • user@email.com → U (邮箱格式)
  • • johnSmith → JS (驼峰命名)
  • • singlename → S (单个词)

👥 国际用户展示

SC
Sarah Chen
Product Manager
📍 San Francisco
ID: sarah.chen
AR
Alex Rodriguez
Software Engineer
📍 London
ID: alex.rodriguez
ET
Emma Thompson
Marketing Specialist
📍 Sydney
ID: emma.thompson
MW
Michael Wilson
UI/UX Designer
📍 New York
ID: michael.wilson
SA
Sophia Anderson
Data Scientist
📍 Berlin
ID: sophia.anderson
DB
David Brown
DevOps Engineer
📍 Toronto
ID: david.brown
OD
Olivia Davis
Content Writer
📍 Melbourne
ID: olivia.davis
JM
James Miller
Business Analyst
📍 Tokyo
ID: james.miller
LG
Liam Garcia
Full Stack Developer
📍 Barcelona
ID: liam.garcia
AM
Ava Martinez
Project Manager
📍 Mexico City
ID: ava.martinez
NT
Noah Taylor
Security Engineer
📍 Amsterdam
ID: noah.taylor
MW
Mia White
Growth Hacker
📍 Stockholm
ID: mia.white

📏 尺寸规格

DU

小尺寸 (32px)

适用于评论列表、消息气泡

DU

中尺寸 (48px)

适用于用户卡片、导航栏

DU

大尺寸 (64px)

适用于个人资料、头部展示

🎨 配色方案

精心挑选的12种现代色彩，确保良好的对比度和视觉美感。每个用户ID会一致性地映射到特定颜色。

SC
SC
#84CC16
AR
AR
#8B5CF6
ET
ET
#EC4899
MW
MW
#8B5CF6
SA
SA
#10B981
DB
DB
#F97316
OD
OD
#8B5A2B
JM
JM
#F59E0B
LG
LG
#10B981
AM
AM
#EF4444
NT
NT
#84CC16
MW
MW
#F97316

⚡ 技术特点

✓
智能字母识别
自动识别姓名、邮箱、驼峰命名等格式
✓
哈希一致性分配
同一用户ID永远得到相同的颜色和字母
✓
现代配色方案
12种精心选择的颜色，对比度和美观度俱佳
✓
响应式设计
三种尺寸适配不同使用场景
✓
零配置使用
只需传入用户ID，自动处理一切
✓
TypeScript支持
完整类型定义，开发体验优秀

💻 代码示例

// 基本使用
import LetterAvatar from './components/LetterAvatar';

<LetterAvatar userId="sarah.chen" size="medium" />

// 自定义样式
<LetterAvatar 
  userId="alex.rodriguez" 
  size="large" 
  className="shadow-lg border-2 border-white"
/>

// 工具函数
import { getDisplayLetter, getAvatarColor } from './components/LetterAvatar';

const letter = getDisplayLetter("john.doe"); // "JD"
const color = getAvatarColor("john.doe");    // "#6366F1"
← 返回首页