push
This commit is contained in:
xuziqiang
243
lib/paas/view/system/layout/header.vue
Normal file
243
lib/paas/view/system/layout/header.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<a-layout-header class="header">
|
||||
<a-row type="flex">
|
||||
<a-col class="nav-item nav-logo">
|
||||
<!--logo-->
|
||||
<img v-if="!customAppLogo" class="app-logo" :src="imageUrl" />
|
||||
<ns-icon v-else style="width: 100px; height: 30px" class="headerLogin" name="headerLogin" />
|
||||
</a-col>
|
||||
<a-col class="nav-item nav-menu">
|
||||
<!--产品与服务-->
|
||||
<ns-start-menu />
|
||||
</a-col>
|
||||
|
||||
<a-col class="nav-item nav-region">
|
||||
<!--地域-->
|
||||
<nav-region />
|
||||
</a-col>
|
||||
<a-col flex="1 1 0%">
|
||||
<!--占位-->
|
||||
</a-col>
|
||||
<a-col class="nav-item nav-notice" v-if="showNotify">
|
||||
<!--通知中心-->
|
||||
<div class="notify" @click="gotoNotify()" title="通知中心">
|
||||
<span>通知中心</span>
|
||||
<i class="tip" v-if="notifies.length > 0"></i>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col class="nav-item nav-user">
|
||||
<!--用户菜单-->
|
||||
<ns-icon name="user" class="icon-user" />
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
{{ userName }}
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu v-for="(item, index) in userMenus" :key="index">
|
||||
<a-menu-item key="index">
|
||||
<a @click="onUserMenu(item.name)">{{ item.label }}</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-col>
|
||||
|
||||
<a-col>
|
||||
<!-- <div class="plugins right">-->
|
||||
<!-- <div class="theme-dropdown">-->
|
||||
<!-- <a-dropdown-->
|
||||
<!-- :trigger="['click']"-->
|
||||
<!-- :overlayStyle="{ width: '220px' }"-->
|
||||
<!-- v-model:visible="themeVisible"-->
|
||||
<!-- >-->
|
||||
<!-- <BgColorsOutlined :style="{ fontSize: '18px', color: themeColor?.hex || themeColor }" />-->
|
||||
<!-- <template #overlay>-->
|
||||
<!-- <NsColorPicker v-model:value="themeColor" />-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-dropdown>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { loginService } from '/nerv-lib/paas/store/modules/login-service';
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
import NsStartMenu from './start-menu.vue';
|
||||
import NavRegion from './region.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { debouncedWatch } from '@vueuse/core';
|
||||
import { appConfigStore } from '/nerv-lib/paas/store/modules/app-config';
|
||||
export default defineComponent({
|
||||
name: 'NsHeader',
|
||||
components: { NsStartMenu, DownOutlined, NavRegion },
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-valid-default-prop
|
||||
headerList: { type: Array, default: () => [] },
|
||||
initHeaderKey: { type: Array },
|
||||
notifies: { type: Array, default: () => [] },
|
||||
showNotify: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup: () => {
|
||||
const loginMap = loginService();
|
||||
let { userName } = storeToRefs(loginMap);
|
||||
const imageUrl = ref('/api/passport/objs/LogoImage/logo.png');
|
||||
const appConfig = appConfigStore();
|
||||
let themeColor = ref('#194d33');
|
||||
let themeVisible = ref(false);
|
||||
|
||||
function changeTheme(color) {
|
||||
// replaceStyleVariables({ colorVariables: [...getThemeColors(color)] });
|
||||
}
|
||||
|
||||
debouncedWatch(
|
||||
() => themeColor.value,
|
||||
() => {
|
||||
changeTheme(themeColor.value?.hex);
|
||||
},
|
||||
{
|
||||
debounce: 500,
|
||||
},
|
||||
);
|
||||
return {
|
||||
customAppLogo: appConfig.customAppLogo,
|
||||
imageUrl,
|
||||
userName,
|
||||
themeColor,
|
||||
themeVisible,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
region: { value: '' },
|
||||
userMenus: [{ label: '退出', name: 'exit' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
gotoNotify() {
|
||||
// if (this.authorizationService.isCurrentApp('nervui-notify')) {
|
||||
// if (this.region) {
|
||||
// this.router.navigate(['/notify/WebConsoleMsg'], {
|
||||
// relativeTo: this.route,
|
||||
// replaceUrl: true,
|
||||
// queryParams: { view: 'unreadWebConsoleMsg', region: this.region.value },
|
||||
// });
|
||||
// } else {
|
||||
// this.router.navigate(['/notify/WebConsoleMsg'], {
|
||||
// relativeTo: this.route,
|
||||
// replaceUrl: true,
|
||||
// queryParams: { view: 'unreadWebConsoleMsg' },
|
||||
// });
|
||||
// }
|
||||
// return;
|
||||
// }
|
||||
if (this.region) {
|
||||
window.location.href =
|
||||
'/nervui-notify/notify/unWebConsoleMsg/list?®ion=' + this.region.value;
|
||||
} else {
|
||||
window.location.href = '/nervui-notify/notify/unWebConsoleMsg/list';
|
||||
}
|
||||
},
|
||||
onUserMenu(name: string) {
|
||||
if (name === 'exit') {
|
||||
const loginMap = loginService();
|
||||
loginMap.logout();
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 20px 0 rgb(23 46 1 / 3%);
|
||||
// border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
.ant-row {
|
||||
width: 100%;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 16px;
|
||||
color: @layout-header-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
|
||||
.icon-logo {
|
||||
width: 60px !important;
|
||||
height: 36px !important;
|
||||
color: @layout-header-link-color !important;
|
||||
}
|
||||
.app-logo {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
margin: 11px 3px 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-user {
|
||||
padding: 0 16px;
|
||||
.icon-user {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
color: @layout-header-link-color !important;
|
||||
margin-right: 8px;
|
||||
}
|
||||
a {
|
||||
color: @layout-header-link-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notify {
|
||||
position: relative;
|
||||
color: @layout-header-color;
|
||||
.tip {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: -4px;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
transform: scale(0.8);
|
||||
background: #ff1744;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(
|
||||
.ant-dropdown-trigger > .anticon.anticon-down,
|
||||
.ant-dropdown-link > .anticon.anticon-down,
|
||||
.ant-dropdown-button > .anticon.anticon-down
|
||||
) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.theme-dropdown {
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user