// 群成员映射
}
const props = defineProps()
+// 禁言倒计时
+const muteCountdown = ref('')
+let muteTimer: ReturnType | null = null
+
+// 计算是否可以发送消息（被移除或被禁言都不能发）
+const cannotSend = computed(() => props.isBlocked || props.isMuted)
+
+// 更新禁言倒计时
+function updateMuteCountdown() {
+ if (!props.mutedUntil) {
+ muteCountdown.value = ''
+ return
+ }
+
+ const now = new Date().getTime()
+ const end = new Date(props.mutedUntil).getTime()
+ const diff = end - now
+
+ if (diff <= 0) {
+ muteCountdown.value = ''
+ if (muteTimer) {
+ clearInterval(muteTimer)
+ muteTimer = null
+ }
+ return
+ }
+
+ // 计算剩余时间
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000)
+
+ if (days > 0) {
+ muteCountdown.value = `${days}天${hours}小时后解除`
+ } else if (hours > 0) {
+ muteCountdown.value = `${hours}小时${minutes}分钟后解除`
+ } else if (minutes > 0) {
+ muteCountdown.value = `${minutes}分${seconds}秒后解除`
+ } else {
+ muteCountdown.value = `${seconds}秒后解除`
+ }
+}
+
+// 监听禁言状态变化
+watch(() => props.mutedUntil, (newVal) => {
+ if (muteTimer) {
+ clearInterval(muteTimer)
+ muteTimer = null
+ }
+
+ if (newVal && props.isMuted) {
+ updateMuteCountdown()
+ muteTimer = setInterval(updateMuteCountdown, 1000)
+ } else {
+ muteCountdown.value = ''
+ }
+}, { immediate: true })
+
+onUnmounted(() => {
+ if (muteTimer) {
+ clearInterval(muteTimer)
+ muteTimer = null
+ }
+})
+
const emit = defineEmits<{
'update:modelValue': [value: string]
send: [mentionUserIds?: string[]]
diff --git a/src/components/common/Avatar.vue b/src/components/common/Avatar.vue
index 68866b4..bb3ba7a 100644
--- a/src/components/common/Avatar.vue
+++ b/src/components/common/Avatar.vue
@@ -2,7 +2,7 @@
![]()
{
return false
})
+// 预定义尺寸映射
+const sizeMap: Record = {
+ xs: 'w-7 h-7 text-[10px]',
+ sm: 'w-9 h-9 text-xs',
+ md: 'w-10 h-10 text-sm',
+ lg: 'w-12 h-12 text-base',
+ xl: 'w-16 h-16 text-xl',
+ '2xl': 'w-24 h-24 text-2xl',
+ contact: 'w-11 h-11 text-lg',
+}
+
+// 尺寸 class（仅用于预定义尺寸）
const sizeClass = computed(() => {
- const sizes = {
- sm: 'w-9 h-9 text-xs',
- md: 'w-10 h-10 text-sm',
- lg: 'w-12 h-12 text-base',
- xl: 'w-16 h-16 text-xl',
- '2xl': 'w-24 h-24 text-2xl',
- contact: 'w-11 h-11 text-lg',
+ if (typeof props.size === 'number') {
+ return '' // 数字尺寸使用 style
}
- return sizes[props.size]
+ return sizeMap[props.size] || sizeMap.md
+})
+
+// 自定义尺寸样式（用于数字尺寸和背景色）
+const customSizeStyle = computed(() => {
+ const style: Record = {}
+
+ // 背景色
+ if (!isImage.value) {
+ style.background = props.color || generateColor(props.name || props.avatar || '')
+ }
+
+ // 数字尺寸
+ if (typeof props.size === 'number') {
+ style.width = `${props.size}px`
+ style.height = `${props.size}px`
+ // 根据尺寸计算字体大小
+ style.fontSize = `${Math.max(10, props.size * 0.4)}px`
+ }
+
+ return style
})
const roundedClass = computed(() => {
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 3a51e5c..5fae0c5 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -100,11 +100,47 @@ export const useChatStore = defineStore('chat', () => {
messages.value[roomId] = []
}
+ // 群通知相关状态
+ const lastGroupNotification = ref<{ room_id: string; type: string; data: any } | null>(null)
+ const myMuteStatus = ref>({}) // room_id -> muted_until
+
+ /**
+ * 设置最后的群通知（用于触发群面板刷新）
+ */
+ function setLastGroupNotification(notification: { room_id: string; type: string; data: any }) {
+ lastGroupNotification.value = { ...notification, _timestamp: Date.now() } as any
+ }
+
+ /**
+ * 设置我在某个群的禁言状态
+ */
+ function setMyMuteStatus(roomId: string, mutedUntil: string | null) {
+ myMuteStatus.value[roomId] = mutedUntil
+ }
+
+ /**
+ * 获取我在某个群是否被禁言
+ */
+ function isMyMuted(roomId: string): boolean {
+ const mutedUntil = myMuteStatus.value[roomId]
+ if (!mutedUntil) return false
+ return new Date(mutedUntil) > new Date()
+ }
+
+ /**
+ * 获取我的禁言到期时间
+ */
+ function getMyMutedUntil(roomId: string): string | null {
+ return myMuteStatus.value[roomId] || null
+ }
+
return {
currentTarget,
messages,
contacts,
totalUnread,
+ lastGroupNotification,
+ myMuteStatus,
setCurrentTarget,
addMessage,
getRoomMessages,
@@ -113,6 +149,10 @@ export const useChatStore = defineStore('chat', () => {
updateContactLastMsg,
incrementUnread,
clearRoomMessages,
+ setLastGroupNotification,
+ setMyMuteStatus,
+ isMyMuted,
+ getMyMutedUntil,
}
})
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index ecb6afb..b41e182 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -65,6 +65,8 @@ export const storage = {
// Current Tab (chat/contact/moment)
setCurrentTab(tab: 'chat' | 'contact' | 'moment') {
localStorage.setItem(CURRENT_TAB_KEY, tab)
+ // 触发自定义事件通知 UI 更新
+ window.dispatchEvent(new CustomEvent('app-tab-change', { detail: { tab } }))
},
getCurrentTab(): 'chat' | 'contact' | 'moment' {
diff --git a/src/views/chat/ChatView.vue b/src/views/chat/ChatView.vue
index 2f8ef68..caa4dec 100644
--- a/src/views/chat/ChatView.vue
+++ b/src/views/chat/ChatView.vue
@@ -242,6 +242,8 @@
v-model="inputText"
:is-recording="isRecording"
:is-blocked="isBlockedFromGroup"
+ :is-muted="isMyMutedInCurrentGroup"
+ :muted-until="myMutedUntilInCurrentGroup"
:is-group-chat="isGroupChat"
:room-members="currentRoomMembers"
@send="handleSendText"
@@ -773,16 +775,32 @@ const currentRoomMembers = computed(() => {
return roomMembers.value[chatStore.currentTarget.room_id] || {}
})
-// 判断当前用户是否被禁言（被移除或退出群聊）
+// 判断当前用户是否被移除（不在群成员列表中）
const isBlockedFromGroup = computed(() => {
if (!isGroupChat.value || !chatStore.currentTarget?.room_id || !authStore.user) {
return false
}
const currentMember = roomMembers.value[chatStore.currentTarget.room_id]?.[authStore.user.id]
- // 如果当前用户不在群成员列表中，则认为被禁言
+ // 如果当前用户不在群成员列表中，则认为被移除
return !currentMember
})
+// 判断当前用户是否在当前群中被禁言
+const isMyMutedInCurrentGroup = computed(() => {
+ if (!isGroupChat.value || !chatStore.currentTarget?.room_id) {
+ return false
+ }
+ return chatStore.isMyMuted(chatStore.currentTarget.room_id)
+})
+
+// 获取当前用户在当前群的禁言到期时间
+const myMutedUntilInCurrentGroup = computed(() => {
+ if (!isGroupChat.value || !chatStore.currentTarget?.room_id) {
+ return null
+ }
+ return chatStore.getMyMutedUntil(chatStore.currentTarget.room_id)
+})
+
// 获取当前目标名称
function getCurrentTargetName(): string {
if (!chatStore.currentTarget) return ''
@@ -1099,9 +1117,34 @@ function handleWebSocketMessage(message: ChatMessage) {
message.isSelf = message.sender_user_id === authStore.user!.id
message.extra = typeof message.extra === 'string' ? JSON.parse(message.extra || '{}') : message.extra
- // 处理好友申请通知
+ // 处理好友通知
if (message.message_type === 5) {
const extra = message.extra as any
+
+ // 处理好友资料更新通知
+ if (extra.type === 'profile_update') {
+ // 更新联系人列表中的用户信息
+ const contact = chatStore.contacts.find(c => c.user_id === extra.user_id || c.id === extra.user_id)
+ if (contact && contact.user) {
+ if (extra.name) contact.user.name = extra.name
+ if (extra.avatar) contact.user.avatar = extra.avatar
+ }
+
+ // 更新当前聊天对象（如果正在和这个人聊天）
+ const currentTarget = chatStore.currentTarget
+ if (currentTarget && (currentTarget.user_id === extra.user_id || currentTarget.id === extra.user_id)) {
+ if (currentTarget.user) {
+ if (extra.name) currentTarget.user.name = extra.name
+ if (extra.avatar) currentTarget.user.avatar = extra.avatar
+ }
+ }
+
+ // 刷新会话列表
+ conversationStore.loadConversations()
+ return
+ }
+
+ // 处理好友申请通知
toastStore.showToast(
'收到好友申请',
'info',
@@ -1120,20 +1163,52 @@ function handleWebSocketMessage(message: ChatMessage) {
// 处理群聊通知
if (message.message_type === 7) {
- const extra = message.extra as any
- toastStore.showToast(
- '群聊通知',
- 'info',
- 5000,
- extra.title || message.content || '收到群聊通知',
- {
- label: '去查看',
- handler: () => {
- currentTab.value = 'contact'
- contactStore.setLeftPanelMode('group-notify')
+ const extra = typeof message.extra === 'string' ? JSON.parse(message.extra || '{}') : (message.extra || {})
+ const notifRoomId = extra.room_id || message.room_id
+
+ // 根据通知类型进行不同处理
+ switch (extra.type) {
+ case 'member_mute':
+ case 'member_unmute':
+ // 禁言/解除禁言通知 - 保存到 chatStore 以便 MessageInput 可以响应
+ if (extra.target === authStore.user?.id) {
+ // 自己被禁言/解除禁言
+ chatStore.setMyMuteStatus(notifRoomId, extra.type === 'member_mute' ? extra.muted_until : null)
}
- }
- )
+ // 触发群成员刷新
+ chatStore.setLastGroupNotification({ room_id: notifRoomId, type: extra.type, data: extra })
+ break
+
+ case 'role_change':
+ // 角色变更通知 - 触发群成员刷新
+ chatStore.setLastGroupNotification({ room_id: notifRoomId, type: extra.type, data: extra })
+ break
+
+ case 'member_invite':
+ case 'member_remove':
+ case 'member_leave':
+ case 'member_join':
+ // 成员变动通知 - 触发群成员刷新
+ chatStore.setLastGroupNotification({ room_id: notifRoomId, type: extra.type, data: extra })
+ break
+ }
+
+ // 显示 Toast 通知（不是自己被禁言时）
+ if (!(extra.type === 'member_mute' && extra.target === authStore.user?.id)) {
+ toastStore.showToast(
+ '群聊通知',
+ 'info',
+ 5000,
+ message.content || extra.title || '收到群聊通知',
+ {
+ label: '去查看',
+ handler: () => {
+ currentTab.value = 'contact'
+ contactStore.setLeftPanelMode('group-notify')
+ }
+ }
+ )
+ }
return
}
@@ -2020,7 +2095,7 @@ onMounted(async () => {
await wsManager.connect(authStore.user.id)
wsManager.onMessage(handleWebSocketMessage)
wsManager.onSignal(webrtc.handleSignaling)
- wsManager.onMomentNotification(momentStore.handleWsNotification)
+ // 朋友圈通知已在 App.vue 中统一注册，避免重复
}
await loadContacts()
await conversationStore.loadConversations()
@@ -2049,11 +2124,24 @@ onMounted(async () => {
}
window.addEventListener('resize', () => isMobile.value = window.innerWidth < 768)
+
+ // 监听 tab 切换事件（用于从其他地方触发 tab 切换，如朋友圈通知）
+ window.addEventListener('app-tab-change', handleTabChangeEvent)
})
+
+// Tab 切换事件处理
+function handleTabChangeEvent(e: Event) {
+ const customEvent = e as CustomEvent<{ tab: 'chat' | 'contact' | 'moment' }>
+ if (customEvent.detail?.tab) {
+ currentTab.value = customEvent.detail.tab
+ }
+}
+
onUnmounted(() => {
wsManager.offMessage(handleWebSocketMessage)
wsManager.offSignal(webrtc.handleSignaling)
wsManager.offMomentNotification(momentStore.handleWsNotification)
+ window.removeEventListener('app-tab-change', handleTabChangeEvent)
})