You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
7.6 KiB
209 lines
7.6 KiB
<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-[150px] h-7 w-auto py-2 flex items-center">
|
|
<nuxt-link v-if="config?.siteLogo" to="/">
|
|
<div class="flex flex-col text-center md:p-0 px-4">
|
|
<el-image
|
|
:src="config.siteLogo"
|
|
shape="square"
|
|
fit="fill"
|
|
class="lg:h-7 lg:w-auto pb-2 h-5 w-[90px] h-[28px]"
|
|
: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>
|
|
<div class="hidden sm:flex">
|
|
<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-menu>
|
|
</div>
|
|
</div>
|
|
<div class="header__right items-center pr-4 sm:pr-0 md:flex hidden">
|
|
<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="loginAdminByToken">控制台
|
|
</el-button>
|
|
<ClientOnly>
|
|
<template v-if="token">
|
|
<el-dropdown @command="handleCommand">
|
|
<el-avatar class="cursor-pointer" :src="user?.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 class="md:hidden flex md:p-0 px-4">
|
|
<el-dropdown>
|
|
<span class="el-dropdown-link">
|
|
<el-avatar v-if="token" class="cursor-pointer" :src="user?.avatar" :size="30"/>
|
|
<el-button v-else :icon="ElIconMenu"></el-button>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<template v-for="(item, index) in navigations">
|
|
<el-dropdown-item>
|
|
<span @click="navigateTo(item.path)">{{ item.title }}</span>
|
|
</el-dropdown-item>
|
|
</template>
|
|
<template v-if="token">
|
|
<el-dropdown-item divided v-if="sysDomain" @click="loginAdminByToken">控制台</el-dropdown-item>
|
|
<el-dropdown-item divided command="user" @click="navigateTo(`/user`)">账户中心</el-dropdown-item>
|
|
<el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item>
|
|
</template>
|
|
<el-dropdown-item v-if="!token" divided @click="navigateTo(`/passport/login`)">登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</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,
|
|
useSysDomain,
|
|
useToken,
|
|
useUser,
|
|
useWebsite
|
|
} from "~/composables/configState";
|
|
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";
|
|
import {loginAdminByToken} from "~/utils/common";
|
|
|
|
const route = useRoute();
|
|
// 配置信息
|
|
const runtimeConfig = useRuntimeConfig();
|
|
const showPassport = ref<boolean>(false);
|
|
const token = useToken();
|
|
const user = useUser();
|
|
const navigations = useMenu();
|
|
const config = useConfigInfo();
|
|
const affix = useProductAffix();
|
|
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})
|
|
if (response.value?.data) {
|
|
user.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>
|