头像样式优化

im-uniapp/components/head-image/head-image.vue

@@ -71,11 +71,15 @@ export default {
 		avatarTextStyle() {
 			return `width: ${this._size}rpx;
 					height:${this._size}rpx;
-					background-color:${this.name ? this.textColor : '#fff'};
-					font-size:${this._size * 0.5}rpx;
+					background: linear-gradient(145deg,#ffffff20 25%,#00000060),${this.textColor};
+					font-size:${this._size * 0.45}rpx;
+					border-radius: ${this.radius};
 					`
 		},
 		textColor() {
+			if(!this.name){
+				return '#fff';
+			}
 			let hash = 0;
 			for (var i = 0; i < this.name.length; i++) {
 				hash += this.name.charCodeAt(i);

im-web/src/components/common/HeadImage.vue

@@ -2,7 +2,7 @@
 	<div class="head-image" @click="showUserInfo($event)" :style="{ cursor: isShowUserInfo ? 'pointer' : null }">
 		<img class="avatar-image" v-show="url" :src="url" :style="avatarImageStyle" loading="lazy" />
 		<div class="avatar-text" v-show="!url" :style="avatarTextStyle">
-			{{ name?.substring(0, 2).toUpperCase() }}</div>
+			{{ avaterText }}</div>
 		<div v-show="online" class="online" title="用户当前在线"></div>
 		<slot></slot>
 	</div>
@@ -66,6 +66,9 @@ export default {
 					this.$eventBus.$emit("openUserInfo", user, pos);
 				})
 			}
+		},
+		isChinese(charCode) {
+			return charCode >= 0x4e00 && charCode <= 0x9fa5;
 		}
 	},
 	computed: {
@@ -78,14 +81,21 @@ export default {
 		avatarTextStyle() {
 			let w = this.width ? this.width : this.size;
 			let h = this.height ? this.height : this.size;
-			return `
-				  width: ${w}px;height:${h}px;
-					background-color: ${this.name ? this.textColor : '#fff'};
-					font-size:${w * 0.35}px;
-					border-radius: ${this.radius};
-					`
+			return `width: ${w}px;height:${h}px;
+				background: linear-gradient(145deg,#ffffff20 25%,#00000060),${this.textColor};
+				font-size:${w * 0.4}px;
+				border-radius: ${this.radius};`
+		},
+		avaterText() {
+			if (!this.name) return '';
+			if (this.isChinese(this.name.charCodeAt(0))) {
+				return this.name.charAt(0)
+			} else {
+				return this.name.charAt(0).toUpperCase() + this.name.charAt(1)
+			}
 		},
 		textColor() {
+			if (!this.name) return 'fff';
 			let hash = 0;
 			for (var i = 0; i < this.name.length; i++) {
 				hash += this.name.charCodeAt(i);