✨ feat(im): 调整代码结构，优化 side 样式

src/views/im/home/pages/conversation/components/conversation/ConversationPrivateSide.vue

@@ -114,9 +114,10 @@ import Icon from '@/components/Icon/src/Icon.vue'
 import UserAvatar from '../../../../components/UserAvatar.vue'
 import { useMessage } from '@/hooks/web/useMessage'
 
-import { useConversationStore } from '../../../../store/conversationStore'
-import { useFriendStore } from '../../../../store/friendStore'
-import { ImConversationType } from '../../../../../utils/constants'
+import { useConversationStore } from '@/views/im/home/store/conversationStore'
+import { useFriendStore } from '@/views/im/home/store/friendStore'
+import { getFriendShowName } from '@/views/im/utils/user'
+import { ImConversationType } from '@/views/im/utils/constants'
 import type { Conversation, Friend } from '../../../../types'
 
 defineOptions({ name: 'ImConversationPrivateSide' })
@@ -144,6 +145,10 @@ const visible = computed({
 
 const conversationStore = useConversationStore()
 const friendStore = useFriendStore()
+const message = useMessage()
+
+/** tile 标签 / 后续聊天界面用的展示名：备注优先 */
+const displayName = computed(() => (props.friend ? getFriendShowName(props.friend) : ''))
 
 const displayNamePopoverVisible = ref(false)
 const editDisplayName = ref('')

src/views/im/home/pages/conversation/components/input/MessageInput.vue

@@ -123,6 +123,8 @@ import Icon from '@/components/Icon/src/Icon.vue'
 import { updateFile } from '@/api/infra/file'
 import { useConversationStore } from '@/views/im/home/store/conversationStore'
 import { useGroupStore } from '@/views/im/home/store/groupStore'
+import { useFriendStore } from '@/views/im/home/store/friendStore'
+import { getMemberShowName } from '@/views/im/utils/user'
 import { useMessageSender } from '@/views/im/home/composables/useMessageSender'
 import { ImConversationType, ImMessageType } from '@/views/im/utils/constants'
 import {
@@ -141,6 +143,7 @@ defineOptions({ name: 'ImMessageInput' })
 
 const conversationStore = useConversationStore()
 const groupStore = useGroupStore()
+const friendStore = useFriendStore()
 const { send, sendRaw } = useMessageSender()
 const message = useMessage()
 
@@ -423,12 +426,16 @@ const groupMembers = computed<GroupMemberLite[]>(() => {
     return []
   }
   const group = groupStore.getGroup(conversation.targetId)
-  return (group?.members || []).map((member) => ({
-    userId: member.userId,
-    showNickName: member.displayUserName || member.nickname,
-    showImage: member.avatar,
-    status: member.status
-  }))
+  return (group?.members || []).map((member) => {
+    const friend = friendStore.getFriend(member.userId)
+    return {
+      userId: member.userId,
+      showNickName: getMemberShowName(member, friend),
+      nickname: member.nickname,
+      avatar: member.avatar,
+      status: member.status
+    }
+  })
 })
 
 const groupOwnerId = computed<number | undefined>(() => {