ai-agent-admin/web/apps/web-ele/src/layouts/basic.vue

<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 { useWatermark } from '@vben/hooks';
import { BasicLayout } from '@vben/layouts';
import { $t } from '@vben/locales';
import { preferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores';

import { getFileUrl } from '#/composables/useFileUrl';
import { useAuthStore } from '#/store';

const LoginForm = defineAsyncComponent(
  () => import('#/views/_core/authentication/login.vue'),
);
const AuthenticationLoginExpiredModal = defineAsyncComponent(
  () => import('@vben/common-ui/es/login-expired-modal'),
);
const UserDropdown = defineAsyncComponent(() =>
  import('@vben/layouts/es/user-dropdown').then(
    (module) => module.UserDropdown,
  ),
);
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: () => {
  //     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: () => {
  //     openWindow(`${VBEN_GITHUB_URL}/issues`, {
  //       target: '_blank',
  //     });
  //   },
  //   icon: CircleHelp,
  //   text: $t('ui.widgets.qa'),
  // },
]);

/** 双列仅第一列窄条展示时的短文案 */
const PRODUCT_BRAND_SHORT = 'AI Agent';

// 头像URL（响应式）
const avatar = ref('');

// 异步加载头像URL
async function loadAvatarUrl() {
  const avatarPath = userStore.userInfo?.avatar;
  avatar.value = avatarPath ? await getFileUrl(avatarPath) : '';
}

// 监听用户信息变化，加载头像URL
watch(
  () => userStore.userInfo?.avatar,
  () => {
    loadAvatarUrl();
  },
  { immediate: true },
);

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,
    content: preferences.app.watermarkContent,
  }),
  async ({ enable, content }) => {
    if (enable) {
      await updateWatermark({
        content:
          content ||
          `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
      });
    } else {
      destroyWatermark();
    }
  },
  {
    immediate: true,
  },
);
</script>

<template>
  <BasicLayout>
    <template #user-dropdown>
      <UserDropdown
        :avatar
        :menus
        :text="userStore.userInfo?.realName"
        :description="
          userStore.userInfo?.email || userStore.userInfo?.username || ''
        "
        tag-text="Pro"
        @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"
        class="text-muted-foreground hover:text-foreground max-w-full px-1 py-0.5 text-center text-[11px] leading-tight transition-colors"
        :title="
          sidebarFooterProps?.compact
            ? PRODUCT_BRAND_SHORT
            : $t('ui.layout.poweredBy')
        "
      >
        <span
          v-show="sidebarFooterProps?.compact || !preferences.sidebar.collapsed"
          class="truncate"
          >{{
            sidebarFooterProps?.compact
              ? PRODUCT_BRAND_SHORT
              : $t('ui.layout.poweredBy')
          }}</span
        >
      </button>
    </template>
    <template #extra>
      <AuthenticationLoginExpiredModal
        v-model:open="accessStore.loginExpired"
        :avatar
      >
        <LoginForm />
      </AuthenticationLoginExpiredModal>
    </template>
  </BasicLayout>
</template>