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 w-[180px] flex items-center" @click="reload">
          <nuxt-link v-if="config?.siteLogo" to="/">
            <el-image :src="config.siteLogo" shape="square" :alt="config.siteName" :title="config.siteName" class="w-[120px]" />
          </nuxt-link>
          <nuxt-link v-else to="/">
              <text>{{ config?.siteName || '网宿软件' }}</text>
          </nuxt-link>
        </div>
        <nav v-if="route.path.indexOf('/user') === -1" 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" :key="index" v-if="index < visibleNumber"
              >
                <template v-if="item.chd">
                  <template slot="title">我的工作台</template>
                </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-50 m-2 mr-20"
            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/config";
import type {ApiResult} from "~/api";
import type {Navigation} from "~/api/cms/navigation/model";
import {useRequest} from "~/composables/useRequest";

const route = useRoute()

const searchValue = ref<string>()
const token = ref<string | undefined>(undefined)
const navigations = ref<Navigation[] | any>([])
const config = ref<Config | any>({
  siteLogo: '/logo.png'
})
// 顶部栏初始数
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}`)
}



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

reload();
</script>

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