<script lang="ts" setup>
|
import type { NotificationItem } from '..\packages\effects\layouts\src';
|
|
import type { SystemTenantApi } from '#/api/system/tenant';
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
import { useAccess } from '..\packages\effects\access\src';
|
import { AuthenticationLoginExpiredModal, useVbenModal } from '..\packages\effects\common-ui\src';
|
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '..\packages\constants\src';
|
import { isTenantEnable, useTabs, useWatermark } from '..\packages\effects\hooks\src';
|
import {
|
AntdProfileOutlined,
|
BookOpenText,
|
CircleHelp,
|
IconifyIcon,
|
SvgGithubIcon,
|
} from '..\packages\icons\src';
|
import {
|
BasicLayout,
|
Help,
|
LockScreen,
|
Notification,
|
TenantDropdown,
|
UserDropdown,
|
} from '..\packages\effects\layouts\src';
|
import { preferences, usePreferences } from '..\packages\preferences\src';
|
import { useAccessStore, useUserStore } from '..\packages\stores\src';
|
import { formatDateTime, openWindow } from '..\packages\utils\src';
|
|
import { message, Tooltip } from 'ant-design-vue';
|
|
import {
|
getUnreadNotifyMessageCount,
|
getUnreadNotifyMessageList,
|
updateAllNotifyMessageRead,
|
updateNotifyMessageRead,
|
} from '#/api/system/notify/message';
|
import { getSimpleTenantList } from '#/api/system/tenant';
|
import { $t } from '#/locales';
|
import { router } from '#/router';
|
import { useAuthStore } from '#/store';
|
import LoginForm from '#/views/_core/authentication/login.vue';
|
|
const userStore = useUserStore();
|
const authStore = useAuthStore();
|
const accessStore = useAccessStore();
|
const { hasAccessByCodes } = useAccess();
|
const { destroyWatermark, updateWatermark } = useWatermark();
|
const { closeOtherTabs, refreshTab } = useTabs();
|
|
const notifications = ref<NotificationItem[]>([]);
|
const unreadCount = ref(0);
|
const showDot = computed(() => unreadCount.value > 0);
|
|
const [HelpModal, helpModalApi] = useVbenModal({
|
connectedComponent: Help,
|
});
|
const { isDark } = usePreferences();
|
|
const menus = computed(() => [
|
{
|
handler: () => {
|
router.push({ name: 'Profile' });
|
},
|
icon: AntdProfileOutlined,
|
text: $t('ui.widgets.profile'),
|
},
|
{
|
handler: () => {
|
openWindow(VBEN_DOC_URL, {
|
target: '_blank',
|
});
|
},
|
icon: BookOpenText,
|
text: $t('ui.widgets.document'),
|
},
|
{
|
handler: () => {
|
openWindow(VBEN_GITHUB_URL, {
|
target: '_blank',
|
});
|
},
|
icon: SvgGithubIcon,
|
text: 'GitHub',
|
},
|
{
|
handler: () => {
|
helpModalApi.open();
|
},
|
icon: CircleHelp,
|
text: $t('ui.widgets.qa'),
|
},
|
]);
|
|
const avatar = computed(() => {
|
return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
|
});
|
|
async function handleLogout() {
|
await authStore.logout(false);
|
}
|
|
/** 获得未读消息数 */
|
async function handleNotificationGetUnreadCount() {
|
unreadCount.value = await getUnreadNotifyMessageCount();
|
}
|
|
/** 获得消息列表 */
|
async function handleNotificationGetList() {
|
const list = await getUnreadNotifyMessageList();
|
notifications.value = list.map((item) => ({
|
avatar: preferences.app.defaultAvatar,
|
date: formatDateTime(item.createTime) as string,
|
isRead: false,
|
id: item.id,
|
message: item.templateContent,
|
title: item.templateNickname,
|
}));
|
}
|
|
/** 跳转我的站内信 */
|
function handleNotificationViewAll() {
|
router.push({
|
name: 'MyNotifyMessage',
|
});
|
}
|
|
/** 标记所有已读 */
|
async function handleNotificationMakeAll() {
|
await updateAllNotifyMessageRead();
|
unreadCount.value = 0;
|
notifications.value = [];
|
}
|
|
/** 清空通知 */
|
async function handleNotificationClear() {
|
await handleNotificationMakeAll();
|
}
|
|
/** 标记单个已读 */
|
async function handleNotificationRead(item: NotificationItem) {
|
if (!item.id) {
|
return;
|
}
|
await updateNotifyMessageRead([item.id]);
|
await handleNotificationGetUnreadCount();
|
notifications.value = notifications.value.filter((n) => n.id !== item.id);
|
}
|
|
/** 处理通知打开 */
|
function handleNotificationOpen(open: boolean) {
|
if (!open) {
|
return;
|
}
|
handleNotificationGetList();
|
handleNotificationGetUnreadCount();
|
}
|
|
/** 打开 IM 聊天 */
|
function handleOpenImHome() {
|
const { href } = router.resolve({ name: 'ImHome' });
|
window.open(href, '_blank');
|
}
|
|
// 租户列表
|
const tenants = ref<SystemTenantApi.Tenant[]>([]);
|
const tenantEnable = computed(
|
() => hasAccessByCodes(['system:tenant:visit']) && isTenantEnable(),
|
);
|
|
/** 获取租户列表 */
|
async function handleGetTenantList() {
|
if (tenantEnable.value) {
|
tenants.value = await getSimpleTenantList();
|
}
|
}
|
|
/** 处理租户切换 */
|
async function handleTenantChange(tenant: SystemTenantApi.Tenant) {
|
if (!tenant || !tenant.id) {
|
message.error('切换租户失败');
|
return;
|
}
|
// 设置访问租户 ID
|
accessStore.setVisitTenantId(tenant.id as number);
|
// 关闭其他标签页，只保留当前页
|
await closeOtherTabs();
|
// 刷新当前页面
|
await refreshTab();
|
// 提示切换成功
|
message.success(`切换当前租户为: ${tenant.name}`);
|
}
|
|
// ========== 初始化 ==========
|
onMounted(() => {
|
// 首次加载未读数量
|
handleNotificationGetUnreadCount();
|
// 获取租户列表
|
handleGetTenantList();
|
// 轮询刷新未读数量
|
setInterval(
|
() => {
|
if (userStore.userInfo) {
|
handleNotificationGetUnreadCount();
|
}
|
},
|
1000 * 60 * 2,
|
);
|
});
|
|
const handleClick = (item: NotificationItem) => {
|
// 如果通知项有链接，点击时跳转
|
if (item.link) {
|
navigateTo(item.link, item.query, item.state);
|
}
|
};
|
|
function navigateTo(
|
link: string,
|
query?: Record<string, any>,
|
state?: Record<string, any>,
|
) {
|
if (link.startsWith('http://') || link.startsWith('https://')) {
|
// 外部链接，在新标签页打开
|
window.open(link, '_blank');
|
} else {
|
// 内部路由链接，支持 query 参数和 state
|
router.push({
|
path: link,
|
query: query || {},
|
state,
|
});
|
}
|
}
|
|
watch(
|
() => ({
|
enable: preferences.app.watermark,
|
content: preferences.app.watermarkContent,
|
isDark: isDark.value,
|
}),
|
async ({ enable, content, isDark: isDarkValue }) => {
|
if (enable) {
|
const watermarkColor = isDarkValue
|
? 'rgba(255, 255, 255, 0.12)'
|
: 'rgba(0, 0, 0, 0.12)';
|
|
await updateWatermark({
|
advancedStyle: {
|
colorStops: [
|
{
|
color: watermarkColor,
|
offset: 0,
|
},
|
{
|
color: watermarkColor,
|
offset: 1,
|
},
|
],
|
type: 'linear',
|
},
|
content:
|
content ||
|
`${userStore.userInfo?.id} - ${userStore.userInfo?.nickname}`,
|
});
|
} else {
|
destroyWatermark();
|
}
|
},
|
{
|
immediate: true,
|
},
|
);
|
</script>
|
|
<template>
|
<BasicLayout @clear-preferences-and-logout="handleLogout">
|
<template #user-dropdown>
|
<UserDropdown
|
:avatar
|
:menus
|
:text="userStore.userInfo?.nickname"
|
:description="userStore.userInfo?.email"
|
:tag-text="userStore.userInfo?.username"
|
@logout="handleLogout"
|
@clear-preferences-and-logout="handleLogout"
|
/>
|
</template>
|
<template #notification>
|
<Notification
|
:dot="showDot"
|
:notifications="notifications"
|
@clear="handleNotificationClear"
|
@make-all="handleNotificationMakeAll"
|
@view-all="handleNotificationViewAll"
|
@open="handleNotificationOpen"
|
@read="handleNotificationRead"
|
@on-click="handleClick"
|
/>
|
</template>
|
<template #header-right-1>
|
<div v-if="tenantEnable">
|
<TenantDropdown
|
class="mr-2"
|
:tenant-list="tenants"
|
:visit-tenant-id="accessStore.visitTenantId"
|
@success="handleTenantChange"
|
/>
|
</div>
|
</template>
|
<template #header-right-900>
|
<Tooltip title="IM 聊天">
|
<button
|
class="hover:bg-accent hover:text-accent-foreground mr-1 inline-flex size-8 items-center justify-center rounded-md transition-colors"
|
type="button"
|
@click="handleOpenImHome"
|
>
|
<IconifyIcon class="size-4" icon="lucide:message-circle" />
|
</button>
|
</Tooltip>
|
</template>
|
<template #extra>
|
<AuthenticationLoginExpiredModal
|
v-model:open="accessStore.loginExpired"
|
:avatar
|
>
|
<LoginForm />
|
</AuthenticationLoginExpiredModal>
|
</template>
|
<template #lock-screen>
|
<LockScreen :avatar @to-login="handleLogout" />
|
</template>
|
</BasicLayout>
|
<HelpModal />
|
</template>
|
