websoft-cms/components/AppHeader.vue

<template>
  <header class="header bg-black fixed z-100 top-0 w-full">
    <div class="flex between md:w-3/4 m-auto px-2">
      <div class="header__left flex">
        <div class="logo mt-1 sm:w-[170px] py-2 flex items-center">
          <nuxt-link v-if="config?.siteLogo" to="/">
            <el-image
              :src="config.siteLogo"
              shape="square"
              fit="fill"
              class="h-[23px] w-auto sm:h-[30px]"
              :alt="config.siteName"
              :title="config.siteName"
            />
          </nuxt-link>
          <nuxt-link v-else to="/">
            <text>{{ config?.siteName || '网宿软件' }}</text>
          </nuxt-link>
        </div>
        <nav class="hidden-sm-and-down">
          <el-menu
            :default-active="currentIndex"
            mode="horizontal"
            background-color="#000000"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse="true"
            :ellipsis="false"
            style="border-bottom: none"
            @select="handleSelect"
          >
            <template v-for="(item, index) in navigations">
              <el-menu-item :index="item.path" v-if="index < visibleNumber">
                  <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${item.path}`">
                    <template #title>
                        <text class="text-[17px]">{{ item.title }}</text>
                    </template>
                    <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${sub.path}`" :key="subIndex">{{ sub.title }}</el-menu-item>
                  </el-sub-menu>
                  <text v-else class="text-[17px]">{{ item.title }}</text>
              </el-menu-item>
            </template>

            <!-- 顶部菜单超出数量折叠 -->
            <el-sub-menu index="more" v-if="navigations && navigations.length > visibleNumber">
              <template #title>更多菜单</template>
              <template v-for="(item, index) in navigations">
                <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
                  {{ item.title }}</el-menu-item
                >
              </template>
            </el-sub-menu>
          </el-menu>
        </nav>
      </div>
      <div class="header__right items-center">
        <div class="sm:flex hidden">
          <el-input
              class="w-20 mr-4"
              placeholder="站内搜索"
              :suffix-icon="ElIconSearch"
              v-model="searchValue"
              @keyup.enter.native="handleSearch"
          />
        </div>
        <ClientOnly>
          <template v-if="token">
            <el-dropdown @command="handleCommand">
              <el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="user">个人中心</el-dropdown-item>
                  <el-dropdown-item divided command="logOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button circle :icon="ElIconSearch" @click="navigateTo('/search')"></el-button>
            <el-button circle :icon="ElIconUserFilled" @click="goLogin"></el-button>
          </template>
        </ClientOnly>
      </div>
    </div>
  </header>
  <div class="header__height__placeholder"></div>
</template>

<script setup lang="ts">
  // 引入所需的图标
  import {useConfigInfo, useMenu, useWebsite} from "~/composables/configState";
  import UnderMaintenance from "~/components/UnderMaintenance.vue";
  const route = useRoute();
  const website = useWebsite()
  const searchValue = ref<string>();
  const token = ref<string | undefined>(undefined);
  const navigations = useMenu();
  const config = useConfigInfo();
  // 顶部栏初始数
  const visibleNumber = ref<number>(10);
  // 当前激活菜单的 index
  const currentIndex = ref<string>('2');

  function handleCommand(command: string) {
    switch (command) {
      case 'logOut':
        logOut();
        break;
      default:
        navigateTo('/user');
        break;
    }
  }

  function logOut() {}

  function goLogin() {}

  const handleSearch = (key: string, keyPath: string) => {
    console.log(key, keyPath);
    navigateTo('/search?keyword=' + searchValue.value);
  };

  function handleSelect(key: string, keyPath: any) {
    currentIndex.value = key;
    navigateTo(`${key}`);
  }

</script>

<style lang="scss">
  body {
    background-color: #f3f6f8;
  }
</style>