From 390b66aee8f23397b4b920b141b6db909efb90b1 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Tue, 5 May 2026 18:41:28 +0800 Subject: [PATCH] =?UTF-8?q?feat(im):=20=E7=BE=A4=E7=A6=81=E8=A8=80/?= =?UTF-8?q?=E5=B0=81=E7=A6=81=20UI=20=E4=BA=A4=E4=BA=92=20+=20=E7=BE=A4?= =?UTF-8?q?=E4=B8=BB=E8=A7=A3=E6=95=A3=E7=BE=A4=E8=81=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 一、群禁言交互 - MessageItem 右键菜单新增「禁言/解除禁言/移除」（权限校验） - 新增 GroupMuteMemberDialog 禁言时长选择弹窗 - ConversationGroupSide 新增「全群禁言」开关 - MessageInput 新增禁言/封禁覆盖层，拦截所有发送入口 - canManageSender 目标角色未知时不展示管理菜单 - 全群禁言群主按 ownerUserId 直接豁免，不依赖成员列表 二、群封禁（GROUP_BANNED 1533） - constants 激活 GROUP_BANNED 常量，扩展 isGroupNotification 范围 - groupStore 处理 1533 事件，实时更新 banned 字段 - MessageInput 覆盖层最高优先级判断 banned（红底） - Group 类型、convertGroup 映射 banned 字段 三、禁言事件（1512-1515） - constants 激活 GROUP_MEMBER_MUTED / CANCEL_MUTED / MUTED / CANCEL_MUTED - groupStore 处理 1512-1515 事件，更新 muteEndTime / mutedAll - user.ts 新增 4 条禁言 + 2 条封禁通知文案 - GroupNotificationPayload 扩展 mutedUserId / muteEndTime / banned 四、群主解散群聊 - ConversationGroupSide 底部按钮：群主显示「解散群聊」，非群主显示「退出群聊」 - 新增 handleDissolve 实现（二次确认 → dissolveGroup API → 清本地数据） --- .../group/GroupMuteMemberDialog.vue | 95 ++++++++++++++++ .../conversation/ConversationGroupSide.vue | 70 +++++++++++- .../components/input/MessageInput.vue | 103 +++++++++++++++++- .../components/message/MessageItem.vue | 95 +++++++++++++++- .../components/message/MessagePanel.vue | 12 ++ src/views/im/home/store/groupStore.ts | 43 +++++++- src/views/im/home/types/index.ts | 3 + src/views/im/utils/constants.ts | 15 +-- src/views/im/utils/user.ts | 19 +++- 9 files changed, 436 insertions(+), 19 deletions(-) create mode 100644 src/views/im/home/components/group/GroupMuteMemberDialog.vue diff --git a/src/views/im/home/components/group/GroupMuteMemberDialog.vue b/src/views/im/home/components/group/GroupMuteMemberDialog.vue new file mode 100644 index 000000000..df04b095a --- /dev/null +++ b/src/views/im/home/components/group/GroupMuteMemberDialog.vue @@ -0,0 +1,95 @@ + + + diff --git a/src/views/im/home/pages/conversation/components/conversation/ConversationGroupSide.vue b/src/views/im/home/pages/conversation/components/conversation/ConversationGroupSide.vue index d12166c67..33f063300 100644 --- a/src/views/im/home/pages/conversation/components/conversation/ConversationGroupSide.vue +++ b/src/views/im/home/pages/conversation/components/conversation/ConversationGroupSide.vue @@ -267,6 +267,11 @@ 置顶聊天 + +
+ 全群禁言 + +
@@ -300,10 +305,21 @@ - - -
+ +
+ + 解散群聊 + + + { + if (!props.group) { + return false + } + return groupStore.getGroup(props.group.id)?.mutedAll ?? false +}) + +/** 全群禁言开关切换 */ +async function onMuteAllChange(value: boolean | string | number) { + if (!props.group) { + return + } + // TODO @AI：不要用 next，最好是类似 newValue 这种，更好理解。 + const next = !!value + try { + await muteAll({ groupId: props.group.id, mutedAll: next }) + message.success(next ? '已开启全群禁言' : '已关闭全群禁言') + emit('reload') + } catch { + message.error('操作失败') + } +} + // ==================== 退出群聊 ==================== /** 退出群聊（普通成员入口；群主退出走"解散群"是另一条路径，这里不处理） */ @@ -597,6 +641,24 @@ async function handleQuit() { visible.value = false } +/** 解散群聊（仅群主入口） */ +async function handleDissolve() { + if (!props.group) { + return + } + try { + await message.confirm('解散后所有成员将被移出，且无法恢复，确认解散吗？', '确认解散') + } catch { + return + } + const groupId = props.group.id + await dissolveGroup(groupId) + conversationStore.removeConversation(ImConversationType.GROUP, groupId) + groupStore.removeGroup(groupId) + message.success('群聊已解散') + visible.value = false +} + // ==================== 群主操作 ==================== // 移除群成员（群主 / 管理员可见）+ 设置群管理员（仅群主）+ 群主管理权转让（仅群主） diff --git a/src/views/im/home/pages/conversation/components/input/MessageInput.vue b/src/views/im/home/pages/conversation/components/input/MessageInput.vue index defb8cd5e..9037873c5 100644 --- a/src/views/im/home/pages/conversation/components/input/MessageInput.vue +++ b/src/views/im/home/pages/conversation/components/input/MessageInput.vue @@ -4,6 +4,15 @@ padding 给内层白卡片呼吸空间，卡片自带边框就够区分输入区，不再需要一条 border-t -->
+ +
+ + {{ muteOverlay.text }} +
+ + +
>() + +/** 消息右键菜单「禁言」→ 打开时长选择弹窗 */ +function handleMuteMember(groupId: number, userId: number, displayName: string) { + muteMemberDialogRef.value?.open(groupId, userId, displayName) +} /** 信息抽屉的 toggle：跟 header 上 3 点图标按钮共用 */ function toggleSide() { diff --git a/src/views/im/home/store/groupStore.ts b/src/views/im/home/store/groupStore.ts index 241d2f3a1..dbff78cf6 100644 --- a/src/views/im/home/store/groupStore.ts +++ b/src/views/im/home/store/groupStore.ts @@ -547,6 +547,21 @@ export const useGroupStore = defineStore('imGroupStore', { case ImMessageType.GROUP_MESSAGE_UNPIN: this.applyGroupMessageUnpinNotification(groupId, payload) break + case ImMessageType.GROUP_MEMBER_MUTED: + this.applyGroupMemberMutedNotification(groupId, payload) + break + case ImMessageType.GROUP_MEMBER_CANCEL_MUTED: + this.applyGroupMemberCancelMutedNotification(groupId, payload) + break + case ImMessageType.GROUP_MUTED: + this.updateGroupFields(groupId, { mutedAll: true }) + break + case ImMessageType.GROUP_CANCEL_MUTED: + this.updateGroupFields(groupId, { mutedAll: false }) + break + case ImMessageType.GROUP_BANNED: + this.updateGroupFields(groupId, { banned: !!payload.banned }) + break } }, @@ -679,6 +694,26 @@ export const useGroupStore = defineStore('imGroupStore', { this.saveGroups() }, + /** 单成员禁言：更新目标成员的 muteEndTime */ + applyGroupMemberMutedNotification(groupId: number, payload: GroupNotificationPayload) { + const group = this.getGroup(groupId) + const member = group?.members?.find((m) => m.userId === payload.mutedUserId) + if (member && payload.muteEndTime) { + member.muteEndTime = payload.muteEndTime + this.saveGroupMembers(groupId) + } + }, + + /** 单成员取消禁言：清空目标成员的 muteEndTime */ + applyGroupMemberCancelMutedNotification(groupId: number, payload: GroupNotificationPayload) { + const group = this.getGroup(groupId) + const member = group?.members?.find((m) => m.userId === payload.mutedUserId) + if (member) { + member.muteEndTime = undefined + this.saveGroupMembers(groupId) + } + }, + /** 切账号时仅清 in-memory，IDB 按 userId 分桶天然隔离，回切秒开 */ clear() { this.groups = [] @@ -690,6 +725,7 @@ export const useGroupStore = defineStore('imGroupStore', { } }) +// TODO @AI：vo 改成 group，更好理解点； function convertGroup(vo: ImGroupRespVO): Group { return { id: vo.id, @@ -697,7 +733,9 @@ function convertGroup(vo: ImGroupRespVO): Group { avatar: vo.avatar, notice: vo.notice, ownerUserId: vo.ownerUserId, - pinnedMessages: vo.pinnedMessages?.map(convertGroupMessageVO) + pinnedMessages: vo.pinnedMessages?.map(convertGroupMessageVO), + mutedAll: vo.mutedAll, + banned: vo.banned } } @@ -730,7 +768,8 @@ function convertGroupMember(member: ImGroupMemberRespVO, groupId: number): Group avatar: member.avatar, displayUserName: member.displayUserName, status: member.status, - role: member.role + role: member.role, + muteEndTime: member.muteEndTime } } diff --git a/src/views/im/home/types/index.ts b/src/views/im/home/types/index.ts index 64f42f4b6..d06e44922 100644 --- a/src/views/im/home/types/index.ts +++ b/src/views/im/home/types/index.ts @@ -113,6 +113,8 @@ export interface Group { notice?: string // 群公告 ownerUserId?: number // 群主用户编号 pinnedMessages?: Message[] // 群置顶消息列表 + mutedAll?: boolean // 是否全群禁言 + banned?: boolean // 是否被管理员封禁 // ========== 前端扩展字段（user-per-group 维度） ========== silent?: boolean // 是否免打扰。从当前用户的 GroupMember 回填 @@ -133,6 +135,7 @@ export interface GroupMember { displayUserName?: string // 该成员在群内自定义昵称（每个 member 一份；不与 nickname 合并，由消费方按需取舍） status?: number // 在群 / 退群状态，对齐 CommonStatusEnum role?: number // 成员角色，参见 ImGroupMemberRole 枚举：1=群主 2=管理员 3=普通成员 + muteEndTime?: string // 禁言到期时间（ISO 字符串） // ========== 前端扩展字段 ========== isOwner?: boolean // 是否群主（前端从 Group.ownerUserId 计算） diff --git a/src/views/im/utils/constants.ts b/src/views/im/utils/constants.ts index 83c2b788f..ab1ffd373 100644 --- a/src/views/im/utils/constants.ts +++ b/src/views/im/utils/constants.ts @@ -32,10 +32,10 @@ export const ImMessageType = { GROUP_MEMBER_INVITE: 1509, // 成员加入 // 1510 GROUP_MEMBER_ENTER TODO 未实现：自由进群 GROUP_DISSOLVE: 1511, // 群解散 - // 1512 GROUP_MEMBER_MUTED TODO 未实现：单成员禁言 - // 1513 GROUP_MEMBER_CANCEL_MUTED TODO 未实现：单成员取消禁言 - // 1514 GROUP_MUTED TODO 未实现：全群禁言 - // 1515 GROUP_CANCEL_MUTED TODO 未实现：全群取消禁言 + GROUP_MEMBER_MUTED: 1512, // 单成员禁言 + GROUP_MEMBER_CANCEL_MUTED: 1513, // 单成员取消禁言 + GROUP_MUTED: 1514, // 全群禁言 + GROUP_CANCEL_MUTED: 1515, // 全群取消禁言 GROUP_MEMBER_NICKNAME_UPDATE: 1516, // 成员昵称变更（窄化到 displayUserName） GROUP_ADMIN_ADD: 1517, // 添加管理员 GROUP_ADMIN_REMOVE: 1518, // 撤销管理员 @@ -44,14 +44,15 @@ export const ImMessageType = { // ========== 自有扩展段（1530+，OpenIM 1500-1520 段位无对应物） ========== GROUP_MEMBER_SETTING_UPDATE: 1530, // 群成员个人设置变更：silent / groupRemark 个人多端同步 GROUP_MESSAGE_PIN: 1531, // 群消息置顶（自有扩展，OpenIM 无） - GROUP_MESSAGE_UNPIN: 1532 // 群消息取消置顶（自有扩展，OpenIM 无） + GROUP_MESSAGE_UNPIN: 1532, // 群消息取消置顶（自有扩展，OpenIM 无） + GROUP_BANNED: 1533 // 群封禁变更（自有扩展，OpenIM 无） } as const -/** 判断是否「群广播事件」：[GROUP_CREATE, GROUP_MESSAGE_UNPIN] 段位都算，仅 GROUP_MEMBER_SETTING_UPDATE 是个人信号排除 */ +/** 判断是否「群广播事件」：[GROUP_CREATE, GROUP_BANNED] 段位都算，仅 GROUP_MEMBER_SETTING_UPDATE 是个人信号排除 */ export function isGroupNotification(type: number): boolean { return ( type >= ImMessageType.GROUP_CREATE - && type <= ImMessageType.GROUP_MESSAGE_UNPIN + && type <= ImMessageType.GROUP_BANNED && type !== ImMessageType.GROUP_MEMBER_SETTING_UPDATE ) } diff --git a/src/views/im/utils/user.ts b/src/views/im/utils/user.ts index 9774f0429..84775a559 100644 --- a/src/views/im/utils/user.ts +++ b/src/views/im/utils/user.ts @@ -167,7 +167,10 @@ export type GroupNotificationPayload = { newAvatar?: string displayUserName?: string messageId?: number - /** PIN 事件携带的完整被置顶消息对象（前端直接 push 进 group.pinnedMessages，避免回查群详情） */ + mutedUserId?: number // 禁言目标用户 + muteEndTime?: string // 禁言到期时间 + banned?: boolean // 封禁状态 + /** PIN 事件携带的完整被置顶消息对象 */ message?: { id: number clientMessageId?: string @@ -236,6 +239,20 @@ export function resolveGroupNotificationText( return `${operatorName} 置顶了一条消息` case ImMessageType.GROUP_MESSAGE_UNPIN: return `${operatorName} 取消了一条置顶消息` + case ImMessageType.GROUP_MEMBER_MUTED: { + const mutedName = payload.mutedUserId ? resolve(payload.mutedUserId) : '' + return `${operatorName} 将 ${mutedName} 禁言` + } + case ImMessageType.GROUP_MEMBER_CANCEL_MUTED: { + const mutedName = payload.mutedUserId ? resolve(payload.mutedUserId) : '' + return `${operatorName} 解除了 ${mutedName} 的禁言` + } + case ImMessageType.GROUP_MUTED: + return `${operatorName} 开启了全群禁言` + case ImMessageType.GROUP_CANCEL_MUTED: + return `${operatorName} 关闭了全群禁言` + case ImMessageType.GROUP_BANNED: + return payload.banned ? `${operatorName} 封禁了该群` : `${operatorName} 解封了该群` default: return '' }