workspace/code/link56/link56-frontend-new/src/layout/components/header.vue

<script lang="ts" setup>
import {
  CircleClose,
  User,
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import SafeImage from '@/components/SafeImage.vue'
import { useUserStore } from '@/store/user'
import { useWebSocket } from '@/store/websocket'

const websocket = useWebSocket()
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const menuList = [
  { name: '首页', path: '/' },
  { name: '企业名录', path: '/company' },
  { name: '论坛中心', path: '/post' },
  { name: '关于我们', path: '/aboutus' },
  { name: '联系我们', path: '/forum' },
]

function navigateTo(path: string) {
  router.push(path)
}

function exitLogin() {
  userStore.clear()
  websocket.logout()

  router.push('/auth/login')
}

function isActive(path: string) {
  if (path === '/') {
    return route.path === '/'
  }
  return route.path === path || route.path.startsWith(`${path}/`)
}
</script>

<template>
  <header class="header">
    <nav class="container">
      <img src="/logo.png" class="logo">
      <div class="menu">
        <span
          v-for="item in menuList"
          :key="item.path"
          :class="{ active: isActive(item.path) }"
          class="menu-item"
          @click="navigateTo(item.path)"
        >
          <span class="menu-item-name">
            {{ item.name }}
          </span>
        </span>
      </div>
      <div class="action">
        <i-tdesign:search class="action-item" />

        <SvgIcon icon="solar:chat-round-line-linear" class="action-item" @click="navigateTo('/im')" />

        <template v-if="userStore.isLogined">
          <el-divider direction="vertical" />

          <el-dropdown>
            <div class="user">
              <SafeImage :url="userStore.user.avatar || userStore.company.logo" :size="36" round />
              <div class="info">
                <span class="name">{{ userStore.user.name }}</span>
                <span class="company">{{ userStore.company.name }}</span>
              </div>
            </div>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="User" @click="navigateTo('/settings')">
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item :icon="CircleClose" @click="exitLogin()">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>

        <template v-else>
          <el-button
            type="primary"
            round
            @click="navigateTo('/auth/login')"
          >
            登录
          </el-button>
        </template>
      </div>
    </nav>
  </header>
</template>

<style lang="scss" scoped>
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #fff;

  .container {
    padding: 0rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    border-bottom: 1px solid rgb(232.9, 232.9, 232.9);
    flex-shrink: 0;
    min-width: 0;

    .logo {
      width: 160px;
      height: 50px;
      flex-shrink: 0;
      min-width: 0;
    }

    .menu {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      min-width: 0;

      .menu-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #9aa0a6;
        outline: none;
        margin-left: 36px;
        transition: color 0.3s ease;
        position: relative;

        &:hover {
          color: #2f2f2f !important;
        }
        &:first-child {
          margin-left: 0px;
        }

        &.active {
          color: #2f2f2f !important;

          .menu-item-name {
            font-weight: 500;
          }
        }

        .menu-item-name {
          font-size: 18px;
          font-weight: 400;
        }
      }
    }

    .action {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      min-width: 0;

      .action-item {
        font-size: 20px;
        margin-right: 24px;
        color: #000;
        cursor: pointer;
        &:last-child {
          margin-right: 0px;
        }
      }

      .user {
        margin-left: 24px;
        display: flex;
        align-items: center;
        cursor: pointer;
        outline: 0;

        :deep(.el-badge__content.is-dot) {
          width: 10px;
          height: 10px;
        }
        .info {
          display: flex;
          flex-direction: column;
          margin-left: 12px;

          .name {
            font-size: 16px;
            font-weight: 500;
          }

          .company {
            font-size: 12px;
            color: #888;
            margin-top: 6px;
          }
        }
      }
    }
  }
}
</style>