fix: 完成: 诊所设置中心,消息中心

apps/web-antd/src/layouts/basic.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, ref, watch } from 'vue';
+import {computed, onUnmounted, ref, watch} from 'vue';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 
@@ -19,41 +19,170 @@ import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 // import { openWindow } from '@vben/utils';
 
+import {
+  Bell,
+  CalendarClock,
+  Megaphone,
+} from 'lucide-vue-next';
+
 // import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
+import { useRouter } from 'vue-router';
+import {getNoticeListApi, readAllApi} from "#/views/notice/api";
+import {formatTimeToRelative} from "#/util/tool";
+import {notification} from "ant-design-vue";
 
-const notifications = ref<NotificationItem[]>([
-  // TODO 通知列表
-  // {
-  //   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: '代办提醒',
-  // },
-]);
+const router = useRouter();
+
+// 样式相关
+const typeIcons = {
+  0: Megaphone,
+  1: Bell,
+  2: CalendarClock,
+};
+
+const typeColors = {
+  0: 'text-sky-500',
+  1: 'text-amber-500',
+  2: 'text-emerald-500',
+};
+
+const typeBgColors = {
+  0: 'bg-sky-50',
+  1: 'bg-amber-50',
+  2: 'bg-emerald-50',
+};
+
+const typeBorderColors = {
+  0: 'border-sky-200',
+  1: 'border-amber-200',
+  2: 'border-emerald-200',
+};
+
+// const notifications = ref<NotificationItem[]>([
+//   // TODO 通知列表
+//   {
+//     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: '代办提醒',
+//   },
+// ]);
+const notifications = ref<NotificationItem[]>([]);
+
+// 获取消息列表数据
+const getNoticeList = async () => {
+  try {
+    const res = await getNoticeListApi({
+      status: 0,
+    });
+    notifications.value = res.items.map(item => ({
+      id: item.id,
+      icon: typeIcons[item.type],
+      // 将API返回的数据映射到组件需要的格式
+      message: item.title,
+      title: getMessageTypeName(item.type),
+      date: formatTimeToRelative(item.created_at),
+      color: typeColors[item.type],
+      isRead: item.status
+    }));
+  } catch (error) {
+    console.error('获取消息列表失败:', error);
+  } finally {
+  }
+};
+getNoticeList();
+// 每隔十秒刷新一次
+let intervalId = setInterval(getNoticeList, 10_000);
+
+// 封装定时器重启逻辑
+const restartInterval = () => {
+  clearInterval(intervalId);
+  getNoticeList(); // 立即获取最新数据
+  intervalId = setInterval(getNoticeList, 10_000);
+};
+
+// 处理跨标签页修改
+const handleStorageChange = (event) => {
+  if (event.key === 'readStatus') {
+    restartInterval();
+  }
+};
+
+// 处理当前标签页修改（核心新增部分）
+const handleLocalChange = () => {
+  restartInterval();
+};
+
+// 添加双重监听
+window.addEventListener('storage', handleStorageChange); // 跨标签页监听
+const originalSetItem = localStorage.setItem.bind(localStorage);
+
+// 拦截当前页的 localStorage.setItem 操作
+localStorage.setItem = (key, value) => {
+  originalSetItem(key, value);
+  if (key === 'readStatus') {
+    handleLocalChange(); // 手动触发当前页回调
+  }
+};
+
+// 组件卸载时清理
+onUnmounted(() => {
+  clearInterval(intervalId);
+  window.removeEventListener('storage', handleStorageChange);
+  localStorage.setItem = originalSetItem; // 恢复原始方法
+});
+
+// 消息类型定义
+const messageTypes = [
+  { id: -1, name: '全部消息' },
+  { id: 0, name: '系统公告', icon: Megaphone },
+  { id: 1, name: '系统通知', icon: Bell },
+  { id: 2, name: '周报提醒', icon: CalendarClock },
+];
+// 根据类型ID获取类型名称
+const getMessageTypeName = (typeId) => {
+  const type = messageTypes.find(t => t.id === typeId);
+  return type ? type.name : '未知类型';
+};
+const goNoticeList = () => {
+  // TODO 跳转通知列表
+  router.push('/notice/list');
+};
+
+// 处理消息点击
+const handleItemClick = (item) => {
+  notifications.value.forEach((value) => {
+    if (value.id === item.id) {
+      // 删除这个对象
+      value.status = 1;
+    }
+  });
+  router.push(`/notice/detail/${item.id}`);
+};
 
 const userStore = useUserStore();
 const authStore = useAuthStore();
@@ -111,7 +240,14 @@ async function handleLogout() {
 }
 
 function handleNoticeClear() {
-  notifications.value = [];
+  readAllApi().then(() => {
+    notifications.value = [];
+    // 成功后可以重新获取数据或者直接更新本地状态
+    notification.success({
+      message: '标记成功',
+      duration: 2,
+    });
+  });
 }
 
 function handleMakeAll() {
@@ -154,6 +290,8 @@ watch(
         :notifications="notifications"
         @clear="handleNoticeClear"
         @make-all="handleMakeAll"
+        @read="handleItemClick"
+        @view-all="goNoticeList"
       />
     </template>
     <template #extra>
@@ -167,6 +305,5 @@ watch(
     <template #lock-screen>
       <LockScreen :avatar @to-login="handleLogout" />
     </template>
-    <UpdatePasswordModals />
   </BasicLayout>
 </template>