yudao-ui-admin-vue3/src/views/im/NavBar/index.vue

<script setup lang="ts">
/* route */
import { useRoute } from 'vue-router'
/* 取用户头像 */
import router from '@/router'
import highlightConversation from '@/assets/imgs/tabbar/highlightconversation.png'
import grayConversation from '@/assets/imgs/tabbar/grayconversation.png'
import highlightContacts from '@/assets/imgs/tabbar/higtlightcontacts.png'
import grayContacts from '@/assets/imgs/tabbar/graycontacts.png'
import avatarImg from '@/assets/imgs/avatar.gif'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const avatar = computed(() => userStore.user.avatar ?? avatarImg)

/* tabular icon 路由跳转 */
const skipRouterName = ref('conversation')
const changeSkipRouterName = (routerName: string) => {
  router.push(`/im/${routerName}`)
}
const route = useRoute()
// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    console.log('>>>>>newPath', newPath)
    if (newPath.includes('/im/conversation')) {
      skipRouterName.value = 'conversation'
    }
    if (newPath.includes('/im/contacts')) {
      console.log('>>>>>存在赋值为联系人样式')
      skipRouterName.value = 'contacts'
    }
  }
)
</script>

<template>
  <!-- 头像 -->
  <div class="chat_avatar">
    <ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
  </div>
  <!-- 去往会话 -->
  <div class="chat_conversation chat_icon_box" @click="changeSkipRouterName('conversation')">
    <div class="img_box">
      <img
        :src="skipRouterName === 'conversation' ? highlightConversation : grayConversation"
        alt=""
      />
    </div>
  </div>
  <!-- 去往联系人 -->
  <div class="chat_contacts chat_icon_box" @click="changeSkipRouterName('contacts')">
    <img
      class="chat_contacts_icon"
      :src="skipRouterName === 'contacts' ? highlightContacts : grayContacts"
      alt=""
    />
  </div>
</template>

<style lang="scss" scoped>
.chat_avatar {
  margin-top: 43px;
  position: relative;
  width: 44px;
  height: 44px;
  transition: all 0.3s;

  &:hover {
    transform: scale(1.3);
  }

  span {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .online_status {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 2px solid #fff;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      transform: scale(1.2);
    }
  }
}

.chat_icon_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 67px;
  text-align: center;
  line-height: 67px;
  margin: 4px 0;
}

.chat_conversation {
  .img_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;

    img {
      display: inline-block;
      width: 27px;
      height: 27px;
      transition: all 0.5s;

      &:hover {
        transform: scale(1.3);
      }
    }

    .badge {
      position: absolute;
      right: 0;
      top: 8px;
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: red;
    }
  }
}

.chat_contacts {
  img {
    display: inline-block;
    width: 27px;
    height: 27px;
    transition: all 0.5s;

    &:hover {
      transform: scale(1.3);
    }
  }
}

.chat_settings {
  position: absolute;
  bottom: 92px;
  font-size: 30px;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.5s;

  &:hover {
    color: #1b83f9;
    transform: scale(1.3);
  }

  .chat_setting_item {
    width: 100%;
    height: 30px;
  }
}

.more_settings {
  position: absolute;
  bottom: 46px;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.5s;

  &:hover {
    transform: scale(1.3);
  }
}

.setting_fun_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .func_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: space-around;
    width: 101px;
    height: 40px;
    border-radius: 3px;

    &:hover {
      background-color: #f2f2f2;
    }

    .settting_fun_icon {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 5px;

      img {
        width: 20px;
        height: 20px;
      }
    }

    .setting_fun_text {
      display: inline-block;
      text-align: center;
      margin-left: 12px;
      height: 20px;
      width: 58px;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0.4px;
      color: #333333;
      cursor: pointer;
    }

    .apply_groups {
      display: flex;
      flex-direction: column;
    }
  }
}

.settting_fun_icon {
  font-size: 20px;
}

.line {
  display: inline-block;
  width: 69px;
  height: 1px;
  border: 1px solid rgba(0, 0, 0, 0.0462467);
}

.components {
  ::v-deep .edit_userinfo_diglog {
    border-radius: 4px;
    overflow: hidden;
  }

  ::v-deep .setting_func_diglog > .el-dialog__body {
    padding: 28px 24px 24px 24px;
  }

  ::v-deep .setting_func_diglog > .el-dialog__header {
    background: #f2f2f2;
    margin: 0;
  }

  ::v-deep .edit_userinfo_diglog > .el-dialog__header {
    padding: 0;
    margin-right: 0;
  }

  ::v-deep .edit_userinfo_diglog > .el-dialog__body {
    padding: 0;
    border-radius: 4px;
  }

  ::v-deep .login_diglog > .el-dialog__header {
    background: #f2f2f2;
    margin: 0;
  }

  ::v-deep .personal_setting_card > .el-dialog__header {
    background: #f2f2f2;
    margin: 0;
  }
}
</style>