From 5f3dea3fd930afde720677fba10b6bfb2e836a18 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 24 七月 2026 09:54:17 +0800
Subject: [PATCH] Merge branch 'dev_pro2.0' of http://114.132.189.42:9002/r/mom-pro2-before into dev_pro2.0
---
src/views/im/home/components/tool-bar.vue | 123 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 123 insertions(+), 0 deletions(-)
diff --git a/src/views/im/home/components/tool-bar.vue b/src/views/im/home/components/tool-bar.vue
new file mode 100644
index 0000000..b1195ba
--- /dev/null
+++ b/src/views/im/home/components/tool-bar.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { IconifyIcon as Icon } from '#/packages/icons/src'
+import { useUserStore } from '#/packages/stores/src'
+
+import { Badge } from 'ant-design-vue'
+
+import { useConversationStore } from '../store/conversationStore'
+import { useFriendStore } from '../store/friendStore'
+import { useImUiStore } from '../store/uiStore'
+import { UserAvatar } from './user'
+
+defineOptions({ name: 'ImToolBar' })
+
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+const conversationStore = useConversationStore()
+const friendStore = useFriendStore()
+const uiStore = useImUiStore()
+
+/** 娑堟伅 Tab 鐨勭孩鐐癸細鎵�鏈夐潪鍏嶆墦鎵颁細璇濈殑鏈鎬诲拰 */
+const totalUnread = computed(() => conversationStore.getTotalUnreadCount)
+/** 閫氳褰� Tab 鐨勭孩鐐癸細鏈鐞嗗ソ鍙嬬敵璇锋暟锛堟帴鏀舵柟=鎴戯級 */
+const unhandledRequestCount = computed(() => friendStore.getUnhandledRequestCount)
+
+const tabs = [
+ { name: 'ImHomeConversation', icon: 'ep:chat-round' },
+ { name: 'ImHomeContact', icon: 'mingcute:contacts-line' }
+] // 涓や釜涓� Tab锛涚敤璺敱 name 鑰岄潪 path锛岄伩鍏嶅墠缂� / 宓屽璋冩暣鍚庡け鏁�
+
+// 褰撳墠璺敱鏄惁鍛戒腑 Tab锛氱洿鎺ユ瘮瀵� route.name
+const isActive = (name: string) => route.name === name
+
+// 鍒囨崲 Tab锛氬綋鍓嶅凡閫変腑鏃讹紝娑堟伅 Tab 瑙﹀彂"婊氬姩鍒颁笅涓�涓湭璇�"锛堝榻愬井淇� PC锛夛紝鍏跺畠 Tab 鏃犲姩浣�
+const goTab = (name: string) => {
+ if (route.name === name) {
+ if (name === 'ImHomeConversation') {
+ uiStore.requestNextUnreadJump()
+ }
+ return
+ }
+ router.push({ name })
+}
+
+// 璺宠浆涓汉涓績锛堣矾鐢� name=Profile锛�
+const goProfile = () => router.push({ name: 'Profile' })
+</script>
+
+<template>
+ <!--
+ ToolBar锛欼M 宸︿晶宸ュ叿鏍�
+ 甯冨眬锛氶《閮ㄥご鍍� 鈫� 涓棿涓� Tab锛堟秷鎭�/濂藉弸/缇よ亰锛夆啋 搴曢儴璁剧疆
+ -->
+ <div
+ class="flex flex-col items-center w-14 pt-4 pb-3 gap-2 flex-shrink-0 select-none bg-[#2b2b2b]"
+ >
+ <!-- 椤堕儴鐢ㄦ埛澶村儚锛岀偣鍑昏烦涓汉涓績锛涜蛋 UserAvatar 缁熶竴棣栧瓧 / 鍝堝笇閰嶈壊瑙勫垯 -->
+ <div class="mb-2 cursor-pointer" @click="goProfile">
+ <UserAvatar
+ :url="userStore.userInfo?.avatar"
+ :name="userStore.userInfo?.nickname"
+ :size="36"
+ :clickable="false"
+ />
+ </div>
+
+ <!-- 涓棿涓� Tab -->
+ <div class="flex flex-col items-center gap-2 flex-1 w-full">
+ <div
+ v-for="item in tabs"
+ :key="item.name"
+ class="flex items-center justify-center w-10 h-10 rounded-lg text-[#a0a0a0] cursor-pointer transition-all hover:text-white hover:bg-white/10"
+ :class="{ 'bg-white/15 text-white': isActive(item.name) }"
+ @click="goTab(item.name)"
+ >
+ <Badge
+ v-if="item.name === 'ImHomeConversation' && totalUnread > 0"
+ :count="totalUnread"
+ :max="99"
+ class="tool-bar__badge"
+ >
+ <Icon :icon="item.icon" class="tool-bar__icon" />
+ </Badge>
+ <Badge
+ v-else-if="item.name === 'ImHomeContact' && unhandledRequestCount > 0"
+ :count="unhandledRequestCount"
+ :max="99"
+ class="tool-bar__badge"
+ >
+ <Icon :icon="item.icon" class="tool-bar__icon" />
+ </Badge>
+ <Icon v-else :icon="item.icon" class="tool-bar__icon" />
+ </div>
+ </div>
+
+ <!-- 搴曢儴璁剧疆鎸夐挳锛氱偣鍑昏烦涓汉涓績 -->
+ <div class="flex flex-col items-center gap-2 w-full">
+ <div
+ class="flex items-center justify-center w-10 h-10 rounded-lg text-[#a0a0a0] cursor-pointer transition-all hover:text-white hover:bg-white/10"
+ @click="goProfile"
+ >
+ <Icon icon="ant-design:setting-outlined" class="tool-bar__icon" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.tool-bar__icon {
+ width: 22px;
+ height: 22px;
+}
+
+/* 璋冩暣 AntD Badge 鍙充笂瑙掔孩鐐逛綅缃� */
+.tool-bar__badge :deep(.ant-badge-count) {
+ top: 4px;
+ right: 8px;
+ border: none;
+}
+</style>
--
Gitblit v1.9.3