chore: trim optional shell widgets
This commit is contained in:
@@ -1,11 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type {
|
import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||||
AnnouncementItem,
|
|
||||||
NotificationItem,
|
|
||||||
} from '#/composables/useNotification';
|
|
||||||
import type { WatchStopHandle } from 'vue';
|
|
||||||
|
|
||||||
import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue';
|
|
||||||
|
|
||||||
import { useWatermark } from '@vben/hooks';
|
import { useWatermark } from '@vben/hooks';
|
||||||
import { BasicLayout } from '@vben/layouts';
|
import { BasicLayout } from '@vben/layouts';
|
||||||
@@ -27,100 +21,12 @@ const UserDropdown = defineAsyncComponent(() =>
|
|||||||
(module) => module.UserDropdown,
|
(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 userStore = useUserStore();
|
||||||
const authStore = useAuthStore();
|
const authStore = useAuthStore();
|
||||||
const accessStore = useAccessStore();
|
const accessStore = useAccessStore();
|
||||||
const { destroyWatermark, updateWatermark } = useWatermark();
|
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(() => [
|
const menus = computed(() => [
|
||||||
// {
|
// {
|
||||||
// handler: () => {
|
// handler: () => {
|
||||||
@@ -176,37 +82,6 @@ async function handleLogout() {
|
|||||||
await authStore.logout(false);
|
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(
|
watch(
|
||||||
() => ({
|
() => ({
|
||||||
enable: preferences.app.watermark,
|
enable: preferences.app.watermark,
|
||||||
@@ -243,23 +118,6 @@ watch(
|
|||||||
@logout="handleLogout"
|
@logout="handleLogout"
|
||||||
/>
|
/>
|
||||||
</template>
|
</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">
|
<template #sidebar-footer="sidebarFooterProps">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -289,8 +147,5 @@ watch(
|
|||||||
<LoginForm />
|
<LoginForm />
|
||||||
</AuthenticationLoginExpiredModal>
|
</AuthenticationLoginExpiredModal>
|
||||||
</template>
|
</template>
|
||||||
<template #lock-screen>
|
|
||||||
<LockScreen :avatar @to-login="handleLogout" />
|
|
||||||
</template>
|
|
||||||
</BasicLayout>
|
</BasicLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user