Merge remote-tracking branch 'origin/dev_pro2.0' into dev_pro2.0

gaoluyang

11 小时以前 cb9cd49627b65a4c0e137e08063271a8cefe1826

 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：IM å·¦ä¾§å·¥å…·æ 
    å¸ƒå±€ï¼šé¡¶éƒ¨å¤´åƒ â†’ ä¸­é—´ä¸‰ 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>