143 lines
5.6 KiB
TypeScript
143 lines
5.6 KiB
TypeScript
/**
|
|
* 用户名和头像生成器
|
|
*/
|
|
|
|
// 生成用户名: 榴莲女皇x号
|
|
export function generateUsername(accountSequence: number): string {
|
|
return `榴莲女皇${accountSequence}号`;
|
|
}
|
|
|
|
// 预定义的柔和配色方案
|
|
const COLOR_PALETTES = [
|
|
{ bg: '#FFE4E1', primary: '#FF6B6B', secondary: '#4ECDC4' }, // 粉红+红+青
|
|
{ bg: '#E8F5E9', primary: '#66BB6A', secondary: '#FFA726' }, // 浅绿+绿+橙
|
|
{ bg: '#E3F2FD', primary: '#42A5F5', secondary: '#AB47BC' }, // 浅蓝+蓝+紫
|
|
{ bg: '#FFF3E0', primary: '#FF7043', secondary: '#26A69A' }, // 浅橙+橙+青
|
|
{ bg: '#F3E5F5', primary: '#AB47BC', secondary: '#42A5F5' }, // 浅紫+紫+蓝
|
|
{ bg: '#FFFDE7', primary: '#FFCA28', secondary: '#EC407A' }, // 浅黄+黄+粉
|
|
{ bg: '#E0F7FA', primary: '#26C6DA', secondary: '#7E57C2' }, // 浅青+青+紫
|
|
{ bg: '#FCE4EC', primary: '#EC407A', secondary: '#66BB6A' }, // 浅粉+粉+绿
|
|
];
|
|
|
|
// 榴莲形状变体
|
|
const DURIAN_SHAPES = [
|
|
// 经典榴莲
|
|
(color: string) => `
|
|
<ellipse cx="50" cy="55" rx="25" ry="20" fill="${color}"/>
|
|
<path d="M25 55 Q15 45, 20 35 Q25 40, 30 35 Q35 40, 40 35 Q45 40, 50 35 Q55 40, 60 35 Q65 40, 70 35 Q75 40, 80 35 Q85 45, 75 55" fill="${color}"/>
|
|
<path d="M35 25 Q40 15, 50 20 Q60 15, 65 25" stroke="${color}" stroke-width="3" fill="none"/>
|
|
`,
|
|
// 圆润榴莲
|
|
(color: string) => `
|
|
<circle cx="50" cy="50" r="22" fill="${color}"/>
|
|
<circle cx="42" cy="42" r="5" fill="#FFFFFFAA"/>
|
|
<path d="M30 40 Q25 30, 35 25" stroke="${color}" stroke-width="4" fill="none"/>
|
|
<path d="M70 40 Q75 30, 65 25" stroke="${color}" stroke-width="4" fill="none"/>
|
|
<path d="M50 30 Q50 20, 50 15" stroke="${color}" stroke-width="4" fill="none"/>
|
|
`,
|
|
// 可爱榴莲
|
|
(color: string) => `
|
|
<ellipse cx="50" cy="52" rx="22" ry="18" fill="${color}"/>
|
|
<polygon points="35,35 40,20 45,35" fill="${color}"/>
|
|
<polygon points="50,32 55,17 60,32" fill="${color}"/>
|
|
<polygon points="65,35 70,20 75,35" fill="${color}"/>
|
|
`,
|
|
];
|
|
|
|
// 表情变体
|
|
const FACE_EXPRESSIONS = [
|
|
// 开心
|
|
(x: number, y: number) => `
|
|
<circle cx="${x - 8}" cy="${y}" r="3" fill="#333"/>
|
|
<circle cx="${x + 8}" cy="${y}" r="3" fill="#333"/>
|
|
<path d="M${x - 6} ${y + 8} Q${x} ${y + 14}, ${x + 6} ${y + 8}" stroke="#333" stroke-width="2" fill="none"/>
|
|
`,
|
|
// 眨眼
|
|
(x: number, y: number) => `
|
|
<circle cx="${x - 8}" cy="${y}" r="3" fill="#333"/>
|
|
<line x1="${x + 5}" y1="${y}" x2="${x + 11}" y2="${y}" stroke="#333" stroke-width="2"/>
|
|
<path d="M${x - 6} ${y + 8} Q${x} ${y + 14}, ${x + 6} ${y + 8}" stroke="#333" stroke-width="2" fill="none"/>
|
|
`,
|
|
// 惊讶
|
|
(x: number, y: number) => `
|
|
<circle cx="${x - 8}" cy="${y}" r="4" fill="#333"/>
|
|
<circle cx="${x + 8}" cy="${y}" r="4" fill="#333"/>
|
|
<ellipse cx="${x}" cy="${y + 10}" rx="4" ry="5" fill="#333"/>
|
|
`,
|
|
// 酷
|
|
(x: number, y: number) => `
|
|
<rect x="${x - 14}" y="${y - 4}" width="12" height="6" rx="2" fill="#333"/>
|
|
<rect x="${x + 2}" y="${y - 4}" width="12" height="6" rx="2" fill="#333"/>
|
|
<path d="M${x - 4} ${y + 8} L${x + 4} ${y + 8}" stroke="#333" stroke-width="2"/>
|
|
`,
|
|
// 害羞
|
|
(x: number, y: number) => `
|
|
<line x1="${x - 10}" y1="${y}" x2="${x - 5}" y2="${y}" stroke="#333" stroke-width="2"/>
|
|
<line x1="${x + 5}" y1="${y}" x2="${x + 10}" y2="${y}" stroke="#333" stroke-width="2"/>
|
|
<ellipse cx="${x - 12}" cy="${y + 5}" rx="4" ry="2" fill="#FFB6C1"/>
|
|
<ellipse cx="${x + 12}" cy="${y + 5}" rx="4" ry="2" fill="#FFB6C1"/>
|
|
<path d="M${x - 4} ${y + 10} Q${x} ${y + 13}, ${x + 4} ${y + 10}" stroke="#333" stroke-width="2" fill="none"/>
|
|
`,
|
|
];
|
|
|
|
// 装饰元素
|
|
const DECORATIONS = [
|
|
// 星星
|
|
(color: string) => `
|
|
<polygon points="15,15 17,20 22,20 18,24 20,29 15,26 10,29 12,24 8,20 13,20" fill="${color}"/>
|
|
`,
|
|
// 爱心
|
|
(color: string) => `
|
|
<path d="M85 20 C82 15, 75 15, 75 22 C75 15, 68 15, 65 20 C65 27, 75 35, 75 35 C75 35, 85 27, 85 20" fill="${color}"/>
|
|
`,
|
|
// 音符
|
|
(color: string) => `
|
|
<circle cx="18" cy="78" r="4" fill="${color}"/>
|
|
<line x1="22" y1="78" x2="22" y2="65" stroke="${color}" stroke-width="2"/>
|
|
<path d="M22 65 Q28 62, 28 68" stroke="${color}" stroke-width="2" fill="none"/>
|
|
`,
|
|
// 闪光
|
|
(color: string) => `
|
|
<line x1="80" y1="70" x2="85" y2="75" stroke="${color}" stroke-width="2"/>
|
|
<line x1="85" y1="70" x2="80" y2="75" stroke="${color}" stroke-width="2"/>
|
|
<line x1="78" y1="80" x2="82" y2="84" stroke="${color}" stroke-width="1.5"/>
|
|
<line x1="82" y1="80" x2="78" y2="84" stroke="${color}" stroke-width="1.5"/>
|
|
`,
|
|
// 无装饰
|
|
() => '',
|
|
];
|
|
|
|
/**
|
|
* 生成随机SVG头像 (榴莲主题)
|
|
*/
|
|
export function generateRandomAvatarSvg(): string {
|
|
// 随机选择配色
|
|
const palette = COLOR_PALETTES[Math.floor(Math.random() * COLOR_PALETTES.length)];
|
|
// 随机选择榴莲形状
|
|
const shape = DURIAN_SHAPES[Math.floor(Math.random() * DURIAN_SHAPES.length)];
|
|
// 随机选择表情
|
|
const face = FACE_EXPRESSIONS[Math.floor(Math.random() * FACE_EXPRESSIONS.length)];
|
|
// 随机选择装饰 (50%概率有装饰)
|
|
const decoration = Math.random() > 0.5
|
|
? DECORATIONS[Math.floor(Math.random() * (DECORATIONS.length - 1))]
|
|
: DECORATIONS[DECORATIONS.length - 1];
|
|
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
<rect width="100" height="100" fill="${palette.bg}"/>
|
|
${shape(palette.primary)}
|
|
${face(50, 52)}
|
|
${decoration(palette.secondary)}
|
|
</svg>`;
|
|
}
|
|
|
|
/**
|
|
* 生成用户身份
|
|
* @param accountSequence 用户序列号
|
|
*/
|
|
export function generateIdentity(accountSequence: number): { username: string; avatarSvg: string } {
|
|
return {
|
|
username: generateUsername(accountSequence),
|
|
avatarSvg: generateRandomAvatarSvg(),
|
|
};
|
|
}
|