ded37830fe
- AvatarCircle: 头像圆形组件 - ShortcutButton: 快捷操作按钮 - TodoAlert: 待办提醒组件 - pkg-mall/product: 积分商品详情页
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { View, Text } from '@tarojs/components';
|
|
import './index.scss';
|
|
|
|
type AvatarColor = 'pri' | 'acc' | 'wrn' | 'dan';
|
|
|
|
interface AvatarCircleProps {
|
|
name: string;
|
|
size?: number;
|
|
color?: AvatarColor;
|
|
className?: string;
|
|
}
|
|
|
|
const COLOR_MAP: Record<AvatarColor, { bg: string; fg: string }> = {
|
|
pri: { bg: '#D4E5F0', fg: '#3A6B8C' },
|
|
acc: { bg: '#E8F0E8', fg: '#5B7A5E' },
|
|
wrn: { bg: '#FFF3E0', fg: '#C4873A' },
|
|
dan: { bg: '#FDEAEA', fg: '#B54A4A' },
|
|
};
|
|
|
|
const AvatarCircle: React.FC<AvatarCircleProps> = ({
|
|
name,
|
|
size = 44,
|
|
color = 'pri',
|
|
className = '',
|
|
}) => {
|
|
const initial = useMemo(() => name?.charAt(0) || '?', [name]);
|
|
const colorStyle = COLOR_MAP[color];
|
|
|
|
const cls = ['avatar-circle', className].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<View
|
|
className={cls}
|
|
style={{
|
|
width: `${size}px`,
|
|
height: `${size}px`,
|
|
borderRadius: `${size / 2}px`,
|
|
background: colorStyle.bg,
|
|
}}
|
|
>
|
|
<Text
|
|
className="avatar-circle__text"
|
|
style={{ color: colorStyle.fg, fontSize: `${Math.round(size * 0.4)}px` }}
|
|
>
|
|
{initial}
|
|
</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AvatarCircle);
|