From 4e1d842e7fba9235d872628d8acdbd2a07f2774b Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 14 May 2025 16:57:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20ele=20infra=20?=
 =?UTF-8?q?=E6=88=91=E7=9A=84=E7=AB=99=E5=86=85=E4=BF=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-ele/src/layouts/basic.vue            | 163 ++++++++++++------
 apps/web-ele/src/layouts/components/help.vue  |  91 ++++++++++
 .../layouts/components/tenant-dropdown.vue    |  66 +++++++
 .../src/router/routes/modules/system.ts       |  16 ++
 4 files changed, 287 insertions(+), 49 deletions(-)
 create mode 100644 apps/web-ele/src/layouts/components/help.vue
 create mode 100644 apps/web-ele/src/layouts/components/tenant-dropdown.vue
 create mode 100644 apps/web-ele/src/router/routes/modules/system.ts

diff --git a/apps/web-ele/src/layouts/basic.vue b/apps/web-ele/src/layouts/basic.vue
index 1481dc5a..2777f4a3 100644
--- a/apps/web-ele/src/layouts/basic.vue
+++ b/apps/web-ele/src/layouts/basic.vue
@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
-import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
+import { AuthenticationLoginExpiredModal, useVbenModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { useWatermark } from '@vben/hooks';
-import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
+import {
+  AntdProfileOutlined,
+  BookOpenText,
+  CircleHelp,
+  MdiGithub,
+} from '@vben/icons';
 import {
   BasicLayout,
   LockScreen,
@@ -15,52 +20,43 @@ import {
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
-import { openWindow } from '@vben/utils';
+import { formatDateTime, openWindow } from '@vben/utils';
 
+import {
+  getUnreadNotifyMessageCount,
+  getUnreadNotifyMessageList,
+  updateAllNotifyMessageRead,
+  updateNotifyMessageRead,
+} from '#/api/system/notify/message';
 import { $t } from '#/locales';
+import { router } from '#/router';
 import { useAuthStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
-const notifications = ref<NotificationItem[]>([
-  {
-    avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
-    date: '3小时前',
-    isRead: true,
-    message: '描述信息描述信息描述信息',
-    title: '收到了 14 份新周报',
-  },
-  {
-    avatar: 'https://avatar.vercel.sh/1',
-    date: '刚刚',
-    isRead: false,
-    message: '描述信息描述信息描述信息',
-    title: '朱偏右 回复了你',
-  },
-  {
-    avatar: 'https://avatar.vercel.sh/1',
-    date: '2024-01-01',
-    isRead: false,
-    message: '描述信息描述信息描述信息',
-    title: '曲丽丽 评论了你',
-  },
-  {
-    avatar: 'https://avatar.vercel.sh/satori',
-    date: '1天前',
-    isRead: false,
-    message: '描述信息描述信息描述信息',
-    title: '代办提醒',
-  },
-]);
+import Help from './components/help.vue';
+import TenantDropdown from './components/tenant-dropdown.vue';
 
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
 const { destroyWatermark, updateWatermark } = useWatermark();
-const showDot = computed(() =>
-  notifications.value.some((item) => !item.isRead),
-);
+
+const notifications = ref<NotificationItem[]>([]);
+const unreadCount = ref(0);
+const showDot = computed(() => unreadCount.value > 0);
+
+const [HelpModal, helpModalApi] = useVbenModal({
+  connectedComponent: Help,
+});
 
 const menus = computed(() => [
+  {
+    handler: () => {
+      router.push({ name: 'Profile' });
+    },
+    icon: AntdProfileOutlined,
+    text: $t('ui.widgets.profile'),
+  },
   {
     handler: () => {
       openWindow(VBEN_DOC_URL, {
@@ -81,9 +77,7 @@ const menus = computed(() => [
   },
   {
     handler: () => {
-      openWindow(`${VBEN_GITHUB_URL}/issues`, {
-        target: '_blank',
-      });
+      helpModalApi.open();
     },
     icon: CircleHelp,
     text: $t('ui.widgets.qa'),
@@ -98,19 +92,83 @@ async function handleLogout() {
   await authStore.logout(false);
 }
 
-function handleNoticeClear() {
+/** 获得未读消息数 */
+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 = [];
 }
 
-function handleMakeAll() {
-  notifications.value.forEach((item) => (item.isRead = true));
+/** 清空通知 */
+async function handleNotificationClear() {
+  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();
+}
+
+// ========== 初始化 ==========
+onMounted(() => {
+  // 首次加载未读数量
+  handleNotificationGetUnreadCount();
+  // 轮询刷新未读数量
+  setInterval(
+    () => {
+      if (userStore.userInfo) {
+        handleNotificationGetUnreadCount();
+      }
+    },
+    1000 * 60 * 2,
+  );
+});
+
 watch(
   () => preferences.app.watermark,
   async (enable) => {
     if (enable) {
       await updateWatermark({
-        content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
+        content: `${userStore.userInfo?.id} - ${userStore.userInfo?.nickname}`,
       });
     } else {
       destroyWatermark();
@@ -128,9 +186,9 @@ watch(
       <UserDropdown
         :avatar
         :menus
-        :text="userStore.userInfo?.realName"
-        description="ann.vben@gmail.com"
-        tag-text="Pro"
+        :text="userStore.userInfo?.nickname"
+        :description="userStore.userInfo?.email"
+        :tag-text="userStore.userInfo?.username"
         @logout="handleLogout"
       />
     </template>
@@ -138,10 +196,16 @@ watch(
       <Notification
         :dot="showDot"
         :notifications="notifications"
-        @clear="handleNoticeClear"
-        @make-all="handleMakeAll"
+        @clear="handleNotificationClear"
+        @make-all="handleNotificationMakeAll"
+        @view-all="handleNotificationViewAll"
+        @open="handleNotificationOpen"
+        @read="handleNotificationRead"
       />
     </template>
+    <template #header-right-1>
+      <TenantDropdown class="w-30 mr-2" />
+    </template>
     <template #extra>
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"
@@ -154,4 +218,5 @@ watch(
       <LockScreen :avatar @to-login="handleLogout" />
     </template>
   </BasicLayout>
+  <HelpModal />
 </template>
diff --git a/apps/web-ele/src/layouts/components/help.vue b/apps/web-ele/src/layouts/components/help.vue
new file mode 100644
index 00000000..fe0d9b83
--- /dev/null
+++ b/apps/web-ele/src/layouts/components/help.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+// TODO @xingyu：这个有可能 3 端复用么？想着是把 layouts 下的 components 没有这个目录哈；
+import { useVbenModal, VbenButton, VbenButtonGroup } from '@vben/common-ui';
+import { openWindow } from '@vben/utils';
+
+import { ElImage, ElTag } from 'element-plus';
+
+import { $t } from '#/locales';
+
+const [Modal, modalApi] = useVbenModal({
+  draggable: true,
+  overlayBlur: 5,
+  footer: false,
+  onCancel() {
+    modalApi.close();
+  },
+});
+</script>
+<template>
+  <Modal class="w-[40%]" :title="$t('ui.widgets.qa')">
+    <div class="mt-2 flex flex-col">
+      <div class="mt-2 flex flex-row">
+        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
+          <p class="p-2">项目地址:</p>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow('https://gitee.com/yudaocode/yudao-ui-admin-vben')
+            "
+          >
+            Gitee
+          </VbenButton>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow('https://github.com/yudaocode/yudao-ui-admin-vben')
+            "
+          >
+            Github
+          </VbenButton>
+        </VbenButtonGroup>
+
+        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
+          <p class="p-2">issues:</p>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow(
+                'https://gitee.com/yudaocode/yudao-ui-admin-vben/issues',
+              )
+            "
+          >
+            Gitee
+          </VbenButton>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow(
+                'https://github.com/yudaocode/yudao-ui-admin-vben/issues',
+              )
+            "
+          >
+            Github
+          </VbenButton>
+        </VbenButtonGroup>
+
+        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
+          <p class="p-2">开发文档:</p>
+          <VbenButton
+            variant="link"
+            @click="openWindow('https://doc.iocoder.cn/quick-start/')"
+          >
+            项目文档
+          </VbenButton>
+          <VbenButton variant="link" @click="openWindow('https://antdv.com/')">
+            antdv 文档
+          </VbenButton>
+        </VbenButtonGroup>
+      </div>
+      <p class="mt-2 flex justify-center">
+        <span>
+          <ElImage src="/wx-xingyu.png" alt="数舵科技" />
+        </span>
+      </p>
+      <p class="mt-2 flex justify-center pt-4 text-sm italic">
+        本项目采用<ElTag type="primary">MIT</ElTag>开源协议，个人与企业可100%
+        免费使用。
+      </p>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/layouts/components/tenant-dropdown.vue b/apps/web-ele/src/layouts/components/tenant-dropdown.vue
new file mode 100644
index 00000000..87122d1d
--- /dev/null
+++ b/apps/web-ele/src/layouts/components/tenant-dropdown.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { SystemTenantApi } from '#/api/system/tenant';
+
+import { onMounted, ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { isTenantEnable, useTabs } from '@vben/hooks';
+import { useAccessStore } from '@vben/stores';
+
+import { ElMessage, ElOption, ElSelect } from 'element-plus';
+
+import { getSimpleTenantList } from '#/api/system/tenant';
+import { $t } from '#/locales';
+
+const { closeOtherTabs, refreshTab } = useTabs();
+
+const { hasAccessByCodes } = useAccess();
+const accessStore = useAccessStore();
+
+const tenantEnable = isTenantEnable();
+
+const value = ref<number>(accessStore.visitTenantId ?? 0); // 当前访问的租户 ID
+const tenants = ref<SystemTenantApi.Tenant[]>([]); // 租户列表
+
+// TODO @xingyu：这个有可能 3 端复用么？
+async function handleChange(id: number) {
+  if (id === null) return;
+
+  // 设置访问租户 ID
+  accessStore.setVisitTenantId(id);
+  // 关闭其他标签页，只保留当前页
+  await closeOtherTabs();
+  // 刷新当前页面
+  await refreshTab();
+  // 提示切换成功
+  const tenant = tenants.value.find((item) => item.id === id);
+  if (tenant) {
+    ElMessage.success(`切换当前租户为: ${tenant.name}`);
+  }
+}
+
+onMounted(async () => {
+  if (!tenantEnable) {
+    return;
+  }
+  tenants.value = await getSimpleTenantList();
+});
+</script>
+<template>
+  <div v-if="tenantEnable && hasAccessByCodes(['system:tenant:visit'])">
+    <ElSelect
+      v-model="value"
+      :placeholder="$t('page.tenant.placeholder')"
+      clearable
+      class="w-40"
+      @change="handleChange"
+    >
+      <ElOption
+        v-for="item in tenants"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id || 0"
+      />
+    </ElSelect>
+  </div>
+</template>
diff --git a/apps/web-ele/src/router/routes/modules/system.ts b/apps/web-ele/src/router/routes/modules/system.ts
new file mode 100644
index 00000000..47e6b168
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/system.ts
@@ -0,0 +1,16 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/system/notify-message',
+    component: () => import('#/views/system/notify/my/index.vue'),
+    name: 'MyNotifyMessage',
+    meta: {
+      title: '我的站内信',
+      icon: 'ant-design:message-filled',
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;