✨ feat(im): 优化 ConversationItem.vue 增加相关评审
YunaiV
parent
a1a9053aaa
commit
115e0482db
|
|
@ -0,0 +1,217 @@
|
|||
<template>
|
||||
<div
|
||||
class="relative flex items-center gap-2.5 px-4 py-3 cursor-pointer transition-colors hover:bg-[var(--el-fill-color)]"
|
||||
:class="{ '!bg-[#d9ecff] dark:!bg-[var(--el-color-primary-light-8)]': isActive }"
|
||||
@click="handleClick"
|
||||
@contextmenu.prevent="handleContextMenu"
|
||||
>
|
||||
<!-- 头像 + 未读徽标；免打扰会话不显示徽标 -->
|
||||
<div class="relative">
|
||||
<UserAvatar
|
||||
:url="conversation.avatar"
|
||||
:name="conversation.name"
|
||||
:size="40"
|
||||
:clickable="false"
|
||||
/>
|
||||
<span
|
||||
v-show="!conversation.muted && conversation.unreadCount > 0"
|
||||
class="absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-1.5 text-11px leading-[18px] text-white text-center bg-[#f56c6c] border border-white dark:border-[var(--el-bg-color)] rounded-full box-border whitespace-nowrap"
|
||||
>
|
||||
{{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex flex-1 items-center gap-1 min-w-0">
|
||||
<span class="overflow-hidden text-sm truncate text-[var(--el-text-color-primary)]">
|
||||
{{ conversation.name }}
|
||||
</span>
|
||||
<!-- TODO @AI：不要有动效 -->
|
||||
<el-tag
|
||||
v-if="isGroup"
|
||||
type="primary"
|
||||
size="small"
|
||||
effect="plain"
|
||||
class="conversation-item__tag"
|
||||
>
|
||||
群
|
||||
</el-tag>
|
||||
</span>
|
||||
<span class="flex-shrink-0 ml-1 text-12px text-[var(--el-text-color-secondary)]">
|
||||
{{ formatTime(conversation.lastSendTime) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-1 leading-5">
|
||||
<!-- @红字提示：atMe 优先于 atAll -->
|
||||
<span v-if="atText" class="flex-shrink-0 text-12px text-[#c70b0b]">{{ atText }}</span>
|
||||
<!-- 群聊最后一条发送者前缀 -->
|
||||
<span
|
||||
v-if="showSendName"
|
||||
class="flex-shrink-0 text-12px text-[var(--el-text-color-secondary)] whitespace-nowrap"
|
||||
>
|
||||
{{ conversation.senderNickName }}:
|
||||
</span>
|
||||
<span
|
||||
class="flex-1 overflow-hidden text-12px truncate text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
{{ conversation.lastContent }}
|
||||
</span>
|
||||
<!-- 置顶 & 免打扰图标 -->
|
||||
<el-icon
|
||||
v-if="conversation.muted"
|
||||
class="conversation-item__muted flex-shrink-0 ml-1 text-14px text-[var(--el-text-color-disabled)]"
|
||||
title="消息免打扰"
|
||||
>
|
||||
<!-- TODO @AI：消息免打扰后，是个 / 铃铛； -->
|
||||
<Bell />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { Bell } from '@element-plus/icons-vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
|
||||
import { useConversationStore } from '../../../../store/conversationStore'
|
||||
import { useFriendStore } from '../../../../store/friendStore'
|
||||
import { useGroupStore } from '../../../../store/groupStore'
|
||||
import { useImUiStore } from '../../../../store/uiStore'
|
||||
import { ImConversationType, isNormalMessage } from '../../../../../utils/constants'
|
||||
import type { Conversation } from '../../../../types'
|
||||
import UserAvatar from '../../../../components/UserAvatar.vue'
|
||||
|
||||
defineOptions({ name: 'ImConversationItem' })
|
||||
|
||||
const props = defineProps<{
|
||||
conversation: Conversation
|
||||
}>()
|
||||
|
||||
const conversationStore = useConversationStore()
|
||||
const friendStore = useFriendStore()
|
||||
const groupStore = useGroupStore()
|
||||
const uiStore = useImUiStore()
|
||||
|
||||
const isActive = computed(
|
||||
() =>
|
||||
conversationStore.activeConversation?.targetId === props.conversation.targetId &&
|
||||
conversationStore.activeConversation?.type === props.conversation.type
|
||||
)
|
||||
|
||||
const isGroup = computed(() => props.conversation.type === ImConversationType.GROUP)
|
||||
|
||||
// 群聊 + 有发送者昵称 + 最后一条是普通消息 时，显示发送者前缀
|
||||
// TODO @AI：注释风格；
|
||||
const showSendName = computed(() => {
|
||||
if (!isGroup.value) {
|
||||
return false
|
||||
}
|
||||
if (!props.conversation.senderNickName) {
|
||||
return false
|
||||
}
|
||||
const last = props.conversation.messages?.[props.conversation.messages.length - 1]
|
||||
if (!last) {
|
||||
return false
|
||||
}
|
||||
return isNormalMessage(last.type)
|
||||
})
|
||||
|
||||
// 会话列表 "@ 我" / "@ 全体成员" 红字提示
|
||||
// TODO @AI：注释风格；
|
||||
const atText = computed(() => {
|
||||
if (props.conversation.atMe) {
|
||||
return '[有人@我]'
|
||||
}
|
||||
if (props.conversation.atAll) {
|
||||
return '[@全体成员]'
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
function handleClick() {
|
||||
conversationStore.setActiveConversation(props.conversation)
|
||||
}
|
||||
|
||||
// 右键菜单：置顶 / 免打扰 / 删除会话
|
||||
// TODO @AI：注释风格；
|
||||
function handleContextMenu(e: MouseEvent) {
|
||||
uiStore.openContextMenu(
|
||||
{ x: e.clientX, y: e.clientY },
|
||||
// TODO @AI：TOP/MUTED 下面的删除，可以加个横线，类似微信。然后颜色是红色么？【删除会话，简化为删除】
|
||||
[
|
||||
{ key: 'TOP', name: props.conversation.top ? '取消置顶' : '置顶' },
|
||||
// TODO @AI：消息免打扰、允许消息通知。
|
||||
{ key: 'MUTED', name: props.conversation.muted ? '新消息提醒' : '消息免打扰' },
|
||||
{ key: 'DELETE', name: '删除会话' }
|
||||
],
|
||||
async (item) => {
|
||||
// TODO @AI：是不是抽成小方法。handleXXX；下面的每个 key；
|
||||
if (item.key === 'TOP') {
|
||||
conversationStore.setTop(
|
||||
props.conversation.type,
|
||||
props.conversation.targetId,
|
||||
!props.conversation.top
|
||||
)
|
||||
} else if (item.key === 'MUTED') {
|
||||
// TODO 群聊 /im/group/update 接入 muted 字段后，groupStore.setMuted 里也要调后端（好友侧已经在 friendStore.setMuted 里调过 /im/friend/update）
|
||||
// 当前同步刷新 friendStore / groupStore，保证两边状态一致（避免点头像名片再看时还显示旧值）
|
||||
const next = !props.conversation.muted
|
||||
conversationStore.setMuted(props.conversation.type, props.conversation.targetId, next)
|
||||
// TODO @AI：要 await 么？
|
||||
if (props.conversation.type === ImConversationType.PRIVATE) {
|
||||
friendStore.setMuted(props.conversation.targetId, next)
|
||||
} else {
|
||||
groupStore.setMuted(props.conversation.targetId, next)
|
||||
}
|
||||
} else if (item.key === 'DELETE') {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定删除与「${props.conversation.name}」的会话吗？`,
|
||||
'删除会话',
|
||||
{ type: 'warning' }
|
||||
)
|
||||
conversationStore.removeConversation(props.conversation.type, props.conversation.targetId)
|
||||
} catch {
|
||||
// 用户取消
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// TODO @AI：全局的 format 或者 date 有相关工具方法么？
|
||||
function formatTime(timestamp: number): string {
|
||||
if (!timestamp) {
|
||||
return ''
|
||||
}
|
||||
const date = new Date(timestamp)
|
||||
const now = new Date()
|
||||
const pad = (n: number) => n.toString().padStart(2, '0')
|
||||
const isToday =
|
||||
date.getFullYear() === now.getFullYear() &&
|
||||
date.getMonth() === now.getMonth() &&
|
||||
date.getDate() === now.getDate()
|
||||
if (isToday) {
|
||||
return `${pad(date.getHours())}:${pad(date.getMinutes())}`
|
||||
}
|
||||
return `${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* el-tag 内部尺寸走 CSS 变量，UnoCSS 的高度/内边距会被 el-tag 自身的样式覆盖，用 :deep 微调 */
|
||||
.conversation-item__tag {
|
||||
flex-shrink: 0;
|
||||
height: 18px;
|
||||
padding: 0 4px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
/* el-icon 的全局 color:var(--color) 在暗色模式下会渲染成白色，这里用 :deep + !important 锁定 */
|
||||
.conversation-item__muted :deep(svg) {
|
||||
fill: currentColor !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue