From 460ac80e78e0f77e2df767678863d2d62e4bf846 Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Fri, 10 Jan 2025 00:08:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=94=AE=E7=9B=98=E9=81=AE?=
 =?UTF-8?q?=E6=8C=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/com/bx/implatform/vo/UserVO.java     |   6 +-
 im-uniapp/pages/group/group-edit.vue          | 110 ++++++++++-----
 im-uniapp/pages/group/group-info.vue          |  95 ++++++++-----
 im-uniapp/pages/mine/mine-edit.vue            | 126 +++++++++++++-----
 4 files changed, 228 insertions(+), 109 deletions(-)

diff --git a/im-platform/src/main/java/com/bx/implatform/vo/UserVO.java b/im-platform/src/main/java/com/bx/implatform/vo/UserVO.java
index ae8345b..f54b17d 100644
--- a/im-platform/src/main/java/com/bx/implatform/vo/UserVO.java
+++ b/im-platform/src/main/java/com/bx/implatform/vo/UserVO.java
@@ -15,12 +15,12 @@ public class UserVO {
     private Long id;
 
     @NotEmpty(message = "用户名不能为空")
-    @Length(max = 64, message = "用户名不能大于64字符")
+    @Length(max = 20, message = "用户名不能大于20字符")
     @Schema(description = "用户名")
     private String userName;
 
     @NotEmpty(message = "用户昵称不能为空")
-    @Length(max = 64, message = "昵称不能大于64字符")
+    @Length(max = 20, message = "昵称不能大于20字符")
     @Schema(description = "用户昵称")
     private String nickName;
 
@@ -30,7 +30,7 @@ public class UserVO {
     @Schema(description = "用户类型 1:普通用户 2:审核账户")
     private Integer type;
 
-    @Length(max = 1024, message = "个性签名不能大于1024个字符")
+    @Length(max = 128, message = "个性签名不能大于128个字符")
     @Schema(description = "个性签名")
     private String signature;
 
diff --git a/im-uniapp/pages/group/group-edit.vue b/im-uniapp/pages/group/group-edit.vue
index a5bef32..b3912c8 100644
--- a/im-uniapp/pages/group/group-edit.vue
+++ b/im-uniapp/pages/group/group-edit.vue
@@ -1,31 +1,33 @@
 <template>
-	<view class="page group-edit">
+	<view  class="page group-edit">
 		<nav-bar back>修改群资料</nav-bar>
-		<uni-card :is-shadow="false" is-full :border="false">
-			<uni-forms ref="form" :modelValue="group" :rules="rules" validate-trigger="bind" label-position="top"
-				label-width="100%">
-				<uni-forms-item name="headImage" class="avatar">
-					<image-upload v-if="isOwner" :onSuccess="onUnloadImageSuccess">
-						<image :src="group.headImageThumb" class="group-image"></image>
-					</image-upload>
-					<head-image v-if="!isOwner" :name="group.showGroupName" :url="group.headImageThumb"
-						:size="200"></head-image>
-				</uni-forms-item>
-				<uni-forms-item label="群聊名称" name="name" :required="true">
-					<uni-easyinput type="text" v-model="group.name" :disabled="!isOwner" placeholder="请输入群聊名称" />
-				</uni-forms-item>
-				<uni-forms-item label="群聊备注" name="remarkGroupName">
-					<uni-easyinput v-model="group.remarkGroupName" type="text" :placeholder="group.name" />
-				</uni-forms-item>
-				<uni-forms-item label="我在本群的昵称" name="remarkNickName">
-					<uni-easyinput v-model="group.remarkNickName" type="text"
-						:placeholder="userStore.userInfo.nickName" />
-				</uni-forms-item>
-				<uni-forms-item label="群公告" name="notice">
-					<uni-easyinput type="textarea" v-model="group.notice" :disabled="!isOwner" placeholder="请输入群公告" />
-				</uni-forms-item>
-			</uni-forms>
-		</uni-card>
+		<view class="form">
+			<view class="form-item">
+				<view class="label">群聊头像</view>
+				<view class="value"></view>
+				<image-upload v-if="isOwner" :onSuccess="onUnloadImageSuccess">
+					<image :src="group.headImageThumb" class="group-image"></image>
+				</image-upload>
+				<head-image v-else class="group-image" :name="group.showGroupName" :url="group.headImageThumb"
+					:size="120"></head-image>
+			</view>
+			<view class="form-item">
+				<view class="label">群聊名称</view>
+				<input class="input" :class="isOwner?'':'disable'" maxlength="20"  v-model="group.name" :disabled="!isOwner" placeholder="请输入群聊名称"/>
+			</view>
+			<view class="form-item">
+				<view class="label">群聊备注</view>
+				<input class="input" maxlength="20"  v-model="group.remarkGroupName"  :placeholder="group.name"/>
+			</view>
+			<view class="form-item">
+				<view class="label">我在本群的昵称</view>
+				<input class="input" maxlength="20"  v-model="group.remarkNickName"  :placeholder="userStore.userInfo.nickName"/>
+			</view>
+			<view class="form-item">
+				<view class="label">群公告</view>
+				<textarea class="notice" :class="isOwner?'':'disable'" maxlength="512" :disabled="!isOwner" v-model="group.notice" :placeholder="isOwner?'请输入群公告':''"></textarea>
+			</view>
+		</view>	
 		<button class="bottom-btn" type="primary" @click="submit()">提交</button>
 	</view>
 </template>
@@ -46,6 +48,7 @@ export default {
 			}
 		}
 	},
