sl-sfy-safety/src/components/Nav.vue

<template>
  <header class="header">
    <img :src="logo" alt="logo" class="header__logo" />
    <span class="platform-name">{{ title }}</span>
    <nav class="header__nav">
      <div
        class="header__nav--item"
        v-for="item in NAV_LIST"
        :key="item.path"
        :class="{ active: selectedKey === item.name }"
        @click="handleNavClick(item)"
      >
        <span>{{ item.meta?.title }}</span>
      </div>
    </nav>
    <SwitchTenant v-if="userStore.info.tenantId === SYS_TENANT_ID" />
    <div class="platform__right">
      <div class="platform__right__search">
        <el-input v-model="searchValue" placeholder="搜索您想了解的" class="input-with-icon" clearable>
          <template #prepend>
            <img :src="searchIcon" alt="search" class="search-icon" @click="handleSearch" />
          </template>
        </el-input>
      </div>
      <div class="platform__right__login">
        <span @click="handleLogin('login')" v-if="!userStore.info?.id">登录</span>
        <UserInfo v-else @switchAccount="handleLogin('switchAccount')" @modifyPassword="handleUpdatePwd" />
      </div>
    </div>
  </header>
  <Login v-if="userStore.showLogin" @close="userStore.showLogin = false" class="fadeIn" />
  <UpdatePwd v-if="userStore.showUpdatePwd" @close="userStore.showUpdatePwd = false" class="fadeIn" />
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { NAV_LIST } from '@/constant/nav';
  import logo from 'assets/images/home/comac-logo@1X.png';
  import searchIcon from 'assets/svg/search.svg';
  import Login from '@/components/Login.vue';
  import UpdatePwd from '@/components/UpdatePwd.vue';
  import UserInfo from '@/components/UserInfo.vue';
  import { useGlobSetting } from '@/hooks/setting';
  import { useUserStore } from '@/store/modules/user';
  import SwitchTenant from '@/layout/components/SwitchTenant.vue';
  import { SYS_TENANT_ID } from '@/utils/useTargetTenantIdSetting';
  import { ElMessage } from 'element-plus';

  const userStore = useUserStore();
  const activeNav = ref(NAV_LIST[0].name);
  const router = useRouter();
  const searchValue = ref('');
  const loginType = ref<'login' | 'switchAccount'>('login');

  const handleSearch = () => {
    console.log('searchValue', searchValue.value);
  };

  const handleLogin = (type: 'login' | 'switchAccount') => {
    loginType.value = type;
    userStore.showLogin = true;
  };

  const handleUpdatePwd = () => {
    userStore.showUpdatePwd = true;
  };

  const currentRoute = useRoute();
  const { title } = useGlobSetting();

  const handleNavClick = (item: { name: string; path: string }) => {
    if (!item.path) {
      ElMessage.warning(`${item.name}功能建设中，暂无法访问`);
      return;
    }
    activeNav.value = item.name;
    router.push(item.path);
  };

  const selectedKey = computed(() => {
    return currentRoute.matched[0]?.name;
  });
</script>

<style lang="scss" scoped>
  .header {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 78cpx;
    background: url('assets/images/home/nav-bg@1X.png') no-repeat center center / cover;
    z-index: 2;
    &__nav {
      @include flex-center;
      gap: 20cpx;
      height: 100%;
      margin-left: 32cpx;
      &--item {
        @include flex-center;
        height: 45cpx;
        padding: 10cpx 20cpx;
        gap: 8cpx;
        font-size: 18cpx;
        color: #333;
        border-radius: 4cpx;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        &.active {
          background: linear-gradient(180deg, #33afff, $primary-color);
          color: $white-color;
        }
      }
    }
  }
  .header__logo {
    width: 34cpx;
    height: 34cpx;
    margin-left: 38cpx;
  }
  .platform-name {
    font-size: 18cpx;
    font-weight: 550;
    margin-left: 9cpx;
  }
  .platform__right {
    @include flex-center;
    position: absolute;
    top: 0;
    right: 0;
    height: 73cpx;
    &__search {
      @include flex-center;
      width: 210cpx;
      height: 100%;
      padding: 28cpx 26cpx;
      background: rgba($white-color, 0.4);
    }
    &__login {
      @include flex-center;
      gap: 10cpx;
      height: 100%;
      padding: 27cpx 40cpx 26cpx 40cpx;
      font-size: 18cpx;
      color: $primary-color;
      cursor: pointer;
    }
  }
  .input-with-icon {
    :deep(.el-input__wrapper),
    :deep(.el-input-group__prepend) {
      background-color: transparent;
      box-shadow: none;
      padding: 0;
    }
    :deep(.el-input__inner) {
      width: 120cpx;
      margin-left: 5cpx;
      font-size: 16cpx;
      color: #909399;
    }
    .search-icon {
      width: 28cpx;
      height: 28cpx;
      cursor: pointer;
    }
  }
</style>