feat: 新增弹窗公告

src/apis/system/user-message.ts

@@ -35,6 +35,11 @@ export function getUnreadNoticeCount() {
   return http.get(`${BASE_URL}/notice/unread`)
 }
 
+/** @desc 查询未读公告 ID 列表 */
+export function getUnreadNoticeIds(method: string) {
+  return http.get<number[]>(`${BASE_URL}/notice/unread/${method}`)
+}
+
 /** @desc 分页查询用户公告 */
 export function listUserNotice(query: T.NoticePageQuery) {
   return http.get<PageRes<T.NoticeResp[]>>(`${BASE_URL}/notice`, query)

src/layout/LayoutDefault.vue

@@ -7,21 +7,46 @@
       <Main></Main>
       <GiFooter v-if="appStore.copyrightDisplay" />
     </a-layout>
+
+    <!-- 公告弹窗 -->
+    <NoticePopup ref="noticePopupRef" />
   </a-layout>
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue'
 import Asider from './components/Asider/index.vue'
 import Header from './components/Header/index.vue'
 import Main from './components/Main.vue'
 import Tabs from './components/Tabs/index.vue'
 import GiFooter from '@/components/GiFooter/index.vue'
+import NoticePopup from '@/views/user/message/components/NoticePopup.vue'
 import { useAppStore } from '@/stores'
 import { useDevice } from '@/hooks'
+import { getToken } from '@/utils/auth'
 
 defineOptions({ name: 'LayoutDefault' })
 const appStore = useAppStore()
 const { isMobile } = useDevice()
+
+// 公告弹窗引用
+const noticePopupRef = ref<InstanceType<typeof NoticePopup>>()
+
+// 检查并显示未读公告
+const checkAndShowNotices = () => {
+  const token = getToken()
+
+  // 如果有token，检查未读公告
+  if (token) {
+    setTimeout(() => {
+      noticePopupRef.value?.open()
+    }, 1000) // 延迟1秒显示，让页面先加载完成
+  }
+}
+
+onMounted(() => {
+  checkAndShowNotices()
+})
 </script>
 
 <style scoped lang="scss">

src/layout/LayoutMix.vue

@@ -30,10 +30,15 @@
       <Main></Main>
       <GiFooter v-if="appStore.copyrightDisplay" />
     </section>
+
+    <!-- 公告弹窗 -->
+    <NoticePopup ref="noticePopupRef" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 import { searchTree } from 'xe-utils'
 import Main from './components/Main.vue'
@@ -44,10 +49,12 @@ import Logo from './components/Logo.vue'
 import MenuFoldBtn from './components/MenuFoldBtn.vue'
 import WwAds from './components/WwAds.vue'
 import GiFooter from '@/components/GiFooter/index.vue'
+import NoticePopup from '@/views/user/message/components/NoticePopup.vue'
 import { useAppStore, useRouteStore } from '@/stores'
 import { isExternal } from '@/utils/validate'
 import { filterTree } from '@/utils'
 import { useDevice } from '@/hooks'
+import { getToken } from '@/utils/auth'
 
 defineOptions({ name: 'LayoutMix' })
 const route = useRoute()
@@ -63,6 +70,21 @@ const menuRoutes = filterTree(cloneRoutes, (i) => i.meta?.hidden === false)
 const topMenus = ref<RouteRecordRaw[]>([])
 topMenus.value = JSON.parse(JSON.stringify(menuRoutes))
 
+// 公告弹窗引用
+const noticePopupRef = ref<InstanceType<typeof NoticePopup>>()
+
+// 检查并显示未读公告
+const checkAndShowNotices = () => {
+  const token = getToken()
+
+  // 如果有token，检查未读公告
+  if (token) {
+    setTimeout(() => {
+      noticePopupRef.value?.open()
+    }, 1000) // 延迟1秒显示，让页面先加载完成
+  }
+}
+
 const getMenuIcon = (item: RouteRecordRaw) => {
   return item.meta?.icon || item.children?.[0].meta?.icon
 }
@@ -102,6 +124,10 @@ watch(
   },
   { immediate: true },
 )
