Browse Source

群聊昵称备注优化

master
xsx 2 years ago
parent
commit
b481b626b1
  1. 5
      db/im-platfrom.sql
  2. 17
      im-platform/src/main/java/com/bx/implatform/entity/GroupMember.java
  3. 4
      im-platform/src/main/java/com/bx/implatform/service/impl/GroupMessageServiceImpl.java
  4. 65
      im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java
  5. 32
      im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java
  6. 4
      im-platform/src/main/java/com/bx/implatform/service/impl/WebrtcGroupServiceImpl.java
  7. 12
      im-platform/src/main/java/com/bx/implatform/vo/GroupMemberVO.java
  8. 16
      im-platform/src/main/java/com/bx/implatform/vo/GroupVO.java
  9. 4
      im-ui/src/components/chat/ChatAtBox.vue
  10. 6
      im-ui/src/components/chat/ChatBox.vue
  11. 4
      im-ui/src/components/chat/ChatGroupMember.vue
  12. 10
      im-ui/src/components/chat/ChatGroupSide.vue
  13. 2
      im-ui/src/components/chat/ChatHistory.vue
  14. 2
      im-ui/src/components/group/AddGroupMember.vue
  15. 4
      im-ui/src/components/group/GroupItem.vue
  16. 4
      im-ui/src/components/group/GroupMember.vue
  17. 4
      im-ui/src/components/group/GroupMemberItem.vue
  18. 2
      im-ui/src/components/group/GroupMemberSelector.vue
  19. 2
      im-ui/src/store/chatStore.js
  20. 2
      im-ui/src/store/groupStore.js
  21. 2
      im-ui/src/view/Chat.vue
  22. 2
      im-ui/src/view/Friend.vue
  23. 31
      im-ui/src/view/Group.vue
  24. 2
      im-ui/src/view/Home.vue
  25. 2
      im-uniapp/App.vue
  26. 12
      im-uniapp/components/chat-at-box/chat-at-box.vue
  27. 4
      im-uniapp/components/group-item/group-item.vue
  28. 8
      im-uniapp/components/group-member-selector/group-member-selector.vue
  29. 10
      im-uniapp/pages/chat/chat-box.vue
  30. 11
      im-uniapp/pages/group/group-edit.vue
  31. 14
      im-uniapp/pages/group/group-info.vue
  32. 4
      im-uniapp/pages/group/group-invite.vue
  33. 12
      im-uniapp/pages/group/group-member.vue
  34. 6
      im-uniapp/pages/group/group.vue
  35. 2
      im-uniapp/store/chatStore.js
  36. 2
      im-uniapp/vite.config.js

5
db/im-platfrom.sql

