feat(projects): 1、站内信、通知功能完善；2、项目列表按会议需求重新开发

src/views/workbench/modules/workbench-banner.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import dayjs from 'dayjs';
+import { fetchGetRecentNotices } from '@/service/api';
 import { useAuthStore } from '@/store/modules/auth';
+import { formatRelativeTime } from '@/utils/datetime';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
 import { getGreeting } from '../homepage';
 
 defineOptions({ name: 'WorkbenchBanner' });
 
-interface NoticeRow {
-  id: string;
-  title: string;
-  timeLabel: string;
-}
-
 const authStore = useAuthStore();
 const displayName = computed(() => authStore.userInfo.nickname || authStore.userInfo.userName || '同学');
 const greeting = computed(() => getGreeting());
@@ -26,19 +23,45 @@ const dateContext = computed(() => {
   };
 });
 
-// 公告 mock：banner 阶段本地维护，等公告中心接口落地再迁移至 mock.ts
-const allNotices: NoticeRow[] = [
-  { id: 'n1', title: '【运维】本周六 02:00-04:00 数据库主从切换', timeLabel: '2 天前' },
-  { id: 'n2', title: '【HR】Q2 OKR 复盘截止 06-05', timeLabel: '3 天前' },
-  { id: 'n3', title: '【流程】工单 SLA 新规则即将上线', timeLabel: '1 周前' },
-  { id: 'n4', title: '【系统】新版本 25.06 发布日程公告', timeLabel: '2 周前' },
-  { id: 'n5', title: '【行政】6 月端午节放假安排', timeLabel: '3 周前' },
-  { id: 'n6', title: '【安全】禁止使用未受控外部 AI 工具处理客户数据', timeLabel: '1 个月前' }
-];
+// 「全部公告」抽屉无独立菜单/权限码，只能走登录即可的 recent 接口，取最新 50 条兜底
+const NOTICE_FETCH_SIZE = 50;
 
-const previewNotices = computed(() => allNotices.slice(0, 3));
+const allNotices = ref<Api.Notice.Notice[]>([]);
+const noticesLoading = ref(false);
+
+async function loadNotices() {
+  noticesLoading.value = true;
+  const { data, error } = await fetchGetRecentNotices(NOTICE_FETCH_SIZE);
+  noticesLoading.value = false;
+  if (error || !data) return;
+  allNotices.value = data;
+}
+
+onMounted(loadNotices);
+
+const previewNotices = computed(() => allNotices.value.slice(0, 3));
 const drawerOpen = ref(false);
 
