细节优化

im-platform/src/main/java/com/bx/implatform/dto/RegisterDTO.java

@@ -9,7 +9,7 @@ import org.hibernate.validator.constraints.Length;
 @Schema(description = "用户注册DTO")
 public class RegisterDTO {
 
-    @Length(max = 64, message = "用户名不能大于64字符")
+    @Length(max = 20, message = "用户名不能大于20字符")
     @NotEmpty(message = "用户名不可为空")
     @Schema(description = "用户名")
     private String userName;
@@ -19,7 +19,7 @@ public class RegisterDTO {
     @Schema(description = "用户密码")
     private String password;
 
-    @Length(max = 64, message = "昵称不能大于64字符")
+    @Length(max = 20, message = "昵称不能大于20字符")
     @NotEmpty(message = "用户昵称不可为空")
     @Schema(description = "用户昵称")
     private String nickName;

im-uniapp/components/chat-at-box/chat-at-box.vue

@@ -20,10 +20,12 @@
 			<view class="member-items">
 				<virtual-scroller :items="memberItems">
 					<template v-slot="{ item }">
-						<view class="member-item" :class="{ checked: item.checked }" @click="onSwitchChecked(item)">
+						<view class="member-item"  @click="onSwitchChecked(item)">
 							<head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
 								size="small"></head-image>
 							<view class="member-name">{{ item.showNickName }}</view>
+							<radio :checked="item.checked" :disabled="item.locked"
+								@click.stop="onSwitchChecked(item)" />
 						</view>
 					</template>
 				</virtual-scroller>
@@ -152,11 +154,11 @@ export default {
 			background-color: white;
 			white-space: nowrap;
 			margin-bottom: 1px;
-
-			&.checked {
-				background-color: $im-color-primary-light-9;
+			
+			&:hover {
+				background-color: $im-bg-active;
 			}
-
+			
 			.member-name {
 				flex: 1;
 				padding-left: 20rpx;

im-uniapp/components/friend-item/friend-item.vue

@@ -7,6 +7,7 @@
 				<image v-show="friend.onlineWeb" class="online" src="/static/image/online_web.png" title="电脑设备在线" />
 				<image v-show="friend.onlineApp" class="online" src="/static/image/online_app.png" title="移动设备在线" />
 			</view>
+			<slot></slot>
 		</view>
 	</view>
 </template>
@@ -51,11 +52,11 @@ export default {
 	.friend-info {
 		flex: 1;
 		display: flex;
-		flex-direction: column;
 		padding-left: 20rpx;
 		text-align: left;
 
 		.friend-name {
+			flex: 1;
 			font-size: $im-font-size;
 			white-space: nowrap;
 			overflow: hidden;

im-uniapp/im.scss

@@ -102,9 +102,34 @@ button[size='mini'] {
 	}
 }
 
+
+.uni-radio-input svg{
+	border-color: white !important;
+	background-color: $im-color-primary !important;
+}
+
+.uni-radio-input svg {
+	background-color:  $im-color-primary !important;
+	border-color: $im-color-primary !important;
+	background-clip: content-box !important;
+	box-sizing: border-box;
+	border-radius: 50%;
+	transform: translate(-50%, -50%) scale(0.7)!important; 
+}
+
+.uni-radio-input svg path{
+	fill: $im-color-primary !important;
+}
+
 .uni-radio-input {
-	//border-color: $im-color-primary !important;
-	//background-color: $im-color-primary !important;
+	background-color: white !important;
+	border-color: $im-color-primary !important;
+}	
+
+.uni-radio-input-disabled {
+	background-color: rgb(225, 225, 225) !important;
+	border-color: rgb(209, 209, 209) !important;
+	opacity: 0.5;
 }
 
 .uni-section__content-title {

im-uniapp/pages/chat/chat-box.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="page chat-box">
+	<view class="page chat-box" id="chatBox">
 		<nav-bar back more @more="onShowMore">{{ title }}</nav-bar>
 		<view class="chat-main-box" :style="{height: chatMainHeight+'px'}">
 			<view class="chat-msg" @click="switchChatTabBox('none')">
@@ -17,7 +17,7 @@
 				</scroll-view>
 			</view>
 			<view v-if="atUserIds.length > 0" class="chat-at-bar" @click="openAtBox()">
-				<view class="iconfont icon-at">:&nbsp;</view>
+				<view class="iconfont icon-at">&nbsp;</view>
 				<scroll-view v-if="atUserIds.length > 0" class="chat-at-scroll-box" scroll-x="true" scroll-left="120">
 					<view class="chat-at-items">
 						<view v-for="m in atUserItems" class="chat-at-item" :key="m.userId">
@@ -809,7 +809,7 @@ export default {
 			if (window.visualViewport && uni.getSystemInfoSync().platform == 'ios') {
 				keyboardHeight = this.initHeight - window.visualViewport.height;
 			}
-			console.log("resizeListener:",window.visualViewport.height)
+			console.log("resizeListener:", window.visualViewport.height)
 			this.isShowKeyBoard = keyboardHeight > 150;
 			if (this.isShowKeyBoard) {
 				this.keyboardHeight = keyboardHeight;
@@ -950,11 +950,12 @@ export default {
 		this.$nextTick(() => {
 			this.windowHeight = uni.getSystemInfoSync().windowHeight;
 			this.reCalChatMainHeight()
-			// 兼容ios h5:禁止页面滚动
 			// #ifdef H5
 			this.initHeight = window.innerHeight;
-			document.body.addEventListener('touchmove', function(e) {
-				e.preventDefault();
+			// 兼容ios的h5:禁止页面滚动
+			const chatBox = document.getElementById('chatBox')
+			chatBox.addEventListener('touchmove', e => {
+				e.preventDefault()
 			}, { passive: false });
 			// #endif
 		});

im-uniapp/pages/group/group-invite.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="page group-invite">
+		<nav-bar back>邀请</nav-bar>
 		<view class="nav-bar">
 			<view class="nav-search">
 				<uni-search-bar v-model="searchText" radius="100" cancelButton="none"
@@ -7,20 +8,18 @@
 			</view>
 		</view>
 		<view class="friend-items">
-			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
-				<view v-for="friend in friendItems" :key="friend.id">
-					<view v-show="!searchText || friend.nickName.includes(searchText)" class="friend-item"
-						@click="onSwitchChecked(friend)"
-						:class="{ checked: friend.checked, disabled: friend.disabled }">
-						<head-image :name="friend.nickName" :online="friend.online"
-							:url="friend.headImage"></head-image>
-						<view class="friend-name">{{ friend.nickName }}</view>
-					</view>
-				</view>
-			</scroll-view>
+			<virtual-scroller height="100%" :items="showFriends">
+				<template v-slot="{ item }">
+					<friend-item :friend="item" :detail="false" @tap="onSwitchChecked(item)">
+						<radio @click.stop="onSwitchChecked(item)" :disabled="item.disabled" :checked="item.checked" />
+					</friend-item>
+				</template>
+			</virtual-scroller>
+		</view>
+		<view class="btn-bar">
+			<button class="btn" type="primary" :disabled="inviteSize == 0"
+				@click="onInviteFriends()">邀请({{ inviteSize }}) </button>
 		</view>
-		<button class="bottom-btn" type="primary" :disabled="inviteSize == 0"
-			@click="onInviteFriends()">邀请({{ inviteSize }}) </button>
 	</view>
 </template>
 
@@ -108,6 +107,9 @@ export default {
 	computed: {
 		inviteSize() {
 			return this.friendItems.filter(f => !f.disabled && f.checked).length;
+		},
+		showFriends() {
+			return this.friendItems.filter(f => f.nickName.includes(this.searchText))
 		}
 	},
 	onLoad(options) {
@@ -161,5 +163,14 @@ export default {
 			height: 100%;
 		}
 	}
+	
+	.btn-bar {
+		position: fixed;
+		bottom: 0;
+		background: $im-bg;
+		padding: 30rpx;
+		box-sizing: border-box;
+		width: 100%;
+	}
 }
 </style>

im-uniapp/pages/mine/mine-password.vue

@@ -4,13 +4,13 @@
 		<uni-card :is-shadow="false" is-full :border="false">
 			<uni-forms ref="form" :modelValue="formData" label-position="top" label-width="100%">
 				<uni-forms-item label="原密码" name="oldPassword">
-					<uni-easyinput type="password" v-model="formData.oldPassword" />
+					<uni-easyinput type="password" v-model="formData.oldPassword" maxlength="20"/>
 				</uni-forms-item>
 				<uni-forms-item label="新密码" name="newPassword">
-					<uni-easyinput type="password" v-model="formData.newPassword" />
+					<uni-easyinput type="password" v-model="formData.newPassword" maxlength="20"/>
 				</uni-forms-item>
 				<uni-forms-item label="确认密码" name="confirmPassword">
-					<uni-easyinput type="password" v-model="formData.confirmPassword" />
+					<uni-easyinput type="password" v-model="formData.confirmPassword" maxlength="20"/>
 				</uni-forms-item>
 			</uni-forms>
 		</uni-card>

im-uniapp/pages/register/register.vue

@@ -4,16 +4,16 @@
 		<view class="form">
 			<uni-forms  ref="form" :modelValue="dataForm" :rules="rules" validate-trigger="bind" label-width="80px">
 				<uni-forms-item name="userName" label="用户名">
-					<uni-easyinput type="text" v-model="dataForm.userName" placeholder="用户名" />
+					<uni-easyinput type="text" v-model="dataForm.userName" placeholder="用户名"  maxlength="20"/>
 				</uni-forms-item>
 				<uni-forms-item name="nickName" label="昵称">
-					<uni-easyinput type="text" v-model="dataForm.nickName" placeholder="昵称" />
+					<uni-easyinput type="text" v-model="dataForm.nickName" placeholder="昵称" maxlength="20"/>
 				</uni-forms-item>
 				<uni-forms-item name="password" label="密码">
-					<uni-easyinput type="password" v-model="dataForm.password" placeholder="密码" />
+					<uni-easyinput type="password" v-model="dataForm.password" placeholder="密码" maxlength="20"/>
 				</uni-forms-item>
 				<uni-forms-item name="corfirmPassword" label="确认密码">
-					<uni-easyinput type="password" v-model="dataForm.corfirmPassword" placeholder="确认密码" />
+					<uni-easyinput type="password" v-model="dataForm.corfirmPassword" placeholder="确认密码" maxlength="20"/>
 				</uni-forms-item>
 				<button class="btn-submit" @click="submit" type="primary">注册并登录</button>
 			</uni-forms>

im-web/src/components/chat/ChatBox.vue

@@ -3,8 +3,7 @@
 		<el-container>
 			<el-header height="50px">
 				<span>{{ title }}</span>
-				<span title="群聊信息" v-show="isGroup" class="btn-side el-icon-more"
-					@click="showSide = !showSide"></span>
+				<span title="群聊信息" v-show="isGroup" class="btn-side el-icon-more" @click="showSide = !showSide"></span>
 			</el-header>
 			<el-main style="padding: 0;">
 				<el-container>
@@ -321,7 +320,7 @@ export default {
 			// 邀请成员发起通话
 			let ids = [this.mine.id];
 			let maxChannel = this.$store.state.configStore.webrtc.maxChannel;
-			this.$refs.rtcSel.open(maxChannel, ids, ids,[]);
+			this.$refs.rtcSel.open(maxChannel, ids, ids, []);
 		},
 		onInviteOk(members) {
 			if (members.length < 2) {
@@ -699,6 +698,9 @@ export default {
 			handler(newChat, oldChat) {
 				if (newChat.targetId > 0 && (!oldChat || newChat.type != oldChat.type ||
 						newChat.targetId != oldChat.targetId)) {
+					this.userInfo = {}
+					this.group = {};
+					this.groupMembers = [];
 					if (this.chat.type == "GROUP") {
 						this.loadGroup(this.chat.targetId);
 					} else {

im-web/src/components/chat/ChatMessageItem.vue

@@ -253,7 +253,7 @@ export default {
 				padding-left: 5px;
 
 				.chat-msg-text {
-					display: block;
+					display: inline-block;
 					position: relative;
 					line-height: 26px;
 					//margin-top: 3px;

im-web/src/components/setting/Setting.vue

@@ -13,7 +13,7 @@
 				<el-input disabled v-model="userInfo.userName" autocomplete="off" size="small"></el-input>
 			</el-form-item>
 			<el-form-item prop="nickName" label="昵称">
-				<el-input v-model="userInfo.nickName" autocomplete="off" size="small"></el-input>
+				<el-input v-model="userInfo.nickName" autocomplete="off" size="small" maxlength="20"></el-input>
 			</el-form-item>
 			<el-form-item label="性别">
 				<el-radio-group v-model="userInfo.sex">

im-web/src/view/Group.vue

@@ -21,7 +21,7 @@
 		</el-aside>
 		<el-container class="group-box">
 			<div class="group-header" v-show="activeGroup.id">
-				{{ activeGroup.showGroupName }}({{ groupMembers.length }})
+				{{ activeGroup.showGroupName }}({{ showMembers.length }})
 			</div>
 			<div class="group-container">
 				<div v-show="activeGroup.id">

im-web/src/view/Register.vue

@@ -9,19 +9,19 @@
 				</div>
 				<el-form-item label="用户名" prop="userName">
 					<el-input type="userName" v-model="registerForm.userName" autocomplete="off"
-						placeholder="用户名(登录使用)"></el-input>
+						placeholder="用户名(登录使用)" maxlength="20"></el-input>
 				</el-form-item>
 				<el-form-item label="昵称" prop="nickName">
 					<el-input type="nickName" v-model="registerForm.nickName" autocomplete="off"
-						placeholder="昵称"></el-input>
+						placeholder="昵称" maxlength="20"></el-input>
 				</el-form-item>
 				<el-form-item label="密码" prop="password">
 					<el-input type="password" v-model="registerForm.password" autocomplete="off"
-						placeholder="密码"></el-input>
+						placeholder="密码" maxlength="20"></el-input>
 				</el-form-item>
 				<el-form-item label="确认密码" prop="confirmPassword">
 					<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"
-						placeholder="确认密码"></el-input>
+						placeholder="确认密码" maxlength="20"></el-input>
 				</el-form-item>
 				<el-form-item>
 					<el-button type="primary" @click="submitForm('registerForm')">注册</el-button>