websoft-cms/components/AppHeader.vue

<template>
  <el-affix :offset="0" @change="onAffix">
  <header class="header z-100 top-0 w-full bg-white/75 opacity-90 backdrop-blur  border-b border-gray-200 dark:border-gray-800 -mb-px sticky top-0 z-50 lg:mb-0 lg:border-0" :class="affix ? 'absolute blur-xs' : 'sticky bg-white/75'">
    <div class="flex items-center between md:w-screen-xl w-full m-auto">
      <div class="header___left flex items-center">
        <div class="logo mt-1 sm:w-[120px] sm:ml-0 ml-2 h-7 w-auto py-2 flex items-center">
          <nuxt-link v-if="config?.siteLogo" to="/">
            <div class="flex flex-col text-center">
              <el-image
                  :src="config.siteLogo"
                  shape="square"
                  fit="fill"
                  class="sm:h-5 h-5 sm:w-auto w-17"
                  :alt="config.siteName"
                  :title="config.siteName"
              />
              <span class="text-gray-500 text-2.5" style="line-height: 1rem">云应用开发平台</span>
            </div>

          </nuxt-link>
          <nuxt-link v-else to="/">
            <text>{{ config?.siteName }}</text>
          </nuxt-link>
        </div>

        <el-menu
            :default-active="currentIndex"
            mode="horizontal"
            background-color="transparent"
            :collapse="true"
            :ellipsis="false"
            style="border: none"
            @select="handleSelect"
        >
          <template v-for="(item, index) in navigations">
            <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${item.path}`">
              <template #title><h3>{{ item.title }}</h3></template>
              <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${sub.path}`">{{
                  sub.title
                }}
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="`${item.path}`"><h3>{{ item.title }}</h3></el-menu-item>
          </template>

          <!-- 顶部菜单超出数量折叠 -->
          <!--            <el-sub-menu index="more" v-if="navigations && navigations.length > (config.elMenuMaxNumber)">-->
          <!--              <template #title>更多菜单</template>-->
          <!--              <template v-for="(item, index) in navigations">-->
          <!--                <el-menu-item :index="item.path" :key="index" v-if="index >= (config.elMenuMaxNumber)">-->
          <!--                  <text :class="item.style">{{ item.title }}</text>-->
          <!--                </el-menu-item-->
          <!--                >-->
          <!--              </template>-->
          <!--            </el-sub-menu>-->
        </el-menu>
      </div>
      <div class="header__right items-center pr-4 sm:pr-0">
        <el-space class="sm:flex hidden" size="large" v-if="config.showSearchTools">
          <!--          <el-button v-if="token" @click="navigateTo(`/manage`)">控制台</el-button>-->
<!--          <el-button v-if="config.showSearchIcon" circle :icon="ElIconSearch" @click="navigateTo('/search')"></el-button>-->
          <el-button v-if="token && sysDomain"
                     @click="openSpmUrl(`https://${sysDomain}/token-login`,website,Number(TID_ADMIN))">控制台
          </el-button>
          <ClientOnly>
            <template v-if="token">
              <el-dropdown @command="handleCommand">
                <el-avatar class="cursor-pointer" :src="userInfo?.avatar" :size="30"/>
                <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" @click="navigateTo('/user/logout')">退出
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template v-else>
              <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>
            </template>
          </ClientOnly>
        </el-space>
      </div>
    </div>
    <Passport :visible="showPassport" @done="reload"/>
  </header>
  <div class="header__height__placeholder"></div>
  </el-affix>
</template>

<script setup lang="ts">
// 引入所需的图标
import {
  useConfigInfo,
  useMenu,
  useProductAffix,
  useShowLogin,
  useSysDomain,
  useToken,
  useUser,
  useWebsite
} from "~/composables/configState";
import UnderMaintenance from "~/components/UnderMaintenance.vue";
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api";
import type {User} from "~/api/system/user/model";
import {navigateTo, openSpmUrl} from "#imports";
import type {Company} from "~/api/system/company/model";

const route = useRoute();
// 配置信息
const runtimeConfig = useRuntimeConfig();
const website = useWebsite()
const showPassport = ref<boolean>(false);
const searchValue = ref<string>();
const token = useToken();
const userInfo = ref<User>();
const showLogin = useShowLogin();
const navigations = useMenu();
const config = useConfigInfo();
const affix = useProductAffix();
const TID_ADMIN = localStorage.getItem('TID_ADMIN');
const sysDomain = useSysDomain();

// 顶部栏初始数
const visibleNumber = ref<number>(6);
config.value.elMenuMaxNumber = 8;
// 当前激活菜单的 index
const currentIndex = ref<string>('/');

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

const onAffix = (index: boolean) => {
  affix.value = index;
}

function logOut() {
  token.value = ''
  localStorage.clear();
  navigateTo('/passport/login')
}

function goLogin() {
  navigateTo('/passport/login')
}

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

const reload = async () => {
  const token = localStorage.getItem('token');
  const domain = localStorage.getItem('SysDomain');
  if (domain) {
    sysDomain.value = domain;
  }
  if (token && token != '') {
    const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user', {baseURL: runtimeConfig.public.apiServer})
    userInfo.value = response.value?.data;
    // 获取后台管理地址
    const {data: company} = await useServerRequest<ApiResult<Company>>('/system/company/profile', {baseURL: runtimeConfig.public.apiServer})
    if (company.value?.data?.domain) {
      sysDomain.value = company.value?.data?.domain;
      localStorage.setItem('SysDomain', `${company.value?.data?.domain}`);
    }
  }
}

reload();
</script>

<style lang="scss">
body {
  background-color: #f3f6f8;
}
.el-menu-item:visited,.el-menu-item:hover {
  background: none !important; /* 你可以根据需要设置不同的颜色 */
  transition: background-color 0.3s linear;
}
.is-active:hover{
  border-bottom: none !important;
}
</style>