242 lines
6.8 KiB
Vue
242 lines
6.8 KiB
Vue
<script setup lang="ts">
|
||
import svgLight from '@/assets/svg/light.svg';
|
||
import svgDark from '@/assets/svg/dark.svg';
|
||
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
|
||
import { viewTransitionTheme } from 'antdv-pro-layout';
|
||
import { ProModal } from 'antdv-pro-modal';
|
||
import { ref } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { useFullscreen } from '@vueuse/core';
|
||
import { hasPermissions } from '@/plugins/auth-user';
|
||
import useI18n from '@/hooks/useI18n';
|
||
import useLayoutStore from '@/store/modules/layout';
|
||
import useAppStore from '@/store/modules/app';
|
||
import useUserStore from '@/store/modules/user';
|
||
import useAlarmStore from '@/store/modules/alarm';
|
||
import useMaskStore from '@/store/modules/mask';
|
||
const { isFullscreen, toggle } = useFullscreen();
|
||
const { t, changeLocale, optionsLocale } = useI18n();
|
||
const layoutStore = useLayoutStore();
|
||
const maskStore = useMaskStore();
|
||
const userStore = useUserStore();
|
||
const appStore = useAppStore();
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
/**头像展开项点击 */
|
||
function fnClick({ key }: MenuInfo) {
|
||
switch (key) {
|
||
case 'settings':
|
||
router.push({ name: 'Settings' });
|
||
break;
|
||
case 'profile':
|
||
router.push({ name: 'Profile' });
|
||
break;
|
||
case 'logout':
|
||
userStore.fnLogOut().finally(() => router.push({ name: 'Login' }));
|
||
break;
|
||
}
|
||
}
|
||
|
||
/**锁屏确认 */
|
||
const lockConfirm = ref<boolean>(false);
|
||
/**锁屏密码 */
|
||
const lockPasswd = ref<string>('');
|
||
|
||
/**锁屏按钮提示 */
|
||
function fnClickLock() {
|
||
lockConfirm.value = true;
|
||
lockPasswd.value = '';
|
||
maskStore.lockPasswd = '';
|
||
}
|
||
|
||
/**锁屏确认跳转锁屏页面 */
|
||
function fnClickLockToPage() {
|
||
lockConfirm.value = false;
|
||
maskStore.lockPasswd = lockPasswd.value;
|
||
maskStore.handleMaskType('lock');
|
||
router.push({ name: 'LockScreen', query: { redirect: route.path } });
|
||
}
|
||
|
||
/**告警数按钮提示跳转 */
|
||
function fnClickAlarm() {
|
||
router.push({ name: 'ActiveAlarm_2088' });
|
||
}
|
||
|
||
/**改变主题色 */
|
||
function fnClickTheme(e: any) {
|
||
viewTransitionTheme(isDarkMode => {
|
||
layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
|
||
}, e);
|
||
}
|
||
|
||
/**改变多语言 */
|
||
function fnChangeLocale(e: any) {
|
||
changeLocale(e.key);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<a-space :size="12" align="center">
|
||
<a-tooltip placement="bottomRight">
|
||
<template #title>{{ t('loayouts.rightContent.alarm') }}</template>
|
||
<a-button type="text" style="color: inherit" @click="fnClickAlarm">
|
||
<template #icon>
|
||
<a-badge
|
||
:count="useAlarmStore().activeAlarmTotal"
|
||
:overflow-count="99"
|
||
status="warning"
|
||
style="color: inherit"
|
||
>
|
||
<BellOutlined />
|
||
</a-badge>
|
||
</template>
|
||
</a-button>
|
||
</a-tooltip>
|
||
|
||
<!-- 锁屏操作 -->
|
||
<span v-perms:has="['system:setting:lock']">
|
||
<a-tooltip placement="bottomRight">
|
||
<template #title>{{ t('loayouts.rightContent.lock') }}</template>
|
||
<a-button type="text" style="color: inherit" @click="fnClickLock()">
|
||
<template #icon>
|
||
<LockOutlined />
|
||
</template>
|
||
</a-button>
|
||
<ProModal
|
||
:drag="true"
|
||
:center-y="true"
|
||
:width="400"
|
||
:minHeight="200"
|
||
:mask-closable="false"
|
||
v-model:open="lockConfirm"
|
||
:title="t('loayouts.rightContent.lockTip')"
|
||
@ok="fnClickLockToPage()"
|
||
>
|
||
<a-space>
|
||
{{ t('loayouts.rightContent.lockPasswd') }}：
|
||
<a-input-password
|
||
v-model:value="lockPasswd"
|
||
:placeholder="t('common.inputPlease')"
|
||
>
|
||
<template #prefix>
|
||
<a-tooltip
|
||
:title="t('loayouts.rightContent.lockPasswdTip')"
|
||
placement="topLeft"
|
||
>
|
||
<UnlockOutlined />
|
||
</a-tooltip>
|
||
</template>
|
||
</a-input-password>
|
||
</a-space>
|
||
</ProModal>
|
||
</a-tooltip>
|
||
</span>
|
||
|
||
<a-tooltip placement="bottomRight">
|
||
<template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
|
||
<a-button type="text" style="color: inherit" @click="toggle">
|
||
<template #icon>
|
||
<FullscreenExitOutlined v-if="isFullscreen" />
|
||
<FullscreenOutlined v-else />
|
||
</template>
|
||
</a-button>
|
||
</a-tooltip>
|
||
|
||
<a-tooltip placement="bottomRight">
|
||
<template #title>{{ t('loayouts.rightContent.theme') }}</template>
|
||
<a-button type="text" @click="fnClickTheme">
|
||
<template #icon>
|
||
<img
|
||
v-if="layoutStore.proConfig.theme === 'dark'"
|
||
:src="svgDark"
|
||
class="theme-icon"
|
||
/>
|
||
<img v-else :src="svgLight" class="theme-icon" />
|
||
</template>
|
||
</a-button>
|
||
</a-tooltip>
|
||
|
||
<a-dropdown
|
||
placement="bottomRight"
|
||
trigger="click"
|
||
v-if="appStore.i18nOpen && hasPermissions(['system:setting:i18n'])"
|
||
>
|
||
<a-button type="text" style="color: inherit">
|
||
<template #icon> <TranslationOutlined /> </template>
|
||
</a-button>
|
||
<template #overlay>
|
||
<a-menu @click="fnChangeLocale">
|
||
<a-menu-item v-for="opt in optionsLocale" :key="opt.value">
|
||
{{ opt.label }}
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
|
||
<a-dropdown placement="bottomRight" trigger="click">
|
||
<div class="user">
|
||
<a-avatar
|
||
shape="circle"
|
||
size="default"
|
||
:src="userStore.getAvatar"
|
||
:alt="userStore.userName"
|
||
></a-avatar>
|
||
<span class="nick">
|
||
{{ userStore.nickName }}
|
||
</span>
|
||
</div>
|
||
<template #overlay>
|
||
<a-menu @click="fnClick">
|
||
<!-- <a-menu-item key="profile">
|
||
<template #icon>
|
||
<UserOutlined />
|
||
</template>
|
||
<span>{{ t('loayouts.rightContent.profile') }}</span>
|
||
</a-menu-item> -->
|
||
<a-menu-item key="settings">
|
||
<template #icon>
|
||
<SettingOutlined />
|
||
</template>
|
||
<span>{{ t('loayouts.rightContent.settings') }}</span>
|
||
</a-menu-item>
|
||
<a-menu-divider />
|
||
<a-menu-item key="logout">
|
||
<template #icon>
|
||
<LogoutOutlined />
|
||
</template>
|
||
<span>{{ t('loayouts.rightContent.logout') }}</span>
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
</a-space>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.user {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
.nick {
|
||
padding-left: 8px;
|
||
padding-right: 16px;
|
||
font-size: 16px;
|
||
max-width: 164px;
|
||
white-space: nowrap;
|
||
text-align: start;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.theme-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-bottom: 4px;
|
||
color: inherit;
|
||
}
|
||
</style>
|