TIANHE
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<a-dropdown v-if="currentUser && currentUser.name" placement="bottomRight">
|
||||
<span class="ant-pro-account-avatar">
|
||||
<a-avatar size="small" :src="currentUser.avatar" class="antd-pro-global-header-index-avatar" />
|
||||
<span>{{ currentUser.name }}</span>
|
||||
</span>
|
||||
<template v-slot:overlay>
|
||||
<a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
|
||||
<a-menu-item key="logout" @click="handleLogout">
|
||||
<a-icon type="logout" />
|
||||
{{ $t('menu.account.logout') }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<span v-else>
|
||||
<a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Modal } from 'ant-design-vue'
|
||||
|
||||
export default {
|
||||
name: 'AvatarDropdown',
|
||||
props: {
|
||||
currentUser: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
},
|
||||
menu: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLogout (e) {
|
||||
Modal.confirm({
|
||||
title: this.$t('layouts.usermenu.dialog.title'),
|
||||
content: this.$t('layouts.usermenu.dialog.content'),
|
||||
onOk: () => {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// setTimeout(Math.random() > 0.5 ? resolve : reject, 1500)
|
||||
// }).catch(() => console.log('Oops errors!'))
|
||||
return this.$store.dispatch('Logout').then(() => {
|
||||
this.$router.push({ name: 'login' })
|
||||
})
|
||||
},
|
||||
onCancel () {}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ant-pro-drop-down {
|
||||
.action {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.ant-dropdown-menu-item {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗黑主题 - 下拉菜单样式 */
|
||||
body.dark .ant-dropdown-menu,
|
||||
body.realdark .ant-dropdown-menu,
|
||||
.ant-layout.dark .ant-dropdown-menu,
|
||||
.ant-layout.realdark .ant-dropdown-menu,
|
||||
.ant-pro-layout.dark .ant-dropdown-menu,
|
||||
.ant-pro-layout.realdark .ant-dropdown-menu {
|
||||
background-color: #1f1f1f;
|
||||
border: 1px solid #303030;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.ant-dropdown-menu-item {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
|
||||
&:hover,
|
||||
&.ant-dropdown-menu-item-selected {
|
||||
background-color: #262626;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-item-divider {
|
||||
background-color: #303030;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div :class="wrpCls">
|
||||
<!-- User avatar/name removed for local OSS build -->
|
||||
<select-lang :class="prefixCls" />
|
||||
<a-tooltip :title="$t('app.setting.tooltip')">
|
||||
<span :class="prefixCls" @click="handleSettingClick">
|
||||
<a-icon type="setting" style="font-size: 16px;" />
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectLang from '@/components/SelectLang'
|
||||
|
||||
export default {
|
||||
name: 'RightContent',
|
||||
components: {
|
||||
SelectLang
|
||||
},
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-pro-global-header-index-action'
|
||||
},
|
||||
isMobile: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
topMenu: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
apiBase: 'https://api.quantdinger.com/'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSettingClick () {
|
||||
// 触发设置抽屉显示事件
|
||||
this.$root.$emit('show-setting-drawer')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrpCls () {
|
||||
return {
|
||||
'ant-pro-global-header-index-right': true,
|
||||
[`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '~ant-design-vue/es/style/themes/default.less';
|
||||
|
||||
/* 浅色主题（默认） */
|
||||
.ant-pro-global-header-index-right {
|
||||
.ant-pro-global-header-index-action {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗黑主题 - 强制覆盖 */
|
||||
/* 只要 body 或 layout 有 dark/realdark 类，就应用这些样式 */
|
||||
body.dark,
|
||||
body.realdark,
|
||||
.ant-layout.dark,
|
||||
.ant-layout.realdark,
|
||||
.ant-pro-layout.dark,
|
||||
.ant-pro-layout.realdark {
|
||||
/* 覆盖 Header 右侧容器内所有文本颜色 */
|
||||
.ant-pro-global-header-index-right {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
|
||||
* {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.ant-pro-global-header-index-action {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
.ant-pro-account-avatar {
|
||||
.antd-pro-global-header-index-avatar {
|
||||
background: rgba(255, 255, 255, 0.25) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 下拉菜单触发器（包含图标） */
|
||||
.ant-pro-drop-down,
|
||||
.ant-dropdown-trigger {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user