✨ feat(im): 对齐微信的图标展示

src/views/im/home/components/ToolBar.vue

@@ -67,15 +67,10 @@ const conversationStore = useConversationStore()
 /** 消息 Tab 的红点：所有非免打扰会话的未读总和 */
 const totalUnread = computed(() => conversationStore.getTotalUnread)
 
-/**
+/** 两个主 Tab；用路由 name 而非 path，避免前缀 / 嵌套调整后失效 */
- * 两个主 Tab 的配置，name 对应路由 ImHomeConversation/Contact
- * 用 name 而非 path：path 后期容易变（前缀调整、嵌套加层），name 更稳定
- * icon 走通用 <Icon> 组件，支持 iconify 全部前缀（ep: / ant-design: / svg-icon: 等）
- * 通讯录用 ant-design:contacts-outlined：与消息图标一眼区分；好友 + 群聊在通讯录内分组展示
- */
 const tabs = [
-  { name: 'ImHomeConversation', label: '消息', icon: 'ep:chat-dot-round' },
+  { name: 'ImHomeConversation', label: '消息', icon: 'ep:chat-round' },
-  { name: 'ImHomeContact', label: '通讯录', icon: 'ant-design:contacts-outlined' }
+  { name: 'ImHomeContact', label: '通讯录', icon: 'mingcute:contacts-line' }
 ]
 
 /** 当前路由是否命中 Tab：直接比对 route.name */

src/views/im/home/pages/conversation/components/message/MessagePanel.vue

@@ -19,20 +19,28 @@
           </span>
         </span>
         <div class="flex gap-3 items-center">
-          <!-- 聊天历史：从输入区底部工具栏挪到顶部右上角，对齐微信 PC（点击弹窗承接历史消息） -->
+          <!-- 聊天历史 -->
           <el-tooltip content="聊天历史" placement="bottom">
             <Icon
-              icon="ant-design:profile-outlined"
+              icon="ep:chat-dot-round"
               :size="20"
               class="message-panel__header-icon cursor-pointer"
               @click="historyVisible = true"
             />
           </el-tooltip>
-          <!-- 信息抽屉入口：群聊 / 私聊统一用 3 点图标，对齐微信 PC；
+          <!-- 通话入口：暂未开放，先放占位图标对齐微信 PC -->
-               sideVisible 在群 / 私聊两个抽屉之间共用一个 ref，由 v-if-else 决定挂哪个 -->
+          <el-tooltip content="通话" placement="bottom">
+            <Icon
+              icon="ant-design:phone-outlined"
+              :size="20"
+              class="message-panel__header-icon cursor-pointer"
+              @click="handleCall"
+            />
+          </el-tooltip>
+          <!-- 信息抽屉入口 -->
           <el-tooltip :content="isGroup ? '群聊信息' : '聊天信息'" placement="bottom">
             <Icon
-              icon="ant-design:more-outlined"
+              icon="ant-design:ellipsis-outlined"
               :size="20"
               class="message-panel__header-icon cursor-pointer"
               @click="toggleSide"
@@ -118,6 +126,7 @@
 <script lang="ts" setup>
 import { ref, watch, nextTick, computed } from 'vue'
 import Icon from '@/components/Icon/src/Icon.vue'
+import { useMessage } from '@/hooks/web/useMessage'
 
 import { useConversationStore } from '../../../../store/conversationStore'
 import { useFriendStore } from '../../../../store/friendStore'
@@ -138,6 +147,7 @@ defineOptions({ name: 'ImMessagePanel' })
 const conversationStore = useConversationStore()
 const friendStore = useFriendStore()
 const groupStore = useGroupStore()
+const message = useMessage()
 const listRef = ref<HTMLElement>()
 
 const messages = computed(() => conversationStore.getActiveMessages)
@@ -256,6 +266,11 @@ function toggleSide() {
   sideVisible.value = !sideVisible.value
 }
 
+/** 通话入口：功能未开放，先弹提示占位 */
+function handleCall() {
+  message.warning('通话功能暂未开放')
+}
+
 /** 当前私聊对应的好友（抽屉头部展示用） */
 const privateFriend = computed(() => {
   const conversation = conversationStore.activeConversation