| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- interface IUserInfo {
- id: string | number;
- name: string;
- officialEmail: string | null;
- officialNumber: string | null;
- role: 'STUDENT' | 'TEACHER' | 'ADMIN' | null;
- userAvatar: string | null;
- createTime: string | null;
- englishName: string | null;
- gender: 'MAN' | 'WOMAN' | null;
- birthday: string | null;
- phone: string | null;
- contentEmail: string | null;
- pid: string | number;
- openid: string | null;
- unionid: string | null;
- isWechatBound: boolean;
- }
- // 预设的渐变色方案
- const gradientColors = [
- {
- primary: '#3498DB',
- secondary: '#5DADE2',
- name: 'ocean'
- },
- {
- primary: '#F39C12',
- secondary: '#F4D03F',
- name: 'sunset'
- },
- {
- primary: '#5DADE2',
- secondary: '#AED6F1',
- name: 'sky'
- },
- {
- primary: '#58D68D',
- secondary: '#82E0AA',
- name: 'forest'
- },
- {
- primary: '#E74C3C',
- secondary: '#F1948A',
- name: 'coral'
- }
- ]
- // 渐变方向
- const gradientDirections = [
- '135deg',
- '45deg',
- '225deg',
- '315deg'
- ]
- /**
- * 基于用户信息生成一致的哈希值
- */
- function generateUserHash(userInfo: IUserInfo): number {
- const hashString = `${userInfo.id || 0}-${userInfo.name || ''}-${userInfo.officialEmail || ''}`
- let hash = 0
-
- if (hashString.length === 0) return hash
-
- for (let i = 0; i < hashString.length; i++) {
- const char = hashString.charCodeAt(i)
- hash = ((hash << 5) - hash) + char
- hash = hash & hash // Convert to 32bit integer
- }
-
- return Math.abs(hash)
- }
- /**
- * 生成用户名的首字母显示
- */
- function generateAvatarText(userInfo: IUserInfo): string {
- if (userInfo.name) {
- // 如果是中文名,取最后一个字
- if (/[\u4e00-\u9fa5]/.test(userInfo.name)) {
- return userInfo.name.slice(-1)
- }
- // 如果是英文名,取首字母
- return userInfo.name.charAt(0).toUpperCase()
- }
-
- if (userInfo.englishName) {
- return userInfo.englishName.charAt(0).toUpperCase()
- }
-
- if (userInfo.officialEmail) {
- return userInfo.officialEmail.charAt(0).toUpperCase()
- }
-
- return '☁️'
- }
- /**
- * 生成完整的默认头像配置
- * @param userInfo 用户信息
- * @returns 完整的头像配置对象
- */
- export function generateDefaultAvatar(userInfo: IUserInfo) {
- const hash = generateUserHash(userInfo)
-
- // 基于哈希值选择颜色方案和方向
- const colorIndex = hash % gradientColors.length
- const directionIndex = hash % gradientDirections.length
-
- const selectedColor = gradientColors[colorIndex]
- const selectedDirection = gradientDirections[directionIndex]
-
- return {
- // 是否为默认头像
- isDefault: true,
- // 头像显示文字
- text: generateAvatarText(userInfo),
- // 渐变背景样式
- background: `linear-gradient(${selectedDirection}, ${selectedColor.primary} 0%, ${selectedColor.secondary} 100%)`,
- // 颜色信息
- colors: {
- primary: selectedColor.primary,
- secondary: selectedColor.secondary,
- name: selectedColor.name
- },
- // 渐变方向
- direction: selectedDirection,
- // 完整的样式对象(用于Vue组件)
- style: {
- background: `linear-gradient(${selectedDirection}, ${selectedColor.primary} 0%, ${selectedColor.secondary} 100%)`,
- color: '#ffffff',
- fontWeight: '600',
- textShadow: '0 2rpx 4rpx rgba(0, 0, 0, 0.1)'
- }
- }
- }
- /**
- * 获取用户头像配置(自定义头像或默认头像)
- * @param userInfo 用户信息
- * @returns 头像配置对象
- */
- export function getUserAvatarConfig(userInfo: IUserInfo) {
- // 如果有自定义头像
- const isDefault = !userInfo.userAvatar || userInfo.userAvatar === 'default_avatar_url';
- if(isDefault){
- // 返回默认头像配置
- return generateDefaultAvatar(userInfo)
- }
- return {
- isDefault: false,
- src: userInfo.userAvatar,
- text: '',
- background: '',
- style: {}
- }
- }
|