+const detailOpen = ref(false);
+const detailNotice = ref<Api.Notice.Notice | null>(null);
+
+function openNoticeDetail(row: Api.Notice.Notice) {
+  detailNotice.value = row;
+  detailOpen.value = true;
+}
+
+// 公告内容可能为富文本，列表行只取纯文本做单行预览
+function toNoticeSnippet(html: string) {
+  return html
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+const detailTimeLabel = computed(() =>
+  detailNotice.value ? dayjs(detailNotice.value.createTime).format('YYYY-MM-DD HH:mm') : ''
+);
+
 function openDrawer() {
   drawerOpen.value = true;
 }
@@ -71,27 +94,58 @@ function closeDrawer() {
           <SvgIcon icon="mdi:arrow-right" />
         </button>
       </header>
-      <ul class="workbench-banner__notice-list">
-        <li v-for="row in previewNotices" :key="row.id" class="workbench-banner__notice-row">
-          <span class="workbench-banner__notice-row-title">{{ row.title }}</span>
-          <span class="workbench-banner__notice-row-time">{{ row.timeLabel }}</span>
+      <ul v-if="previewNotices.length > 0" class="workbench-banner__notice-list">
+        <li
+          v-for="row in previewNotices"
+          :key="row.id"
+          class="workbench-banner__notice-row"
+          @click="openNoticeDetail(row)"
+        >
+          <div class="workbench-banner__notice-row-main">
+            <span class="workbench-banner__notice-row-title">{{ row.title }}</span>
+            <span class="workbench-banner__notice-row-time">{{ formatRelativeTime(row.createTime) }}</span>
+          </div>
+          <div v-if="row.content" class="workbench-banner__notice-row-snippet">{{ toNoticeSnippet(row.content) }}</div>
         </li>
       </ul>
+      <div v-else class="workbench-banner__notice-empty">
+        {{ noticesLoading ? '加载中…' : '暂无公告' }}
+      </div>
     </div>
 
     <ElDrawer v-model="drawerOpen" title="全部公告" size="480px">
       <ElScrollbar>
-        <ul class="workbench-banner__drawer-list">
-          <li v-for="row in allNotices" :key="row.id" class="workbench-banner__drawer-row">
+        <ul v-if="allNotices.length > 0" class="workbench-banner__drawer-list">
+          <li
+            v-for="row in allNotices"
+            :key="row.id"
+            class="workbench-banner__drawer-row"
+            @click="openNoticeDetail(row)"
+          >
             <div class="workbench-banner__drawer-row-title">{{ row.title }}</div>
-            <div class="workbench-banner__drawer-row-time">{{ row.timeLabel }}</div>
+            <div v-if="row.content" class="workbench-banner__drawer-row-snippet">
+              {{ toNoticeSnippet(row.content) }}
+            </div>
+            <div class="workbench-banner__drawer-row-time">{{ formatRelativeTime(row.createTime) }}</div>
           </li>
         </ul>
+        <div v-else class="workbench-banner__notice-empty">暂无公告</div>
       </ElScrollbar>
       <template #footer>
         <ElButton @click="closeDrawer">关闭</ElButton>
       </template>
     </ElDrawer>
+
+    <BusinessFormDialog v-model="detailOpen" title="公告详情" width="560px">
+      <template v-if="detailNotice">
+        <h3 class="workbench-banner__detail-title">{{ detailNotice.title }}</h3>
+        <p class="workbench-banner__detail-time">{{ detailTimeLabel }}</p>
+        <BusinessRichTextView :value="detailNotice.content" />
+      </template>
+      <template #footer="{ close }">
+        <ElButton @click="close">关闭</ElButton>
+      </template>
+    </BusinessFormDialog>
   </section>
 </template>
 
@@ -209,7 +263,9 @@ function closeDrawer() {
   margin: 0;
   padding: 0;
   list-style: none;
-  max-height: 108px;
+  max-height: 156px;
+  /* 行项负 margin 出血会把 overflow-x 撑出横向滚动条，显式裁掉 */
+  overflow-x: hidden;
   overflow-y: auto;
 }
 
@@ -223,25 +279,40 @@ function closeDrawer() {
 }
 
 .workbench-banner__notice-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: baseline;
-  gap: 12px;
-  padding: 6px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  margin: 0 -6px;
+  border-radius: 8px;
   border-bottom: 1px dashed rgb(226 232 240 / 70%);
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.workbench-banner__notice-row:hover {
+  background-color: rgb(241 245 249 / 80%);
 }
 
 .workbench-banner__notice-row:last-child {
   border-bottom: none;
 }
 
+.workbench-banner__notice-row-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 12px;
+}
+
 .workbench-banner__notice-row-title {
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: rgb(30 41 59 / 96%);
-  font-size: 13px;
+  color: rgb(15 23 42 / 96%);
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .workbench-banner__notice-row-time {
@@ -250,15 +321,39 @@ function closeDrawer() {
   white-space: nowrap;
 }
 
+.workbench-banner__notice-row-snippet {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: rgb(100 116 139 / 92%);
+  font-size: 12px;
+}
+
+.workbench-banner__notice-empty {
+  padding: 16px 0;
+  color: rgb(100 116 139 / 92%);
+  font-size: 13px;
+}
+
 .workbench-banner__drawer-list {
   margin: 0;
   padding: 0 4px 0 0;
   list-style: none;
+  /* 同款负 margin 出血，裁掉横向溢出，避免传到 ElScrollbar */
+  overflow: hidden;
 }
 
 .workbench-banner__drawer-row {
-  padding: 12px 0;
+  padding: 12px 8px;
+  margin: 0 -8px;
+  border-radius: 8px;
   border-bottom: 1px solid rgb(226 232 240 / 80%);
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.workbench-banner__drawer-row:hover {
+  background-color: rgb(241 245 249 / 80%);
 }
 
 .workbench-banner__drawer-row:last-child {
@@ -267,16 +362,40 @@ function closeDrawer() {
 
 .workbench-banner__drawer-row-title {
   color: rgb(15 23 42 / 96%);
-  font-size: 14px;
+  font-size: 15px;
+  font-weight: 500;
   line-height: 1.5;
 }
 
+.workbench-banner__drawer-row-snippet {
+  margin-top: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: rgb(71 85 105 / 92%);
+  font-size: 13px;
+}
+
 .workbench-banner__drawer-row-time {
   margin-top: 4px;
   color: rgb(100 116 139 / 92%);
   font-size: 12px;
 }
 
+.workbench-banner__detail-title {
+  margin: 0;
+  color: rgb(15 23 42 / 98%);
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.workbench-banner__detail-time {
+  margin: 6px 0 14px;
+  color: rgb(100 116 139 / 92%);
+  font-size: 12px;
+}
+
 @media (width <= 1024px) {
   .workbench-banner {
     grid-template-columns: 1fr;