chore: trim optional shell widgets
This commit is contained in:
@@ -1,11 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import type {
|
||||
AnnouncementItem,
|
||||
NotificationItem,
|
||||
} from '#/composables/useNotification';
|
||||
import type { WatchStopHandle } from 'vue';
|
||||
|
||||
import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue';
|
||||
import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||
|
||||
import { useWatermark } from '@vben/hooks';
|
||||
import { BasicLayout } from '@vben/layouts';
|
||||
@@ -27,100 +21,12 @@ const UserDropdown = defineAsyncComponent(() =>
|
||||
(module) => module.UserDropdown,
|
||||
),
|
||||
);
|
||||
const LockScreen = defineAsyncComponent(() =>
|
||||
import('@vben/layouts/es/lock-screen').then((module) => module.LockScreen),
|
||||
);
|
||||
const NotificationPopup = defineAsyncComponent(
|
||||
() => import('#/components/notification/NotificationPopup.vue'),
|
||||
);
|
||||
|
||||
const notifications = ref<NotificationItem[]>([]);
|
||||
const messageUnreadCount = ref(0);
|
||||
const announcements = ref<AnnouncementItem[]>([]);
|
||||
const announcementUnreadCount = ref(0);
|
||||
const activeTab = ref<'announcement' | 'message'>('message');
|
||||
const showDot = computed(
|
||||
() => messageUnreadCount.value + announcementUnreadCount.value > 0,
|
||||
);
|
||||
|
||||
const userStore = useUserStore();
|
||||
const authStore = useAuthStore();
|
||||
const accessStore = useAccessStore();
|
||||
const { destroyWatermark, updateWatermark } = useWatermark();
|
||||
|
||||
// 初始化消息通知
|
||||
let notificationApi: any = null;
|
||||
let layoutActive = true;
|
||||
let realtimeInitializing: Promise<void> | null = null;
|
||||
let realtimeInitialized = false;
|
||||
let stopRealtimeWatches: WatchStopHandle[] = [];
|
||||
|
||||
onUnmounted(() => {
|
||||
layoutActive = false;
|
||||
stopRealtimeWatches.forEach((stop) => stop());
|
||||
stopRealtimeWatches = [];
|
||||
notificationApi?.cleanup();
|
||||
});
|
||||
|
||||
async function initRealtimeFeatures() {
|
||||
if (realtimeInitialized) return;
|
||||
if (realtimeInitializing) return realtimeInitializing;
|
||||
|
||||
realtimeInitializing = doInitRealtimeFeatures().finally(() => {
|
||||
realtimeInitializing = null;
|
||||
});
|
||||
await realtimeInitializing;
|
||||
}
|
||||
|
||||
async function doInitRealtimeFeatures() {
|
||||
const notificationModule = await import('#/composables/useNotification');
|
||||
|
||||
if (!layoutActive) return;
|
||||
|
||||
notificationApi = notificationModule.useNotification();
|
||||
|
||||
stopRealtimeWatches = [
|
||||
watch(
|
||||
notificationApi.notifications,
|
||||
(value) => {
|
||||
notifications.value = value;
|
||||
},
|
||||
{ immediate: true },
|
||||
),
|
||||
watch(
|
||||
notificationApi.messageUnreadCount,
|
||||
(value) => {
|
||||
messageUnreadCount.value = value;
|
||||
},
|
||||
{ immediate: true },
|
||||
),
|
||||
watch(
|
||||
notificationApi.announcements,
|
||||
(value) => {
|
||||
announcements.value = value;
|
||||
},
|
||||
{ immediate: true },
|
||||
),
|
||||
watch(
|
||||
notificationApi.announcementUnreadCount,
|
||||
(value) => {
|
||||
announcementUnreadCount.value = value;
|
||||
},
|
||||
{ immediate: true },
|
||||
),
|
||||
watch(
|
||||
notificationApi.activeTab,
|
||||
(value) => {
|
||||
activeTab.value = value === 'announcement' ? value : 'message';
|
||||
},
|
||||
{ immediate: true },
|
||||
),
|
||||
];
|
||||
|
||||
notificationApi.init();
|
||||
realtimeInitialized = true;
|
||||
}
|
||||
|
||||
const menus = computed(() => [
|
||||
// {
|
||||
// handler: () => {
|
||||
@@ -176,37 +82,6 @@ async function handleLogout() {
|
||||
await authStore.logout(false);
|
||||
}
|
||||
|
||||
function handleNoticeClear() {
|
||||
notificationApi?.clearReadMessages();
|
||||
}
|
||||
|
||||
function handleMakeAll() {
|
||||
notificationApi?.markAllAsRead();
|
||||
}
|
||||
|
||||
function handleNoticeRead(item: any) {
|
||||
notificationApi?.markAsRead(item);
|
||||
}
|
||||
|
||||
function handleAnnouncementRead(item: any) {
|
||||
notificationApi?.markAnnouncementAsRead(item);
|
||||
}
|
||||
|
||||
function handleViewAll() {
|
||||
notificationApi?.viewAllMessages();
|
||||
}
|
||||
|
||||
function handleTabChange(tab: 'announcement' | 'message') {
|
||||
activeTab.value = tab;
|
||||
if (notificationApi) {
|
||||
notificationApi.activeTab.value = tab;
|
||||
}
|
||||
}
|
||||
|
||||
function handleNotificationOpen() {
|
||||
void initRealtimeFeatures();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => ({
|
||||
enable: preferences.app.watermark,
|
||||
@@ -243,23 +118,6 @@ watch(
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
</template>
|
||||
<template #notification>
|
||||
<NotificationPopup
|
||||
:dot="showDot"
|
||||
:notifications="notifications"
|
||||
:message-unread-count="messageUnreadCount"
|
||||
:announcements="announcements"
|
||||
:announcement-unread-count="announcementUnreadCount"
|
||||
:active-tab="activeTab"
|
||||
@clear="handleNoticeClear"
|
||||
@make-all="handleMakeAll"
|
||||
@open="handleNotificationOpen"
|
||||
@read-message="handleNoticeRead"
|
||||
@read-announcement="handleAnnouncementRead"
|
||||
@view-all="handleViewAll"
|
||||
@update:active-tab="handleTabChange"
|
||||
/>
|
||||
</template>
|
||||
<template #sidebar-footer="sidebarFooterProps">
|
||||
<button
|
||||
type="button"
|
||||
@@ -289,8 +147,5 @@ watch(
|
||||
<LoginForm />
|
||||
</AuthenticationLoginExpiredModal>
|
||||
</template>
|
||||
<template #lock-screen>
|
||||
<LockScreen :avatar @to-login="handleLogout" />
|
||||
</template>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user