+
+onMounted(() => {
+  checkAndShowNotices()
+})
 </script>
 
 <style scoped lang="scss">

src/views/user/message/components/NoticePopup.vue

@@ -0,0 +1,324 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="currentNotice?.title || '系统公告'"
+    :width="800"
+    :mask-closable="false"
+    :footer="false"
+    @cancel="onClose"
+  >
+    <div class="detail">
+      <div class="detail_content">
+        <h1 class="title">{{ currentNotice?.title }}</h1>
+        <div class="info">
+          <a-space>
+            <span>
+              <icon-user class="icon" />
+              <span class="label">发布人：</span>
+              <span>{{ currentNotice?.createUserString }}</span>
+            </span>
+            <a-divider direction="vertical" />
+            <span>
+              <icon-history class="icon" />
+              <span class="label">发布时间：</span>
+              <span>{{ currentNotice?.publishTime }}</span>
+            </span>
+            <a-divider v-if="currentNotice?.updateTime" direction="vertical" />
+            <span v-if="currentNotice?.updateTime">
+              <icon-schedule class="icon" />
+              <span>更新时间：</span>
+              <span>{{ currentNotice?.updateTime }}</span>
+            </span>
+          </a-space>
+        </div>
+        <div style="flex: 1;">
+          <div v-if="contentLoading" class="content-loading">
+            <a-spin size="large" />
+          </div>
+          <AiEditor v-else v-model:model-value="currentNoticeContent" />
+        </div>
+      </div>
+
+      <!-- 底部操作区域 -->
+      <div class="notice-footer">
+        <div class="notice-actions">
+          <span class="pagination-info">
+            {{ currentIndex + 1 }} / {{ unreadNoticeIds.length }}
+          </span>
+
+          <!-- 翻页按钮 -->
+          <div class="pagination-controls">
+            <a-button
+              v-if="currentIndex > 0"
+              @click="previousNotice"
+            >
+              上一篇
+            </a-button>
+            <a-button
+              v-if="currentIndex < unreadNoticeIds.length - 1"
+              @click="nextNotice"
+            >
+              下一篇
+            </a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import AiEditor from './view/components/index.vue'
+import { getUnreadNoticeIds, getUserNotice } from '@/apis/system/user-message'
+import type { NoticePreviewResp } from '@/apis/system'
+
+defineOptions({ name: 'NoticePopup' })
+
+const props = withDefaults(defineProps<Props>(), {
+  method: 'POPUP',
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+interface Props {
+  method?: string // 通知方式，默认为 'POPUP'
+}
+
+const visible = ref(false)
+const unreadNoticeIds = ref<number[]>([])
+const currentIndex = ref(0)
+const loading = ref(false)
+const contentLoading = ref(false)
+const noticeCache = ref<Map<number, NoticePreviewResp>>(new Map())
+
+const currentNotice = computed(() => {
+  const noticeId = unreadNoticeIds.value[currentIndex.value]
+  return noticeId ? noticeCache.value.get(noticeId) : null
+})
+
+const currentNoticeContent = computed(() => {
+  return currentNotice.value?.content || ''
+})
+
+// 获取未读公告ID列表
+const fetchNoticeDetail = async (index: number) => {
+  const noticeId = unreadNoticeIds.value[index]
+  if (!noticeId) {
+    return
+  }
+
+  // 如果已经缓存了该公告，直接设置当前索引并返回
+  if (noticeCache.value.has(noticeId)) {
+    currentIndex.value = index
+    return
+  }
+
+  try {
+    contentLoading.value = true
+    const { data } = await getUserNotice(noticeId)
+    noticeCache.value.set(noticeId, data as NoticePreviewResp)
+    // 确保设置当前索引，触发计算属性更新
+    currentIndex.value = index
+  } catch (error) {
+    console.error(`获取公告详情失败:`, error)
+    // 创建一个错误状态的公告对象
+    noticeCache.value.set(noticeId, {
+      id: noticeId,
+      title: '获取公告失败',
+      content: '获取公告内容失败，请稍后重试',
+      createUserString: '',
+      publishTime: '',
+    } as NoticePreviewResp)
+    // 即使出错也要设置当前索引
+    currentIndex.value = index
+  } finally {
+    contentLoading.value = false
+  }
+}
+
+// 获取指定公告的详情
+const fetchUnreadNotices = async () => {
+  try {
+    loading.value = true
+    const { data: noticeIds } = await getUnreadNoticeIds(props.method)
+
+    if (noticeIds && noticeIds.length > 0) {
+      unreadNoticeIds.value = noticeIds
+      visible.value = true
+      // 获取第一篇公告的详情
+      await fetchNoticeDetail(0)
+      // 确保当前索引设置为0
+      currentIndex.value = 0
+    }
+  } catch (error) {
+    console.error('获取未读公告失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 上一条公告
+const previousNotice = async () => {
+  if (currentIndex.value > 0) {
+    // 计算新的索引
+    const newIndex = currentIndex.value - 1
+    // 获取公告详情
+    await fetchNoticeDetail(newIndex)
+  }
+}
+
+// 下一条公告
+const nextNotice = async () => {
+  if (currentIndex.value < unreadNoticeIds.value.length - 1) {
+    // 计算新的索引
+    const newIndex = currentIndex.value + 1
+    // 获取公告详情
+    await fetchNoticeDetail(newIndex)
+  }
+}
+
+// 关闭弹窗
+const onClose = () => {
+  visible.value = false
+  currentIndex.value = 0
+  unreadNoticeIds.value = []
+  noticeCache.value.clear()
+  emit('close')
+}
+
+// 打开弹窗
+const open = () => {
+  fetchUnreadNotices()
+}
+
+defineExpose({
+  open,
+})
+</script>
+
+<style scoped lang="scss">
+.detail {
+  .detail_content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      padding: 0; // 减小内边距
+      margin: 0;
+
+      .title {
+        margin-bottom: 12px; // 减小标题下边距
+        color: var(--color-text-1);
+        line-height: 1.4;
+        text-align: center;
+      }
+
+      .info {
+        margin-bottom: 12px; // 减小信息区域下边距
+        color: var(--color-text-2);
+        font-size: 14px;
+        line-height: 1.5715;
+        text-align: center;
+
+        .icon {
+          margin-right: 4px;
+        }
+      }
+    }
+
+  .notice-footer {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--color-border-2);
+
+    .notice-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .pagination-info {
+        font-size: 14px;
+        color: var(--color-text-2);
+      }
+
+      .pagination-controls {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+    }
+  }
+}
+
+.content-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+// 兼容原有样式
+.notice-content {
+  .notice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--color-border-2);
+
+    .notice-meta {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .notice-time {
+        font-size: 12px;
+        color: var(--color-text-3);
+      }
+    }
+  }
+
+  .notice-body {
+    margin-bottom: 24px;
+
+    .notice-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text-1);
+      margin-bottom: 16px;
+      line-height: 1.4;
+    }
+
+    .notice-text {
+      font-size: 14px;
+      color: var(--color-text-2);
+      line-height: 1.6;
+      max-height: 300px;
+      overflow-y: auto;
+
+      :deep(img) {
+        max-width: 100%;
+        height: auto;
+      }
+
+      :deep(p) {
+        margin-bottom: 12px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.notice-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+</style>

src/views/user/message/components/view/index.vue

@@ -19,8 +19,7 @@
           <span>
             <icon-history class="icon" />
             <span class="label">发布时间：</span>
-            <span>{{ form?.effectiveTime ? form?.effectiveTime : form?.createTime
-            }}</span>
+            <span>{{ form?.publishTime }}</span>
           </span>
           <a-divider v-if="form?.updateTime" direction="vertical" />
           <span v-if="form?.updateTime">
@@ -54,8 +53,7 @@ const containerRef = ref<HTMLElement | null>()
 const [form, resetForm] = useResetReactive({
   title: '',
   createUserString: '',
-  effectiveTime: '',
-  createTime: '',
+  publishTime: '',
   content: '',
 })