defaultUtils.ts 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. interface IUserInfo {
  2. id: string | number;
  3. name: string;
  4. officialEmail: string | null;
  5. officialNumber: string | null;
  6. role: 'STUDENT' | 'TEACHER' | 'ADMIN' | null;
  7. userAvatar: string | null;
  8. createTime: string | null;
  9. englishName: string | null;
  10. gender: 'MAN' | 'WOMAN' | null;
  11. birthday: string | null;
  12. phone: string | null;
  13. contentEmail: string | null;
  14. pid: string | number;
  15. openid: string | null;
  16. unionid: string | null;
  17. isWechatBound: boolean;
  18. }
  19. // 预设的渐变色方案
  20. const gradientColors = [
  21. {
  22. primary: '#3498DB',
  23. secondary: '#5DADE2',
  24. name: 'ocean'
  25. },
  26. {
  27. primary: '#F39C12',
  28. secondary: '#F4D03F',
  29. name: 'sunset'
  30. },
  31. {
  32. primary: '#5DADE2',
  33. secondary: '#AED6F1',
  34. name: 'sky'
  35. },
  36. {
  37. primary: '#58D68D',
  38. secondary: '#82E0AA',
  39. name: 'forest'
  40. },
  41. {
  42. primary: '#E74C3C',
  43. secondary: '#F1948A',
  44. name: 'coral'
  45. }
  46. ]
  47. // 渐变方向
  48. const gradientDirections = [
  49. '135deg',
  50. '45deg',
  51. '225deg',
  52. '315deg'
  53. ]
  54. /**
  55. * 基于用户信息生成一致的哈希值
  56. */
  57. function generateUserHash(userInfo: IUserInfo): number {
  58. const hashString = `${userInfo.id || 0}-${userInfo.name || ''}-${userInfo.officialEmail || ''}`
  59. let hash = 0
  60. if (hashString.length === 0) return hash
  61. for (let i = 0; i < hashString.length; i++) {
  62. const char = hashString.charCodeAt(i)
  63. hash = ((hash << 5) - hash) + char
  64. hash = hash & hash // Convert to 32bit integer
  65. }
  66. return Math.abs(hash)
  67. }
  68. /**
  69. * 生成用户名的首字母显示
  70. */
  71. function generateAvatarText(userInfo: IUserInfo): string {
  72. if (userInfo.name) {
  73. // 如果是中文名,取最后一个字
  74. if (/[\u4e00-\u9fa5]/.test(userInfo.name)) {
  75. return userInfo.name.slice(-1)
  76. }
  77. // 如果是英文名,取首字母
  78. return userInfo.name.charAt(0).toUpperCase()
  79. }
  80. if (userInfo.englishName) {
  81. return userInfo.englishName.charAt(0).toUpperCase()
  82. }
  83. if (userInfo.officialEmail) {
  84. return userInfo.officialEmail.charAt(0).toUpperCase()
  85. }
  86. return '☁️'
  87. }
  88. /**
  89. * 生成完整的默认头像配置
  90. * @param userInfo 用户信息
  91. * @returns 完整的头像配置对象
  92. */
  93. export function generateDefaultAvatar(userInfo: IUserInfo) {
  94. const hash = generateUserHash(userInfo)
  95. // 基于哈希值选择颜色方案和方向
  96. const colorIndex = hash % gradientColors.length
  97. const directionIndex = hash % gradientDirections.length
  98. const selectedColor = gradientColors[colorIndex]
  99. const selectedDirection = gradientDirections[directionIndex]
  100. return {
  101. // 是否为默认头像
  102. isDefault: true,
  103. // 头像显示文字
  104. text: generateAvatarText(userInfo),
  105. // 渐变背景样式
  106. background: `linear-gradient(${selectedDirection}, ${selectedColor.primary} 0%, ${selectedColor.secondary} 100%)`,
  107. // 颜色信息
  108. colors: {
  109. primary: selectedColor.primary,
  110. secondary: selectedColor.secondary,
  111. name: selectedColor.name
  112. },
  113. // 渐变方向
  114. direction: selectedDirection,
  115. // 完整的样式对象(用于Vue组件)
  116. style: {
  117. background: `linear-gradient(${selectedDirection}, ${selectedColor.primary} 0%, ${selectedColor.secondary} 100%)`,
  118. color: '#ffffff',
  119. fontWeight: '600',
  120. textShadow: '0 2rpx 4rpx rgba(0, 0, 0, 0.1)'
  121. }
  122. }
  123. }
  124. /**
  125. * 获取用户头像配置(自定义头像或默认头像)
  126. * @param userInfo 用户信息
  127. * @returns 头像配置对象
  128. */
  129. export function getUserAvatarConfig(userInfo: IUserInfo) {
  130. // 如果有自定义头像
  131. const isDefault = !userInfo.userAvatar || userInfo.userAvatar === 'default_avatar_url';
  132. if(isDefault){
  133. // 返回默认头像配置
  134. return generateDefaultAvatar(userInfo)
  135. }
  136. return {
  137. isDefault: false,
  138. src: userInfo.userAvatar,
  139. text: '',
  140. background: '',
  141. style: {}
  142. }
  143. }