+
 	methods: {
 		submit() {
 			if (this.group.id) {
@@ -141,17 +144,54 @@ export default {
 
 <style lang="scss" scoped>
 .group-edit {
-	//padding: 20rpx;
 
-	.group-image {
-		width: 200rpx;
-		height: 200rpx;
-		border: 1px solid #ccc;
-		border-radius: 5%;
+	.form {
+		margin-top: 20rpx;
+	
+		.form-item {
+			padding: 0 40rpx;
+			display: flex;
+			background: white;
+			align-items: center;
+			margin-bottom: 2rpx;
+	
+			.label {
+				width: 220rpx;
+				line-height: 100rpx;
+				font-size: $im-font-size;
+				white-space: nowrap;
+			}
+			
+			.value{
+				flex: 1;
+			}
+			
+			.input {
+				flex: 1;
+				text-align: right;
+				line-height: 100rpx;
+				font-size: $im-font-size-small;
+			}
+			
+			.disable {
+				color: $im-text-color-lighter;
+			}
+			
+			.notice {
+				flex: 1;
+				font-size: $im-font-size-small;
+				max-height: 200rpx;
+				padding: 14rpx 0;
+			}
+			
+			.group-image {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 5%;
+				border: 1px solid #ccc;
+			}
+		}
 	}
 }
 
-.avatar {
-	margin-top: -30px;
-}
 </style>
diff --git a/im-uniapp/pages/group/group-info.vue b/im-uniapp/pages/group/group-info.vue
index 8f48df6..b4aff2a 100644
--- a/im-uniapp/pages/group/group-info.vue
+++ b/im-uniapp/pages/group/group-info.vue
@@ -18,33 +18,33 @@
 			</view>
 			<view class="member-more" @click="onShowMoreMmeber()">{{ `查看全部群成员${groupMembers.length}人` }}></view>
 		</view>
-		<view class="group-detail">
-
-			<uni-section title="群聊名称">
-				<template v-slot:right>
-					<text class="detail-text">{{ group.name }}</text>
-				</template>
-			</uni-section>
-			<uni-section title="群主">
-				<template v-slot:right>
-					<text class="detail-text">{{ ownerName }}</text>
-				</template>
-			</uni-section>
-			<uni-section title="群名备注">
-				<template v-slot:right>
-					<text class="detail-text"> {{ group.remarkGroupName }}</text>
-				</template>
-			</uni-section>
-			<uni-section title="我在本群的昵称">
-				<template v-slot:right>
-					<text class="detail-text"> {{ group.showNickName }}</text>
-				</template>
-			</uni-section>
-			<uni-section v-if="group.notice" title="群公告">
+		<view class="form">
+			<view class="form-item">
+				<view class="label">群聊名称</view>
+				<view class="value">{{group.name}}</view>
+			</view>
+			<view class="form-item">
+				<view class="label">群主</view>
+				<view class="value">{{ownerName}}</view>
+			</view>
+			<view class="form-item">
+				<view class="label">群名备注</view>
+				<view class="value">{{group.remarkGroupName}}</view>
+			</view>
+			<view class="form-item">
+				<view class="label">我在本群的昵称</view>
+				<view class="value">{{group.showNickName}}</view>
+			</view>
+			<view v-if="group.notice" class="form-item" >
+				<view class="label">群公告</view>
+			</view>
+			<view v-if="group.notice" class="form-item" >
 				<uni-notice-bar :text="group.notice" />
-			</uni-section>
+			</view>
+			
 			<view v-if="!group.quit" class="group-edit" @click="onEditGroup()">修改群聊资料 > </view>
 		</view>
+		
 		<bar-group v-if="!group.quit">
 			<btn-bar type="primary" title="发送消息" @tap="onSendMessage()"></btn-bar>
 			<btn-bar v-if="!isOwner" type="danger" title="退出群聊" @tap="onQuitGroup()"></btn-bar>
@@ -63,7 +63,7 @@ export default {
 		}
 	},
 	methods: {
-		onFocusSearch() { },
+		onFocusSearch() {},
 		onInviteMember() {
 			uni.navigateTo({
 				url: `/pages/group/group-invite?id=${this.groupId}`
@@ -113,7 +113,8 @@ export default {
 										url: "/pages/group/group"
 									});
 									this.groupStore.removeGroup(this.groupId);
-									this.chatStore.removeGroupChat(this.groupId);
+									this.chatStore.removeGroupChat(this
+										.groupId);
 								}, 100)
 							}
 						})
@@ -142,7 +143,8 @@ export default {
 										url: "/pages/group/group"
 									});
 									this.groupStore.removeGroup(this.groupId);
-									this.chatStore.removeGroupChat(this.groupId);
+									this.chatStore.removeGroupChat(this
+										.groupId);
 								}, 100)
 							}
 						})