@ -57,9 +57,10 @@ create table `im_group_member`(
`id` bigint not null auto_increment primary key comment 'id',
`group_id` bigint not null comment '群id',
`user_id` bigint not null comment '用户id',
`alias_name` varchar(255) DEFAULT '' comment '组内显示名称',
`user_nick_name` varchar(255) DEFAULT '' comment '用户昵称',
`remark_nick_name` varchar(255) DEFAULT '' comment '显示昵称备注',
`head_image` varchar(255) DEFAULT '' comment '用户头像',
`remark` varchar(255) DEFAULT '' comment '备注',
`remark_group_name` varchar(255) DEFAULT '' comment '显示群名备注',
`quit` tinyint(1) DEFAULT 0 comment '是否已退出',
`quit_time` datetime DEFAULT NULL comment '退出时间',
`created_time` datetime DEFAULT CURRENT_TIMESTAMP comment '创建时间',

17
im-platform/src/main/java/com/bx/implatform/entity/GroupMember.java

@ -1,5 +1,6 @@
package com.bx.implatform.entity;
import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.extension.activerecord.Model;
@ -38,9 +39,14 @@ public class GroupMember extends Model<GroupMember> {
private Long userId;
/**
* 组内显示名
* 用户昵
*/
private String aliasName;
private String userNickName;
/**
* 显示昵称备注
*/
private String remarkNickName;
/**
* 用户头像
@ -48,9 +54,9 @@ public class GroupMember extends Model<GroupMember> {
private String headImage;
/**
* 备注
* 显示群名备注
*/
private String remark;
private String remarkGroupName;
/**
* 是否已退出
@ -67,5 +73,8 @@ public class GroupMember extends Model<GroupMember> {
*/
private Date quitTime;
public String getShowNickName() {
return StrUtil.isEmpty(remarkNickName) ? userNickName : remarkNickName;
}
}

4
im-platform/src/main/java/com/bx/implatform/service/impl/GroupMessageServiceImpl.java

@ -71,7 +71,7 @@ public class GroupMessageServiceImpl extends ServiceImpl<GroupMessageMapper, Gro
GroupMessage msg = BeanUtils.copyProperties(dto, GroupMessage.class);
msg.setSendId(session.getUserId());
msg.setSendTime(new Date());
msg.setSendNickName(member.getAliasName());
msg.setSendNickName(member.getShowNickName());
if (CollectionUtil.isNotEmpty(dto.getAtUserIds())) {
msg.setAtUserIds(StrUtil.join(",", dto.getAtUserIds()));
}
@ -120,7 +120,7 @@ public class GroupMessageServiceImpl extends ServiceImpl<GroupMessageMapper, Gro
userIds = userIds.stream().filter(uid -> !session.getUserId().equals(uid)).collect(Collectors.toList());
GroupMessageVO msgInfo = BeanUtils.copyProperties(msg, GroupMessageVO.class);
msgInfo.setType(MessageType.RECALL.code());
String content = String.format("'%s'撤回了一条消息", member.getAliasName());
String content = String.format("'%s'撤回了一条消息", member.getShowNickName());
msgInfo.setContent(content);
msgInfo.setSendTime(new Date());

65
im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java

@ -30,7 +30,6 @@ import com.bx.implatform.vo.GroupMessageVO;
import com.bx.implatform.vo.GroupVO;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.cache.annotation.CacheConfig;
import org.springframework.cache.annotation.CacheEvict;
import org.springframework.cache.annotation.Cacheable;
@ -62,17 +61,17 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
group.setOwnerId(user.getId());
this.save(group);
// 把群主加入群
GroupMember groupMember = new GroupMember();
groupMember.setGroupId(group.getId());
groupMember.setUserId(user.getId());
groupMember.setHeadImage(user.getHeadImageThumb());
groupMember.setAliasName(StringUtils.isEmpty(vo.getAliasName()) ? session.getNickName() : vo.getAliasName());
groupMember.setRemark(StringUtils.isEmpty(vo.getRemark()) ? group.getName() : vo.getRemark());
groupMemberService.save(groupMember);
GroupMember member = new GroupMember();
member.setGroupId(group.getId());
member.setUserId(user.getId());
member.setHeadImage(user.getHeadImageThumb());
member.setRemarkNickName(vo.getRemarkNickName());
member.setRemarkGroupName(vo.getRemarkGroupName());
groupMemberService.save(member);
// 返回
vo.setId(group.getId());
vo.setAliasName(groupMember.getAliasName());
vo.setRemark(groupMember.getRemark());
vo.setShowNickName(StrUtil.isEmpty(vo.getRemarkNickName()) ? member.getUserNickName() : vo.getRemarkNickName());
vo.setShowGroupName(StrUtil.isEmpty(vo.getRemarkGroupName()) ? group.getName() : vo.getRemarkGroupName());
log.info("创建群聊,群聊id:{},群聊名称:{}", group.getId(), group.getName());
return vo;
}
@ -84,19 +83,21 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
UserSession session = SessionContext.getSession();
// 校验是不是群主,只有群主能改信息
Group group = this.getAndCheckById(vo.getId());
// 群主有权修改群基本信息
if (group.getOwnerId().equals(session.getUserId())) {
group = BeanUtils.copyProperties(vo, Group.class);
this.updateById(group);
}
// 更新成员信息
GroupMember member = groupMemberService.findByGroupAndUserId(vo.getId(), session.getUserId());
if (Objects.isNull(member) || member.getQuit()) {
throw new GlobalException("您不是群聊的成员");
}
member.setAliasName(StringUtils.isEmpty(vo.getAliasName()) ? session.getNickName() : vo.getAliasName());
member.setRemark(StringUtils.isEmpty(vo.getRemark()) ? Objects.requireNonNull(group).getName() : vo.getRemark());
member.setRemarkNickName(vo.getRemarkNickName());
member.setRemarkGroupName(vo.getRemarkGroupName());
groupMemberService.updateById(member);
// 群主有权修改群基本信息
if (group.getOwnerId().equals(session.getUserId())) {
group = BeanUtils.copyProperties(vo, Group.class);
this.updateById(group);
}
vo.setShowNickName(StrUtil.isEmpty(vo.getRemarkNickName()) ? member.getUserNickName() : vo.getRemarkNickName());
vo.setShowGroupName(StrUtil.isEmpty(vo.getRemarkGroupName()) ? group.getName() : vo.getRemarkGroupName());
log.info("修改群聊,群聊id:{},群聊名称:{}", group.getId(), group.getName());
return vo;
}
@ -174,8 +175,10 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
throw new GlobalException("您未加入群聊");
}
GroupVO vo = BeanUtils.copyProperties(group, GroupVO.class);
vo.setAliasName(member.getAliasName());
vo.setRemark(member.getRemark());
vo.setRemarkGroupName(member.getRemarkGroupName());
vo.setRemarkNickName(member.getRemarkNickName());
vo.setShowNickName(member.getShowNickName());
vo.setShowGroupName(StrUtil.isEmpty(vo.getRemarkGroupName()) ? group.getName() : vo.getRemarkGroupName());
vo.setQuit(member.getQuit());
return vo;
}
@ -215,8 +218,9 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
return groups.stream().map(g -> {
GroupVO vo = BeanUtils.copyProperties(g, GroupVO.class);
GroupMember member = groupMembers.stream().filter(m -> g.getId().equals(m.getGroupId())).findFirst().get();
vo.setAliasName(member.getAliasName());
vo.setRemark(member.getRemark());
vo.setShowNickName(
StrUtil.isEmpty(vo.getRemarkNickName()) ? session.getNickName() : vo.getRemarkNickName());
vo.setShowGroupName(StrUtil.isEmpty(vo.getRemarkGroupName()) ? g.getName() : vo.getRemarkGroupName());
vo.setQuit(member.getQuit());
return vo;
}).collect(Collectors.toList());
@ -238,19 +242,20 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
}
// 找出好友信息
List<Friend> friends = friendsService.findFriendByUserId(session.getUserId());
List<Friend> friendsList = vo.getFriendIds().stream().map(id -> friends.stream().filter(f -> f.getFriendId().equals(id)).findFirst().get())
List<Friend> friendsList = vo.getFriendIds().stream()
.map(id -> friends.stream().filter(f -> f.getFriendId().equals(id)).findFirst().get())
.collect(Collectors.toList());
if (friendsList.size() != vo.getFriendIds().size()) {
throw new GlobalException("部分用户不是您的好友,邀请失败");
}
// 批量保存成员数据
List<GroupMember> groupMembers = friendsList.stream().map(f -> {
Optional<GroupMember> optional = members.stream().filter(m -> m.getUserId().equals(f.getFriendId())).findFirst();
Optional<GroupMember> optional =
members.stream().filter(m -> m.getUserId().equals(f.getFriendId())).findFirst();
GroupMember groupMember = optional.orElseGet(GroupMember::new);
groupMember.setGroupId(vo.getGroupId());
groupMember.setUserId(f.getFriendId());
groupMember.setAliasName(f.getFriendNickName());
groupMember.setRemark(group.getName());
groupMember.setUserNickName(f.getFriendNickName());
groupMember.setHeadImage(f.getFriendHeadImage());
groupMember.setCreatedTime(new Date());
groupMember.setQuit(false);
@ -261,19 +266,23 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
}
// 推送进入群聊消息
List<Long> userIds = groupMemberService.findUserIdsByGroupId(vo.getGroupId());
String memberNames = groupMembers.stream().map(GroupMember::getAliasName).collect(Collectors.joining(","));
String memberNames = groupMembers.stream().map(GroupMember::getShowNickName).collect(Collectors.joining(","));
String content = String.format("'%s'邀请'%s'加入了群聊", session.getNickName(), memberNames);
this.sendTipMessage(vo.getGroupId(), userIds, content);
log.info("邀请进入群聊,群聊id:{},群聊名称:{},被邀请用户id:{}", group.getId(), group.getName(), vo.getFriendIds());
log.info("邀请进入群聊,群聊id:{},群聊名称:{},被邀请用户id:{}", group.getId(), group.getName(),
vo.getFriendIds());
}
@Override
public List<GroupMemberVO> findGroupMembers(Long groupId) {
Group group = getAndCheckById(groupId);
List<GroupMember> members = groupMemberService.findByGroupId(groupId);
List<Long> userIds = members.stream().map(GroupMember::getUserId).collect(Collectors.toList());
List<Long> onlineUserIds = imClient.getOnlineUser(userIds);
return members.stream().map(m -> {
GroupMemberVO vo = BeanUtils.copyProperties(m, GroupMemberVO.class);
vo.setShowNickName(m.getShowNickName());
vo.setShowGroupName(StrUtil.isEmpty(m.getRemarkGroupName()) ? group.getName() : m.getRemarkGroupName());
vo.setOnline(onlineUserIds.contains(m.getUserId()));
return vo;
}).sorted((m1, m2) -> m2.getOnline().compareTo(m1.getOnline())).collect(Collectors.toList());

32
im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java

@ -2,7 +2,7 @@ package com.bx.implatform.service.impl;
import com.alibaba.fastjson.JSON;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.bx.imclient.IMClient;
@ -147,24 +147,20 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
if (Objects.isNull(user)) {
throw new GlobalException("用户不存在");
}
// 更新好友昵称和头像
if (!user.getNickName().equals(vo.getNickName()) || !user.getHeadImageThumb().equals(vo.getHeadImageThumb())) {
QueryWrapper<Friend> queryWrapper = new QueryWrapper<>();
queryWrapper.lambda().eq(Friend::getFriendId, session.getUserId());
List<Friend> friends = friendService.list(queryWrapper);
for (Friend friend : friends) {
friend.setFriendNickName(vo.getNickName());
friend.setFriendHeadImage(vo.getHeadImageThumb());
}
friendService.updateBatchById(friends);
}
// 更新群聊中的头像
if (!user.getHeadImageThumb().equals(vo.getHeadImageThumb())) {
List<GroupMember> members = groupMemberService.findByUserId(session.getUserId());
for (GroupMember member : members) {
member.setHeadImage(vo.getHeadImageThumb());
}
groupMemberService.updateBatchById(members);
// 更新好友昵称和头像
LambdaUpdateWrapper<Friend> wrapper1 = Wrappers.lambdaUpdate();
wrapper1.eq(Friend::getFriendId, session.getUserId());
wrapper1.set(Friend::getFriendNickName,vo.getNickName());
wrapper1.set(Friend::getFriendHeadImage,vo.getHeadImageThumb());
friendService.update(wrapper1);
// 更新群聊中的昵称和头像
LambdaUpdateWrapper<GroupMember> wrapper2 = Wrappers.lambdaUpdate();
wrapper2.eq(GroupMember::getUserId, session.getUserId());
wrapper2.set(GroupMember::getHeadImage,vo.getHeadImageThumb());
wrapper2.set(GroupMember::getUserNickName,vo.getNickName());
groupMemberService.update(wrapper2);
}
// 更新用户信息
user.setNickName(vo.getNickName());

4
im-platform/src/main/java/com/bx/implatform/service/impl/WebrtcGroupServiceImpl.java

@ -219,7 +219,7 @@ public class WebrtcGroupServiceImpl implements WebrtcGroupService {
}
WebrtcUserInfo userInfo = new WebrtcUserInfo();
userInfo.setId(userSession.getUserId());
userInfo.setNickName(member.getAliasName());
userInfo.setNickName(member.getShowNickName());
userInfo.setHeadImage(member.getHeadImage());
// 默认是开启麦克风,关闭摄像头
userInfo.setIsCamera(false);
@ -455,7 +455,7 @@ public class WebrtcGroupServiceImpl implements WebrtcGroupService {
GroupMember member = groupMemberService.findByGroupAndUserId(groupId, hostId);
host = new WebrtcUserInfo();
host.setId(hostId);
host.setNickName(member.getAliasName());
host.setNickName(member.getShowNickName());
host.setHeadImage(member.getHeadImage());
}
vo.setHost(host);

12
im-platform/src/main/java/com/bx/implatform/vo/GroupMemberVO.java

@ -11,7 +11,10 @@ public class GroupMemberVO {
private Long userId;
@Schema(description = "群内显示名称")
private String aliasName;
private String showNickName;
@Schema(description = "群内昵称备注")
private String remarkNickName;
@Schema(description = "头像")
private String headImage;
@ -22,7 +25,10 @@ public class GroupMemberVO {
@Schema(description = "是否在线")
private Boolean online;
@Schema(description = "备注")
private String remark;
@Schema(description = "群名显示名称")
private String showGroupName;
@Schema(description = "群名备注")
private String remarkGroupName;
}

16
im-platform/src/main/java/com/bx/implatform/vo/GroupVO.java

@ -30,13 +30,19 @@ public class GroupVO {
@Schema(description = "群公告")
private String notice;
@Length(max = 20, message = "群聊显示长度不能大于20")
@Length(max = 20, message = "显示昵称长度不能大于20")
@Schema(description = "用户在群显示昵称")
private String aliasName;
private String remarkNickName;
@Length(max = 20, message = "群聊显示长度不能大于20")
@Schema(description = "群聊显示备注")
private String remark;
@Schema(description = "群内显示名称")
private String showNickName;
@Schema(description = "群名显示名称")
private String showGroupName;
@Length(max = 20, message = "群备注长度不能大于20")
@Schema(description = "群名备注")
private String remarkGroupName;
@Schema(description = "是否已删除")
private Boolean deleted;

4
im-ui/src/components/chat/ChatAtBox.vue

@ -46,11 +46,11 @@
if (this.ownerId == userId && name.startsWith(this.searchText)) {
this.showMembers.push({
userId: -1,
aliasName: name
showNickName: name
})
}
this.members.forEach((m) => {
if (m.userId != userId && !m.quit && m.aliasName.startsWith(this.searchText)) {
if (m.userId != userId && !m.quit && m.showNickName.startsWith(this.searchText)) {
this.showMembers.push(m);
}
})

6
im-ui/src/components/chat/ChatBox.vue

@ -238,7 +238,7 @@
element.className = "at"
element.dataset.id = member.userId;
element.contentEditable = 'false'
element.innerText = `@${member.aliasName}`
element.innerText = `@${member.showNickName}`
range.insertNode(element)
//
range.collapse()
@ -495,7 +495,7 @@
members.forEach(m => {
userInfos.push({
id: m.userId,
nickName: m.aliasName,
nickName: m.showNickName,
headImage: m.headImage,
isCamera: false,
isMicroPhone: true
@ -701,7 +701,7 @@
showName(msgInfo) {
if (this.chat.type == 'GROUP') {
let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
return member ? member.aliasName : "";
return member ? member.showNickName : "";
} else {
return msgInfo.sendId == this.mine.id ? this.mine.nickName : this.chat.showName
}

4
im-ui/src/components/chat/ChatGroupMember.vue

@ -1,10 +1,10 @@
<template>
<div class="chat-group-member" :style="{'height':height+'px'}">
<div class="member-avatar">
<head-image :size="headImageSize" :name="member.aliasName" :url="member.headImage"> </head-image>
<head-image :size="headImageSize" :name="member.showNickName" :url="member.headImage"> </head-image>
</div>
<div class="member-name" :style="{'line-height':height+'px'}">
<div>{{ member.aliasName }}</div>
<div>{{ member.showNickName }}</div>
</div>
</div>
</template>

10
im-ui/src/components/chat/ChatGroupSide.vue

@ -16,7 +16,7 @@
@close="showAddGroupMember=false"></add-group-member>
</div>
<div v-for="(member) in groupMembers" :key="member.id">
<group-member class="group-side-member" v-show="!member.quit && member.aliasName.startsWith(searchText)" :member="member"
<group-member class="group-side-member" v-show="!member.quit && member.showNickName.includes(searchText)" :member="member"
:showDel="false"></group-member>
</div>
</div>
@ -32,12 +32,12 @@
<el-input v-model="group.notice" disabled type="textarea" maxlength="1024" placeholder="群主未设置"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="group.remark" :disabled="!editing" placeholder="群聊的备注仅自己可见" maxlength="20"></el-input>
<el-input v-model="group.remarkGroupName" :disabled="!editing" :placeholder="group.name" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="我在本群的昵称">
<el-input v-model="group.aliasName" :disabled="!editing" placeholder="xx" maxlength="20"></el-input>
<el-input v-model="group.remarkNickName" :disabled="!editing" maxlength="20"
:placeholder="$store.state.userStore.userInfo.nickName" ></el-input>
</el-form-item>
<div v-show="!group.quit" class="btn-group">
<el-button v-show="editing" type="success" @click="onSaveGroup()">提交</el-button>
<el-button v-show="!editing" type="primary" @click="editing=!editing">编辑</el-button>
@ -119,7 +119,7 @@
computed: {
ownerName() {
let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
return member && member.aliasName;
return member && member.showNickName;
},
isOwner() {
return this.group.ownerId == this.$store.state.userStore.userInfo.id;

2
im-ui/src/components/chat/ChatHistory.vue

@ -98,7 +98,7 @@
showName(msgInfo) {
if (this.chat.type == 'GROUP') {
let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
return member ? member.aliasName : "";
return member ? member.showNickName : "";
} else {
return msgInfo.sendId == this.mine.id ? this.mine.nickName : this.chat.showName
}

2
im-ui/src/components/group/AddGroupMember.vue

@ -8,7 +8,7 @@
</el-input>
<el-scrollbar style="height:400px;">
<div v-for="(friend,index) in friends" :key="friend.id">
<friend-item v-show="friend.nickName.startsWith(searchText)" :showDelete="false"
<friend-item v-show="friend.nickName.includes(searchText)" :showDelete="false"
@click.native="onSwitchCheck(friend)" :menu="false" :friend="friend" :index="index"
:active="false">
<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox"

4
im-ui/src/components/group/GroupItem.vue

@ -1,10 +1,10 @@
<template>
<div class="group-item" :class="active ? 'active' : ''">
<div class="group-avatar">
<head-image :size="45" :name="group.remark" :url="group.headImage"> </head-image>
<head-image :size="45" :name="group.showGroupName" :url="group.headImage"> </head-image>
</div>
<div class="group-name">
<div>{{group.remark}}</div>
<div>{{group.showGroupName}}</div>
</div>
</div>
</template>

4
im-ui/src/components/group/GroupMember.vue

@ -1,11 +1,11 @@
<template>
<div class="group-member">
<head-image :id="member.userId" :name="member.aliasName"
<head-image :id="member.userId" :name="member.showNickName"
:url="member.headImage" :size="50"
:online="member.online" >
<div v-if="showDel" @click.stop="onDelete()" class="btn-kick el-icon-error"></div>
</head-image>
<div class="member-name">{{member.aliasName}}</div>
<div class="member-name">{{member.showNickName}}</div>
</div>
</template>

4
im-ui/src/components/group/GroupMemberItem.vue

@ -1,11 +1,11 @@
<template>
<div class="group-member-item" :style="{'height':height+'px'}">
<div class="member-avatar">
<head-image :size="headImageSize" :name="member.aliasName"
<head-image :size="headImageSize" :name="member.showNickName"
:url="member.headImage" :online="member.online"> </head-image>
</div>
<div class="member-name" :style="{'line-height':height+'px'}">
<div>{{ member.aliasName }}</div>
<div>{{ member.showNickName }}</div>
</div>
<slot></slot>
</div>

2
im-ui/src/components/group/GroupMemberSelector.vue

@ -7,7 +7,7 @@
</el-input>
<el-scrollbar style="height:400px;">
<div v-for="m in members" :key="m.userId">
<group-member-item v-show="!m.quit&&m.aliasName.startsWith(searchText)"
<group-member-item v-show="!m.quit&&m.showNickName.includes(searchText)"
:member="m" @click.native="onClickMember(m)">
<el-checkbox :disabled="m.locked" v-model="m.checked" @change="onChange(m)"
@click.native.stop=""></el-checkbox>

2
im-ui/src/store/chatStore.js

@ -233,7 +233,7 @@ export default {
let chat = state.chats[i];
if (chat.type == 'GROUP' && chat.targetId == group.id) {
chat.headImage = group.headImageThumb;
chat.showName = group.remark;
chat.showName = group.showGroupName;
break;
}
}

2
im-ui/src/store/groupStore.js

@ -22,7 +22,7 @@ export default {
state.groups.splice(idx, 1);
}
})
if (state.activeGroup.id == groupId) {
if (state.activeGroup && state.activeGroup.id == groupId) {
state.activeGroup = null;
}
},

2
im-ui/src/view/Chat.vue

@ -12,7 +12,7 @@
</div>
<el-scrollbar class="chat-list-items">
<div v-for="(chat,index) in chatStore.chats" :key="index">
<chat-item v-show="chat.showName.startsWith(searchText)" :chat="chat" :index="index"
<chat-item v-show="chat.showName.includes(searchText)" :chat="chat" :index="index"
@click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)"
:active="chat === chatStore.activeChat"></chat-item>
</div>

2
im-ui/src/view/Friend.vue

@ -11,7 +11,7 @@
</div>
<el-scrollbar class="friend-list-items">
<div v-for="(friend,index) in $store.state.friendStore.friends" :key="index">
<friend-item v-show="friend.nickName.startsWith(searchText)" :index="index"
<friend-item v-show="friend.nickName.includes(searchText)" :index="index"
:active="friend === $store.state.friendStore.activeFriend" @chat="onSendMessage(friend)"
@delete="onDelItem(friend,index)" @click.native="onActiveItem(friend,index)">
</friend-item>

31
im-ui/src/view/Group.vue

@ -5,12 +5,11 @@
<el-input class="search-text" placeholder="搜索" v-model="searchText">
<i class="el-icon-search el-input__icon" slot="prefix"> </i>
</el-input>
<el-button plain class="add-btn" icon="el-icon-plus" title="创建群聊"
@click="onCreateGroup()"></el-button>
<el-button plain class="add-btn" icon="el-icon-plus" title="创建群聊" @click="onCreateGroup()"></el-button>
</div>
<el-scrollbar class="group-list-items">
<div v-for="(group,index) in groupStore.groups" :key="index">
<group-item v-show="!group.quit&&group.remark.startsWith(searchText)" :group="group"
<group-item v-show="!group.quit&&group.showGroupName.includes(searchText)" :group="group"
:active="group === groupStore.activeGroup" @click.native="onActiveItem(group,index)">
</group-item>
</div>
@ -18,7 +17,7 @@
</el-aside>
<el-container class="group-box">
<div class="group-header" v-show="activeGroup.id">
{{activeGroup.remark}}({{groupMembers.length}})
{{activeGroup.showGroupName}}({{groupMembers.length}})
</div>
<el-scrollbar class="group-container">
<div v-show="activeGroup.id">
@ -31,7 +30,7 @@
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</file-upload>
<head-image v-show="!isOwner" class="avatar" :size="200" :url="activeGroup.headImage"
:name="activeGroup.remark">
:name="activeGroup.showGroupName">
</head-image>
<el-button class="send-btn" icon="el-icon-position" type="primary"
@click="onSendMessage()">发消息</el-button>
@ -44,12 +43,13 @@
<el-form-item label="群主">
<el-input :value="ownerName" disabled></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="activeGroup.remark" placeholder="群聊的备注仅自己可见"
<el-form-item label="群名备注">
<el-input v-model="activeGroup.remarkGroupName" :placeholder="activeGroup.name"
maxlength="20"></el-input>
</el-form-item>
<el-form-item label="我在本群的昵称">
<el-input v-model="activeGroup.aliasName" placeholder="" maxlength="20"></el-input>
<el-input v-model="activeGroup.remarkNickName" maxlength="20"
:placeholder="$store.state.userStore.userInfo.nickName"></el-input>
</el-form-item>
<el-form-item label="群公告">
<el-input v-model="activeGroup.notice" :disabled="!isOwner" type="textarea"
@ -128,10 +128,7 @@
}).then((o) => {
let userInfo = this.$store.state.userStore.userInfo;
let data = {
name: o.value,
remark: o.value,
aliasName: userInfo.name,
ownerId: userInfo.id
name: o.value
}
this.$http({
url: `/group/create?groupName=${o.value}`,
@ -192,7 +189,7 @@
},
onKick(member) {
this.$confirm(`确定将成员'${member.aliasName}'移出群聊吗?`, '确认移出?', {
this.$confirm(`确定将成员'${member.showNickName}'移出群聊吗?`, '确认移出?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
@ -204,7 +201,7 @@
userId: member.userId
}
}).then(() => {
this.$message.success(`已将${member.aliasName}移出群聊`);
this.$message.success(`已将${member.showNickName}移出群聊`);
member.quit = true;
});
})
@ -231,7 +228,7 @@
let chat = {
type: 'GROUP',
targetId: this.activeGroup.id,
showName: this.activeGroup.remark,
showName: this.activeGroup.showGroupName,
headImage: this.activeGroup.headImage,
};
this.$store.commit("openChat", chat);
@ -257,7 +254,7 @@
},
ownerName() {
let member = this.groupMembers.find((m) => m.userId == this.activeGroup.ownerId);
return member && member.aliasName;
return member && member.showNickName;
},
isOwner() {
return this.activeGroup.ownerId == this.$store.state.userStore.userInfo.id;
@ -311,6 +308,7 @@
display: flex;
flex-direction: column;
border: #dddddd solid 1px;
.group-header {
padding: 3px;
height: 50px;
@ -325,6 +323,7 @@
.group-container {
padding: 20px;
flex: 1;
.group-info {
display: flex;
padding: 5px 20px;

2
im-ui/src/view/Home.vue

@ -236,7 +236,7 @@
let chatInfo = {
type: 'GROUP',
targetId: group.id,
showName: group.remark,
showName: group.showGroupName,
headImage: group.headImageThumb
};
//

2
im-uniapp/App.vue

@ -237,7 +237,7 @@
let chatInfo = {
type: 'GROUP',
targetId: group.id,
showName: group.remark,
showName: group.showGroupName,
headImage: group.headImageThumb
};
//

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

@ -10,21 +10,21 @@
<scroll-view v-show="atUserIds.length>0" scroll-x="true" scroll-left="120">
<view class="at-user-items">
<view v-for="m in showMembers" v-show="m.checked" class="at-user-item">
<head-image :name="m.aliasName" :url="m.headImage" :size="60"></head-image>
<head-image :name="m.showNickName" :url="m.headImage" :size="60"></head-image>
</view>
</view>
</scroll-view>
<view class="search-bar">
<uni-search-bar v-model="searchText" cancelButton="none" placeholder="搜索"></uni-search-bar>
<uni-search-bar v-model="searchText" cancelButton="none" radius="100" placeholder="搜索"></uni-search-bar>
</view>
<view class="member-items">
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="m in showMembers" v-show="m.aliasName.startsWith(searchText)"
<view v-for="m in showMembers" v-show="m.showNickName.includes(searchText)"
:key="m.userId">
<view class="member-item" @click="onSwitchChecked(m)">
<head-image :name="m.aliasName" :online="m.online" :url="m.headImage"
<head-image :name="m.showNickName" :online="m.online" :url="m.headImage"
:size="90"></head-image>
<view class="member-name">{{ m.aliasName}}</view>
<view class="member-name">{{ m.showNickName}}</view>
<view class="member-checked">
<radio :checked="m.checked" @click.stop="onSwitchChecked(m)" />
</view>
@ -60,7 +60,7 @@
if(this.ownerId == userId){
this.showMembers.push({
userId:-1,
aliasName: "全体成员"
showNickName: "全体成员"
})
}
this.members.forEach((m) => {

4
im-uniapp/components/group-item/group-item.vue

@ -1,9 +1,9 @@
<template>
<view class="group-item" @click="showGroupInfo()">
<head-image :name="group.remark"
<head-image :name="group.showGroupName"
:url="group.headImage" :size="90"></head-image>
<view class="group-name">
<view>{{ group.remark}}</view>
<view>{{ group.showGroupName}}</view>
</view>
</view>
</template>

8
im-uniapp/components/group-member-selector/group-member-selector.vue

@ -10,7 +10,7 @@
<scroll-view v-show="checkedIds.length>0" scroll-x="true" scroll-left="120">
<view class="checked-users">
<view v-for="m in members" v-show="m.checked" class="user-item">
<head-image :name="m.aliasName" :url="m.headImage" :size="60"></head-image>
<head-image :name="m.showNickName" :url="m.headImage" :size="60"></head-image>
</view>
</view>
</scroll-view>
@ -19,11 +19,11 @@
</view>
<view class="member-items">
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="m in members" v-show="!m.quit && m.aliasName.startsWith(searchText)" :key="m.userId">
<view v-for="m in members" v-show="!m.quit && m.showNickName.includes(searchText)" :key="m.userId">
<view class="member-item" @click="onSwitchChecked(m)">
<head-image :name="m.aliasName" :online="m.online" :url="m.headImage"
<head-image :name="m.showNickName" :online="m.online" :url="m.headImage"
:size="90"></head-image>
<view class="member-name">{{ m.aliasName}}</view>
<view class="member-name">{{ m.showNickName}}</view>
<view class="member-checked">
<radio :checked="m.checked" :disabled="m.locked" @click.stop="onSwitchChecked(m)" />
</view>

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

@ -22,7 +22,7 @@
<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">
<head-image :name="m.aliasName" :url="m.headImage" :size="50"></head-image>
<head-image :name="m.showNickName" :url="m.headImage" :size="50"></head-image>
</view>
</view>
</scroll-view>
@ -214,7 +214,7 @@
// ,url
users.push({
id: m.userId,
nickName: m.aliasName,
nickName: m.showNickName,
headImage: m.headImage,
isCamera: false,
isMicroPhone: true
@ -258,7 +258,7 @@
showName(msgInfo) {
if (this.chat.type == 'GROUP') {
let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
return member ? member.aliasName : "";
return member ? member.showNickName : "";
} else {
return msgInfo.selfSend ? this.mine.nickName : this.chat.showName
}
@ -307,7 +307,7 @@
} else {
let member = this.groupMembers.find((m) => m.userId == id);
if (member) {
atText += ` @${member.aliasName}`;
atText += ` @${member.showNickName}`;
}
}
})
@ -673,7 +673,7 @@
if (id == -1) {
atUsers.push({
id: -1,
aliasName: "全体成员"
showNickName: "全体成员"
})
return;
}

11
im-uniapp/pages/group/group-edit.vue

@ -6,17 +6,17 @@
<image-upload v-show="isOwner" :onSuccess="onUnloadImageSuccess">
<image :src="group.headImage" class="group-image"></image>
</image-upload>
<head-image v-show="!isOwner" :name="group.remark"
<head-image v-show="!isOwner" :name="group.showGroupName"
:url="group.headImage" :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="remark">
<uni-easyinput v-model="group.remark" type="text" placeholder="请输入群聊备注" />
<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="email">
<uni-easyinput v-model="group.aliasName" type="text" placeholder="请输入群聊昵称" />
<uni-forms-item label="我在本群的昵称:" name="remarkNickName">
<uni-easyinput v-model="group.remarkNickName" type="text" :placeholder="$store.state.userStore.userInfo.nickName" />
</uni-forms-item>
<uni-forms-item label="群公告:" name="notice">
<uni-easyinput type="textarea" v-model="group.notice" :disabled="!isOwner" placeholder="请输入群公告" />
@ -114,7 +114,6 @@
name: `${userInfo.userName}创建的群聊`,
headImage: userInfo.headImage,
headImageThumb: userInfo.headImageThumb,
aliasName: userInfo.nickName,
ownerId: this.$store.state.userStore.userInfo.id
}
}

14
im-uniapp/pages/group/group-info.vue

@ -4,10 +4,10 @@
<view class="member-items">
<view v-for="(member,idx) in groupMembers" :key="idx">
<view class="member-item" v-if="idx<9">
<head-image :id="member.userId" :name="member.aliasName" :url="member.headImage"
<head-image :id="member.userId" :name="member.showNickName" :url="member.headImage"
:size="100" :online="member.online" ></head-image>
<view class="member-name">
<text>{{member.aliasName}}</text>
<text>{{member.showNickName}}</text>
</view>
</view>
</view>
@ -29,14 +29,14 @@
</template>
</uni-section>
<uni-section title="群备注:" titleFontSize="14px">
<uni-section title="群备注:" titleFontSize="14px">
<template v-slot:right>
<text class="detail-text"> {{group.remark}}</text>
<text class="detail-text"> {{group.showGroupName}}</text>
</template>
</uni-section>
<uni-section title="我在本群的昵称:" titleFontSize="14px">
<template v-slot:right>
<text class="detail-text"> {{group.aliasName}}</text>
<text class="detail-text"> {{group.showNickName}}</text>
</template>
</uni-section>
<uni-section title="群公告:" titleFontSize="14px">
@ -82,7 +82,7 @@
let chat = {
type: 'GROUP',
targetId: this.group.id,
showName: this.group.remark,
showName: this.group.showGroupName,
headImage: this.group.headImage,
};
this.$store.commit("openChat", chat);
@ -177,7 +177,7 @@
computed: {
ownerName() {
let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
return member && member.aliasName;
return member && member.showNickName;
},
isOwner() {
return this.group.ownerId == this.$store.state.userStore.userInfo.id;

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

@ -1,11 +1,11 @@
<template>
<view v-if="$store.state.userStore.userInfo.type == 1" class="page group-invite">
<view class="search-bar">
<uni-search-bar v-model="searchText" cancelButton="none" placeholder="输入好友昵称搜索"></uni-search-bar>
<uni-search-bar v-model="searchText" radius="100" cancelButton="none" placeholder="输入好友昵称搜索"></uni-search-bar>
</view>
<view class="friend-items">
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="friend in friendItems" v-show="!searchText || friend.nickName.startsWith(searchText)"
<view v-for="friend in friendItems" v-show="!searchText || friend.nickName.includes(searchText)"
:key="friend.id">
<view class="friend-item" @click="onSwitchChecked(friend)">
<head-image :name="friend.nickName"

12
im-uniapp/pages/group/group-member.vue

@ -1,18 +1,18 @@
<template>
<view v-if="$store.state.userStore.userInfo.type == 1" class="page group-member">
<view class="search-bar">
<uni-search-bar v-model="searchText" cancelButton="none" placeholder="输入成员昵称搜索"></uni-search-bar>
<uni-search-bar v-model="searchText" radius="100" cancelButton="none" placeholder="输入成员昵称搜索"></uni-search-bar>
</view>
<view class="member-items">
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="(member,idx) in groupMembers"
v-show="!searchText || member.aliasName.startsWith(searchText)" :key="idx">
v-show="!searchText || member.showNickName.includes(searchText)" :key="idx">
<view class="member-item" @click="onShowUserInfo(member.userId)">
<head-image :name="member.aliasName"
<head-image :name="member.showNickName"
:online="member.online" :url="member.headImage"
:size="100"></head-image>
<view class="member-name">{{ member.aliasName}}</view>
<view class="member-name">{{ member.showNickName}}</view>
<view class="member-kick">
<button type="warn" plain v-show="isOwner && !isSelf(member.userId)" size="mini"
@ -44,7 +44,7 @@
onKickOut(member, idx) {
uni.showModal({
title: '确认移出?',
content: `确定将成员'${member.aliasName}'移出群聊吗?`,
content: `确定将成员'${member.showNickName}'移出群聊吗?`,
success: (res) => {
if (res.cancel)
return;
@ -53,7 +53,7 @@
method: 'DELETE'
}).then(() => {
uni.showToast({
title: `已将${member.aliasName}移出群聊`,
title: `已将${member.showNickName}移出群聊`,
icon: 'none'
})
this.groupMembers.splice(idx, 1);

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

@ -2,7 +2,8 @@
<view class="tab-page group">
<view class="nav-bar">
<view class="nav-search">
<uni-search-bar v-model="searchText" cancelButton="none" radius="100" placeholder="点击搜索群聊"></uni-search-bar>
<uni-search-bar v-model="searchText" cancelButton="none" radius="100"
placeholder="点击搜索群聊"></uni-search-bar>
</view>
<view class="nav-add" @click="onCreateNewGroup()">
<uni-icons type="personadd" size="35"></uni-icons>
@ -14,7 +15,8 @@
<view class="group-items" v-else>
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="group in $store.state.groupStore.groups" :key="group.id">
<group-item v-if="!group.quit&&group.remark.includes(searchText)" :group="group"></group-item>
<group-item v-if="!group.quit&&group.showGroupName.includes(searchText)"
:group="group"></group-item>
</view>
</scroll-view>
</view>

2
im-uniapp/store/chatStore.js

@ -278,7 +278,7 @@ export default {
let chat = chats[i];
if (chat.type == 'GROUP' && chat.targetId == group.id) {
chat.headImage = group.headImageThumb;
chat.showName = group.remark;
chat.showName = group.showGroupName;
break;
}
}

2
im-uniapp/vite.config.js

@ -11,7 +11,7 @@ export default defineConfig({
'/api': {
rewrite: path => path.replace(/^\/api/, ''),
logLevel: 'debug',
target: 'http://localhost:8888',
target: 'http://192.168.2.67:8888',
changeOrigin: true
},

Loading…
Cancel
Save