会话、群聊、好友提示语优化

im-uniapp/pages/chat/chat.vue

@@ -18,7 +18,11 @@
 			</view>
 		</view>
 		<view class="chat-tip" v-if="!initializing && !loading && chatStore.chats.length == 0">
-			温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
+			<view class="tip-icon">
+				<text class="iconfont icon-chat"></text>
+			</view>
+			<view class="tip-title">还没有聊天</view>
+			<view class="tip-content">添加好友或创建群聊，开始精彩的对话吧</view>
 		</view>
 		<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true">
 			<view v-for="(chat, index) in chatStore.chats" :key="index">
@@ -140,11 +144,47 @@ export default {
 
 	.chat-tip {
 		position: absolute;
-		top: 400rpx;
+		top: 50%;
-		padding: 50rpx;
+		left: 50%;
-		line-height: 50rpx;
+		transform: translate(-50%, -50%);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 40rpx;
 		text-align: center;
-		color: $im-text-color-lighter;
+		width: 80%;
+		
+		.tip-icon {
+			width: 120rpx;
+			height: 120rpx;
+			background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 40rpx;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+			border: 1rpx solid $im-bg-active;
+			
+			.iconfont {
+				font-size: 60rpx;
+				color: $im-text-color-lighter;
+			}
+		}
+
+		.tip-title {
+			font-size: $im-font-size-large;
+			color: $im-text-color;
+			font-weight: 500;
+			margin-bottom: 20rpx;
+		}
+
+		.tip-content {
+			font-size: $im-font-size-smaller;
+			color: $im-text-color-lighter;
+			line-height: 1.6;
+			margin-bottom: 50rpx;
+		}
 	}
 
 	.chat-loading {

im-uniapp/pages/friend/friend.vue

@@ -9,7 +9,12 @@
 			</view>
 		</view>
 		<view class="friend-tip" v-if="!hasFriends">
-			温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~
+			<view class="tip-icon">
+				<text class="iconfont icon-add-friend"></text>
+			</view>
+			<view class="tip-title">还没有好友</view>
+			<view class="tip-content">添加好友，开始精彩的聊天之旅</view>
+			<button type="primary" @click="onAddNewFriends">添加好友</button>
 		</view>
 		<view class="friend-items" v-else>
 			<up-index-list :index-list="friendIdx" :sticky="false" :custom-nav-height="customNavHeight">
@@ -103,7 +108,7 @@ export default {
 			// #ifdef APP-PLUS
 			h += uni.getSystemInfoSync().statusBarHeight;
 			// #endif
-			console.log("customNavHeight:",h)
+			console.log("customNavHeight:", h)
 			return h;
 		}
 	}
@@ -128,11 +133,49 @@ export default {
 
 	.friend-tip {
 		position: absolute;
-		top: 400rpx;
+		top: 50%;
-		padding: 50rpx;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 60rpx 40rpx;
 		text-align: center;
-		line-height: 50rpx;
+		width: 80%;
-		color: $im-text-color-lighter;
+		max-width: 500rpx;
+
+		.tip-icon {
+			width: 120rpx;
+			height: 120rpx;
+			background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 40rpx;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+			border: 2rpx solid $im-bg-active;
+
+			.iconfont {
+				font-size: 56rpx;
+				color: #6c757d;
+				opacity: 0.8;
+			}
+		}
+
+		.tip-title {
+			font-size: $im-font-size-large;
+			color: $im-text-color;
+			font-weight: 500;
+			margin-bottom: 20rpx;
+		}
+
+		.tip-content {
+			font-size: $im-font-size-smaller;
+			color: $im-text-color-lighter;
+			line-height: 1.6;
+			margin-bottom: 50rpx;
+		}
 	}
 
 	.friend-items {

im-uniapp/pages/group/group.vue

@@ -8,7 +8,12 @@
 			</view>
 		</view>
 		<view class="group-tip" v-if="!hasGroups">
-			温馨提示：您现在还没有加入任何群聊，点击右上方'+'按钮可以创建群聊哦~
+			<view class="tip-icon">
+				<text class="iconfont icon-create-group"></text>
+			</view>
+			<view class="tip-title">还没有群聊</view>
+			<view class="tip-content">创建或加入群聊，与朋友们一起畅聊吧</view>
+			<button type="primary" @click="onCreateNewGroup">创建群聊</button>
 		</view>
 		<view class="group-items" v-else>
 			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
@@ -55,12 +60,49 @@ export default {
 
 	.group-tip {
 		position: absolute;
-		top: 400rpx;
+		top: 50%;
-		padding: 50rpx;
+		left: 50%;
-		text-align: left;
+		transform: translate(-50%, -50%);
-		line-height: 50rpx;
+		display: flex;
-		color: darkblue;
+		flex-direction: column;
-		font-size: 30rpx;
+		align-items: center;
+		padding: 60rpx 40rpx;
+		text-align: center;
+		width: 80%;
+		max-width: 500rpx;
+
+		.tip-icon {
+			width: 120rpx;
+			height: 120rpx;
+			background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 40rpx;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+			border: 2rpx solid $im-bg-active;
+
+			.iconfont {
+				font-size: 56rpx;
+				color: #6c757d;
+				opacity: 0.8;
+			}
+		}
+
+		.tip-title {
+			font-size: $im-font-size-large;
+			color: $im-text-color;
+			font-weight: 500;
+			margin-bottom: 20rpx;
+		}
+
+		.tip-content {
+			font-size: $im-font-size-smaller;
+			color: $im-text-color-lighter;
+			line-height: 1.6;
+			margin-bottom: 50rpx;
+		}
 	}
 
 	.group-items {

im-uniapp/static/icon/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4272106 */
-  src: url('iconfont.ttf?t=1750317465456') format('truetype');
+  src: url('iconfont.ttf?t=1759053579007') format('truetype');
 }
 
 .iconfont {
@@ -11,20 +11,92 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-dnd:before {
+.icon-chat:before {
-  content: "\e693";
+  content: "\e93e";
 }
 
-.icon-privacy-protocol:before {
+.icon-create-group:before {
-  content: "\e761";
+  content: "\e65b";
 }
 
-.icon-create-group-2:before {
+.icon-refresh:before {
-  content: "\e616";
+  content: "\e64c";
 }
 
-.icon-create-group:before {
+.icon-copy:before {
-  content: "\e650";
+  content: "\e604";
+}
+
+.icon-code:before {
+  content: "\e72c";
+}
+
+.icon-username:before {
+  content: "\e623";
+}
+
+.icon-pwd:before {
+  content: "\e60d";
+}
+
+.icon-pwd-hide:before {
+  content: "\e60c";
+}
+
+.icon-username2:before {
+  content: "\e647";
+}
+
+.icon-pwd-show:before {
+  content: "\e621";
+}
+
+.icon-teenager:before {
+  content: "\eba1";
+}
+
+.icon-warning-circle-empty:before {
+  content: "\e606";
+}
+
+.icon-loading2:before {
+  content: "\e6b6";
+}
+
+.icon-complaint:before {
+  content: "\e612";
+}
+
+.icon-about:before {
+  content: "\e637";
+}
+
+.icon-security:before {
+  content: "\e61d";
+}
+
+.icon-personal-info:before {
+  content: "\e62d";
+}
+
+.icon-success:before {
+  content: "\e649";
+}
+
+.icon-wait:before {
+  content: "\e701";
+}
+
+.icon-error:before {
+  content: "\e62b";
+}
+
+.icon-dnd:before {
+  content: "\e693";
+}
+
+.icon-create-group-2:before {
+  content: "\e616";
 }
 
 .icon-qrcode:before {
@@ -67,10 +139,6 @@
   content: "\e611";
 }
 
-.icon-username:before {
-  content: "\e60f";
-}
-
 .icon-chat-muted:before {
   content: "\e634";
 }
@@ -87,18 +155,10 @@
   content: "\e63c";
 }
 
-.icon-user-protocol:before {
-  content: "\e61a";
-}
-
 .icon-film:before {
   content: "\e66b";
 }
 
-.icon-chat:before {
-  content: "\e624";
-}
-
 .icon-delete:before {
   content: "\e605";
 }