@@ -194,7 +196,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .group-info {
 	.group-members {
 		padding: 30rpx;
@@ -245,19 +247,38 @@ export default {
 		}
 	}
 
+	.form {
+		margin-top: 20rpx;
 
-	.group-detail {
-		margin-top: 30rpx;
-		padding: 20rpx 20rpx;
-		background: white;
-
-		.detail-text {
-			font-size: $im-font-size;
+		.form-item {
+			padding: 0 40rpx;
+			display: flex;
+			background: white;
+			align-items: center;
+			margin-top: 2rpx;
+			
+			.label {
+				width: 220rpx;
+				line-height: 100rpx;
+				font-size: $im-font-size;
+				white-space: nowrap;
+			}
+	
+			.value {
+				flex: 1;
+				text-align: right;
+				line-height: 100rpx;
+				color: $im-text-color-lighter;
+				font-size: $im-font-size-small;
+				white-space: nowrap;
+				overflow: hidden;
+			}
 		}
-
+		
 		.group-edit {
-			padding-top: 30rpx;
+			padding: 10rpx 40rpx 30rpx 40rpx	;
 			text-align: center;
+			background: white;
 			font-size: $im-font-size-small;
 			color: $im-text-color-lighter;
 		}
diff --git a/im-uniapp/pages/mine/mine-edit.vue b/im-uniapp/pages/mine/mine-edit.vue
index 8fda220..d4d719e 100644
--- a/im-uniapp/pages/mine/mine-edit.vue
+++ b/im-uniapp/pages/mine/mine-edit.vue
@@ -1,28 +1,35 @@
 <template>
 	<view class="page mine-edit">
 		<nav-bar back>修改我的信息</nav-bar>
-		<uni-card :is-shadow="false" is-full :border="false">
-			<uni-forms ref="form" :modelValue="userInfo" label-position="top" label-width="100%">
-				<uni-forms-item name="headImage" class="avatar">
-					<image-upload :onSuccess="onUnloadImageSuccess">
-						<image :src="userInfo.headImageThumb" class="head-image"></image>
-					</image-upload>
-				</uni-forms-item>
-				<uni-forms-item label="用户名" name="userName">
-					<uni-easyinput type="text" v-model="userInfo.userName" :disabled="true" />
-				</uni-forms-item>
-				<uni-forms-item label="昵称" name="nickName">
-					<uni-easyinput v-model="userInfo.nickName" type="text" :placeholder="userInfo.userName" />
-				</uni-forms-item>
-				<uni-forms-item label="性别" name="sex">
-					<uni-data-checkbox v-model="userInfo.sex"
-						:localdata="[{ text: '男', value: 0 }, { text: '女', value: 1 }]"></uni-data-checkbox>
-				</uni-forms-item>
-				<uni-forms-item label="签名" name="signature">
-					<uni-easyinput type="textarea" v-model="userInfo.signature" placeholder="编辑个性标签,展示我的独特态度" />
-				</uni-forms-item>
-			</uni-forms>
-		</uni-card>
+		<view class="form">
+			<view class="form-item">
+				<view class="label">头像</view>
+				<image-upload class="value" :onSuccess="onUnloadImageSuccess">
+					<image :src="userInfo.headImageThumb" class="head-image"></image>
+				</image-upload>
+			</view>
+			<view class="form-item">
+				<view class="label">账号</view>
+				<view class="value">{{userInfo.userName}}</view>
+			</view>
+			<view class="form-item">
+				<view class="label">昵称</view>
+				<input class="input" maxlength="20" v-model="userInfo.nickName" placeholder="请输入您的昵称" />
+			</view>
+			<view class="form-item">
+				<view class="label">性别</view>
+				<radio-group class="radio-group" @change="onSexChange">
+					<radio class="radio" :value="0" :checked="userInfo.sex==0">男</radio>
+					<radio class="radio" :value="1" :checked="userInfo.sex==1">女</radio>
+				</radio-group>
+			</view>
+			<view class="form-item">
+				<view class="label">个性签名</view>
+				<textarea class="signature" maxlength="128" auto-height v-model="userInfo.signature"
+					:style="{'text-align': signTextAlign}" @linechange="onLineChange"
+					placeholder="编辑个性签名,展示我的独特态度"></textarea>
+			</view>
+		</view>
 		<button type="primary" class="bottom-btn" @click="onSubmit()">提交</button>
 	</view>
 </template>
@@ -31,11 +38,12 @@
 export default {
 	data() {
 		return {
+			signTextAlign: 'right',
 			userInfo: {}
 		}
 	},
 	methods: {
-		onSexchange(e) {
+		onSexChange(e) {
 			this.userInfo.sex = e.detail.value;
 		},
 		onUnloadImageSuccess(file, res) {
@@ -53,10 +61,10 @@ export default {
 					title: "修改成功",
 					icon: 'none'
 				});
-				setTimeout(() => {
-					uni.navigateBack();
-				}, 1000);
 			})
+		},
+		onLineChange(e) {
+			this.signTextAlign = e.detail.lineCount > 1 ? "left" : "right";
 		}
 	},
 	onLoad() {
@@ -69,13 +77,63 @@ export default {
 
 <style scoped lang="scss">
 .mine-edit {
-	.head-image {
-		width: 200rpx;
-		height: 200rpx;
-	}
-}
 
-.avatar {
-	margin-top: -30px;
+	.form {
+		margin-top: 20rpx;
+
+		.form-item {
+			padding: 0 40rpx;
+			display: flex;
+			background: white;
+			align-items: center;
+			margin-bottom: 2rpx;
+
+			.label {
+				width: 200rpx;
+				line-height: 100rpx;
+				font-size: $im-font-size;
+			}
+
+			.value {
+				flex: 1;
+				text-align: right;
+				line-height: 100rpx;
+				color: $im-text-color-lighter;
+				font-size: $im-font-size-small;
+			}
+
+
+
+			.radio-group {
+				flex: 1;
+				text-align: right;
+
+				.radio {
+					margin-left: 50rpx;
+				}
+			}
+
+			.input {
+				flex: 1;
+				text-align: right;
+				line-height: 100rpx;
+				font-size: $im-font-size-small;
+			}
+
+			.signature {
+				flex: 1;
+				font-size: $im-font-size-small;
+				max-height: 160rpx;
+				padding: 14rpx 0;
+				text-align: right;
+			}
+
+			.head-image {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 5%;
+			}
+		}
+	}
 }
-</style>
+</style>
\ No newline at end of file