|
|
|
@ -1,94 +1,107 @@ |
|
|
|
<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> |
|
|
|
<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="sm:h-7 sm: pb-2 h-5 sm:w-auto" |
|
|
|
: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> |
|
|
|
</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-item v-if="user.roleId === 858" :index="`/merchant`"><h3>商家中心</h3></el-menu-item> |
|
|
|
<el-menu-item v-if="user.roleId === 859" :index="`/developer`"><h3>开发者中心</h3></el-menu-item> |
|
|
|
<el-menu-item v-else :index="`/developer`"><h3>入驻</h3></el-menu-item> |
|
|
|
</el-menu> |
|
|
|
</div> |
|
|
|
</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-menu-item v-if="user.roleId === 858" :index="`/merchant`"><h3>商家中心</h3></el-menu-item> |
|
|
|
<el-menu-item v-if="user.roleId === 859" :index="`/developer`"><h3>开发者中心</h3></el-menu-item> |
|
|
|
<el-menu-item v-else :index="`/developer`"><h3>入驻</h3></el-menu-item> |
|
|
|
|
|
|
|
<!-- 顶部菜单超出数量折叠 --> |
|
|
|
<!-- <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="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> |
|
|
|
<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-button :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> |
|
|
|
</el-dropdown> |
|
|
|
<el-dropdown-item v-if="token && sysDomain" |
|
|
|
@click="loginAdminByToken">控制台 |
|
|
|
</el-dropdown-item> |
|
|
|
<el-dropdown-item v-else divided @click="navigateTo(`/passport/login`)">登录</el-dropdown-item> |
|
|
|
</el-dropdown-menu> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button> |
|
|
|
</template> |
|
|
|
</ClientOnly> |
|
|
|
</el-space> |
|
|
|
</el-dropdown> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Passport :visible="showPassport" @done="reload"/> |
|
|
|
</header> |
|
|
|
<div class="header__height__placeholder"></div> |
|
|
|
<Passport :visible="showPassport" @done="reload"/> |
|
|
|
</header> |
|
|
|
<div class="header__height__placeholder"></div> |
|
|
|
</el-affix> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -167,7 +180,7 @@ const reload = async () => { |
|
|
|
} |
|
|
|
if (token && token != '') { |
|
|
|
const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user', {baseURL: runtimeConfig.public.apiServer}) |
|
|
|
if(response.value?.data){ |
|
|
|
if (response.value?.data) { |
|
|
|
user.value = response.value?.data; |
|
|
|
} |
|
|
|
// 获取后台管理地址 |
|
|
|
@ -186,11 +199,13 @@ reload(); |
|
|
|
body { |
|
|
|
background-color: #f3f6f8; |
|
|
|
} |
|
|
|
.el-menu-item:visited,.el-menu-item:hover { |
|
|
|
|
|
|
|
.el-menu-item:visited, .el-menu-item:hover { |
|
|
|
background: none !important; /* 你可以根据需要设置不同的颜色 */ |
|
|
|
transition: background-color 0.3s linear; |
|
|
|
} |
|
|
|
.is-active:hover{ |
|
|
|
|
|
|
|
.is-active:hover { |
|
|
|
border-bottom: none !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
