websoft-cms/components/AppHeader.vue

<template>
  <header class="header bg-black fixed z-10 w-full">
    <div class="flex between md:w-3/4 m-auto px-2">
      <div class="header__left flex">
        <div class="logo mt-1 w-[170px] max-h-[60px] py-2 flex items-center" @click="reload">
          <nuxt-link v-if="config?.siteLogo" to="/">
            <el-image
              :src="config.siteLogo"
              shape="square"
              fit="fill"
              class="h-[20px] 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">
                <template v-if="item.children.length > 0">
                  <el-sub-menu :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>
                </template>
                <template v-else>
                  <text class="text-[17px]">{{ item.title }}</text>
                </template>
              </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">
        <el-input
          class="w-20 mr-4"
          placeholder="站内搜索"
          :suffix-icon="ElIconSearch"
          v-model="searchValue"
          @keyup.enter.native="handleSearch"
        />
        <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="ElIconUserFilled" @click="goLogin"></el-button>
          </template>
        </ClientOnly>
      </div>
    </div>
  </header>

    <div class="header__height__placeholder"></div>
</template>

<script setup lang="ts">
// 引入所需的图标
  import type { Config } from '~/types/global';
import type {ApiResult, PageResult} from '~/api';
  import type { Navigation } from '~/api/cms/navigation/model';
  import { useServerRequest } from '~/composables/useServerRequest';
import {useConfigInfo, useMenu} from "~/composables/configState";
import {listDomain} from "~/api/cms/domain";
import type {Domain} from "~/api/cms/domain/model";
  const route = useRoute();

  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');
  const showSubMenu = ref<boolean>(false);

  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}`);
  }

  // 获取数据
  // const reload = async () => {
  //   await nextTick();
  //   const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/website-field/config', {});
  //   if (fields.value?.data) {
  //     config.value = fields.value.data;
  //   }
  //   const { data: navigation } = await useServerRequest<ApiResult<Navigation[]>>('/cms/navigation/tree', {
  //     query: {
  //       position: 1
  //     }
  //   });
  // };

  // reload();
</script>

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