library-picturebook-activity/frontend/src/utils/avatar.ts

87 lines
2.4 KiB
TypeScript
Raw Normal View History

2026-01-08 09:17:46 +08:00
/**
*
* 使 DiceBear API
*/
// DiceBear 头像风格
export type AvatarStyle =
| 'initials' // 首字母风格
| 'avataaars' // 卡通人物风格
| 'bottts' // 机器人风格
| 'pixel-art' // 像素风格
| 'identicon' // GitHub风格的几何图案
| 'thumbs' // 拇指风格
| 'shapes' // 几何形状风格
export interface AvatarOptions {
style?: AvatarStyle
backgroundColor?: string
textColor?: string
size?: number
}
const defaultOptions: AvatarOptions = {
style: 'initials',
backgroundColor: '01412b', // 深绿色主题(与侧边栏一致)
textColor: 'ffffff',
size: 64,
}
/**
* DiceBear URL
* @param seed - ID
* @param options -
* @returns URL
*/
export function generateAvatarUrl(seed: string, options?: AvatarOptions): string {
const opts = { ...defaultOptions, ...options }
const params = new URLSearchParams()
params.set('seed', seed)
if (opts.backgroundColor) {
params.set('backgroundColor', opts.backgroundColor)
}
if (opts.style === 'initials' && opts.textColor) {
params.set('textColor', opts.textColor)
}
if (opts.size) {
params.set('size', opts.size.toString())
}
return `https://api.dicebear.com/7.x/${opts.style}/svg?${params.toString()}`
}
/**
* URL
*
* @param user -
* @param options -
* @returns URL
*/
export function getUserAvatar(
user: { avatar?: string | null; username?: string; nickname?: string; id?: number } | null | undefined,
options?: AvatarOptions
): string {
// 如果用户有自定义头像,直接返回
if (user?.avatar) {
return user.avatar
}
// 否则根据用户名或昵称生成默认头像
const seed = user?.username || user?.nickname || user?.id?.toString() || 'user'
return generateAvatarUrl(seed, options)
}
/**
*
* @param seed -
* @param style -
* @returns URL
*/
export function generateRandomAvatar(seed: string, style: AvatarStyle = 'initials'): string {
return `https://api.dicebear.com/7.x/${style}/svg?seed=${encodeURIComponent(seed)}`
}