fix: 系统公告弹窗前端

.claude/settings.local.json

@@ -1,9 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "WebFetch(domain:www.donet5.com)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}

Yi.Ai.Vue3/.claude/settings.json

@@ -1,7 +0,0 @@
-{
-  "env": {
-    "ANTHROPIC_AUTH_TOKEN": "sk-lVcGFMOQfXYtZWp1rD4SaBNDNpM270UX2wDqWh",
-    "ANTHROPIC_BASE_URL": "https://api.token-ai.cn",
-	"ANTHROPIC_MODEL": "gpt-4o-mini"
-  }
-}

Yi.Ai.Vue3/src/App.vue

@@ -1,9 +1,37 @@
 <script setup lang="ts">
+import SystemAnnouncementDialog from '@/components/SystemAnnouncementDialog/index.vue';
+import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData.ts';
+import { useAnnouncementStore } from '@/stores';
 
+const announcementStore = useAnnouncementStore();
+
+// 应用加载时检查是否需要显示公告弹窗
+onMounted(async () => {
+  // 检查是否应该显示弹窗
+  if (announcementStore.shouldShowDialog) {
+    try {
+      // 获取公告数据
+      // const res = await getSystemAnnouncements();
+      // 使用模拟数据进行测试
+      const res = await getMockSystemAnnouncements();
+      if (res.data) {
+        announcementStore.setAnnouncementData(res.data);
+        // 显示弹窗
+        announcementStore.openDialog();
+      }
+    }
+    catch (error) {
+      console.error('获取系统公告失败:', error);
+      // 静默失败，不影响用户体验
+    }
+  }
+});
 </script>
 
 <template>
   <router-view />
+  <!-- 系统公告弹窗 -->
+  <SystemAnnouncementDialog />
 </template>
 
 <style scoped lang="scss"></style>

Yi.Ai.Vue3/src/api/announcement/index.ts

@@ -0,0 +1,31 @@
+import { get } from '@/utils/request'
+import type {
+  ActivityDetailResponse,
+  AnnouncementDetailResponse,
+  SystemAnnouncementResponse,
+} from './types'
+
+/**
+ * 获取系统公告和活动数据
+ */
+export function getSystemAnnouncements() {
+  return get<SystemAnnouncementResponse>('/announcement/system').json()
+}
+
+/**
+ * 获取活动详情
+ * @param id 活动ID
+ */
+export function getActivityDetail(id: string | number) {
+  return get<ActivityDetailResponse>(`/announcement/activity/${id}`).json()
+}
+
+/**
+ * 获取公告详情
+ * @param id 公告ID
+ */
+export function getAnnouncementDetail(id: string | number) {
+  return get<AnnouncementDetailResponse>(`/announcement/detail/${id}`).json()
+}
+
+export * from './types'

Yi.Ai.Vue3/src/api/announcement/types.ts

@@ -0,0 +1,51 @@
+// 轮播图类型
+export interface CarouselItem {
+  id: number | string
+  imageUrl: string
+  link?: string
+  title?: string
+}
+
+// 活动类型
+export interface Activity {
+  id: number | string
+  title: string
+  description: string
+  content: string
+  coverImage?: string
+  startTime?: string
+  endTime?: string
+  status: 'active' | 'inactive' | 'expired'
+  createdAt: string
+  updatedAt?: string
+}
+
+// 公告类型
+export interface Announcement {
+  id: number | string
+  title: string
+  content: string
+  type: 'latest' | 'history'
+  isImportant?: boolean
+  publishTime: string
+  createdAt: string
+  updatedAt?: string
+}
+
+// 系统公告响应类型
+export interface SystemAnnouncementResponse {
+  carousels: CarouselItem[]
+  activities: Activity[]
+  announcements: Announcement[]
+}
+
+// 公告详情响应类型
+export interface AnnouncementDetailResponse extends Announcement {
+  views?: number
+}
+
+// 活动详情响应类型
+export interface ActivityDetailResponse extends Activity {
+  views?: number
+  participantCount?: number
+}

Yi.Ai.Vue3/src/api/index.ts

@@ -1,3 +1,4 @@
+export * from './announcement'
 export * from './auth';
 export * from './chat';
 export * from './model';

Yi.Ai.Vue3/src/components/SystemAnnouncementDialog/index.vue

@@ -0,0 +1,598 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+import type { Activity, Announcement } from '@/api'
+import { useAnnouncementStore } from '@/stores'
+import type { CloseType } from '@/stores/modules/announcement'
+
+const router = useRouter()
+const announcementStore = useAnnouncementStore()
+
+const activeTab = ref('activity')
+
+// 窗口宽度响应式状态
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1920)
+
+// 监听窗口大小变化
+onMounted(() => {
+  const handleResize = () => {
+    windowWidth.value = window.innerWidth
+  }
+  window.addEventListener('resize', handleResize)
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
+})
+
+// 响应式弹窗宽度
+const dialogWidth = computed(() => {
+  if (windowWidth.value < 768) return '95%'
+  if (windowWidth.value < 1024) return '90%'
+  return '700px'
+})
+
+// 从store获取数据
+const { carousels, activities, announcements, isDialogVisible } = storeToRefs(announcementStore)
+
+// 分离最新公告和历史公告
+const latestAnnouncements = computed(() =>
+  announcements.value.filter(a => a.type === 'latest'),
+)
+const historyAnnouncements = computed(() =>
+  announcements.value.filter(a => a.type === 'history'),
+)
+
+// 处理关闭弹窗
+function handleClose(type: CloseType) {
+  announcementStore.closeDialog(type)
+
+  const messages = {
+    today: '今日内不再显示',
+    week: '本周内不再显示',
+    permanent: '公告已关闭',
+  }
+
+  ElMessage.success(messages[type])
+}
+
+// 查看活动详情
+function viewActivityDetail(activity: Activity) {
+  router.push({
+    name: 'activityDetail',
+    params: { id: activity.id },
+  })
+  announcementStore.isDialogVisible = false
+}
+
+// 查看公告详情
+function viewAnnouncementDetail(announcement: Announcement) {
+  router.push({
+    name: 'announcementDetail',
+    params: { id: announcement.id },
+  })
+  announcementStore.isDialogVisible = false
+}
+
+// 格式化时间
+function formatTime(time: string) {
+  const date = new Date(time)
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="isDialogVisible"
+    title="系统公告"
+    :width="dialogWidth"
+    :close-on-click-modal="false"
+    class="announcement-dialog"
+  >
+    <div class="announcement-dialog-content">
+      <el-tabs v-model="activeTab" class="announcement-tabs">
+        <!-- 活动Tab -->
+        <el-tab-pane label="活动" name="activity">
+          <div class="tab-content-wrapper">
+            <div class="activity-content">
+              <!-- 轮播图 -->
+              <el-carousel
+                v-if="carousels.length > 0"
+                height="250px"
+                class="carousel-container"
+              >
+                <el-carousel-item v-for="item in carousels" :key="item.id">
+                  <img
+                    :src="item.imageUrl"
+                    :alt="item.title"
+                    class="carousel-image"
+                  >
+                  <div v-if="item.title" class="carousel-title">
+                    {{ item.title }}
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
+
+              <!-- 活动列表 -->
+              <div class="activity-list">
+                <div
+                  v-for="activity in activities"
+                  :key="activity.id"
+                  class="activity-item"
+                >
+                  <div class="activity-header">
+                    <h3 class="activity-title">{{ activity.title }}</h3>
+                    <el-tag
+                      v-if="activity.status === 'active'"
+                      type="success"
+                      size="small"
+                    >
+                      进行中
+                    </el-tag>
+                    <el-tag
+                      v-else-if="activity.status === 'expired'"
+                      type="info"
+                      size="small"
+                    >
+                      已结束
+                    </el-tag>
+                  </div>
+                  <p class="activity-description">{{ activity.description }}</p>
+                  <div class="activity-footer">
+                    <span class="activity-time">{{ formatTime(activity.createdAt) }}</span>
+                    <el-button
+                      type="primary"
+                      link
+                      @click="viewActivityDetail(activity)"
+                    >
+                      查看详情
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <!-- 公告Tab -->
+        <el-tab-pane label="公告" name="announcement">
+          <div class="tab-content-wrapper">
+            <div class="announcement-content">
+              <!-- 最新公告 -->
+              <div v-if="latestAnnouncements.length > 0" class="latest-section">
+                <h3 class="section-title">最新公告</h3>
+                <div
+                  v-for="announcement in latestAnnouncements"
+                  :key="announcement.id"
+                  class="announcement-item latest"
+                >
+                  <div class="announcement-header">
+                    <h4 class="announcement-title">
+                      <el-icon v-if="announcement.isImportant" color="#f56c6c">
+                        <i-ep-warning />
+                      </el-icon>
+                      {{ announcement.title }}
+                    </h4>
+                    <span class="announcement-time">{{ formatTime(announcement.publishTime) }}</span>
+                  </div>
+                  <p class="announcement-summary">{{ announcement.content.substring(0, 100) }}...</p>
+                  <el-button
+                    type="primary"
+                    link
+                    @click="viewAnnouncementDetail(announcement)"
+                  >
+                    查看详情
+                  </el-button>
+                </div>
+              </div>
+
+              <!-- 历史公告（时间线） -->
+              <div v-if="historyAnnouncements.length > 0" class="history-section">
+                <h3 class="section-title">历史公告</h3>
+                <el-timeline>
+                  <el-timeline-item
+                    v-for="announcement in historyAnnouncements"
+                    :key="announcement.id"
+                    :timestamp="formatTime(announcement.publishTime)"
+                    placement="top"
+                  >
+                    <div class="timeline-item-content">
+                      <h4 class="timeline-title">{{ announcement.title }}</h4>
+                      <p class="timeline-summary">{{ announcement.content.substring(0, 80) }}...</p>
+                      <el-button
+                        type="primary"
+                        link
+                        size="small"
+                        @click="viewAnnouncementDetail(announcement)"
+                      >
+                        查看详情
+                      </el-button>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+    </el-tabs>
+    </div>
+
+    <!-- 底部按钮 -->
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleClose('week')">本周关闭</el-button>
+        <el-button @click="handleClose('today')">今日关闭</el-button>
+        <el-button type="primary" @click="handleClose('permanent')">
+          关闭公告
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+// 确保弹窗本身不会溢出
+:deep(.el-dialog) {
+  margin-top: 5vh !important;
+  margin-bottom: 5vh !important;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.el-dialog__body) {
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 !important;
+}
+
+.announcement-dialog-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.announcement-tabs {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  :deep(.el-tabs__header) {
+    flex-shrink: 0;
+    margin: 0 20px;
+  }
+
+  :deep(.el-tabs__content) {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  :deep(.el-tab-pane) {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.tab-content-wrapper {
+  height: 60vh;
+  max-height: 60vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px 20px;
+  flex-shrink: 0;
+
+  // 确保滚动条样式
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+
+    &:hover {
+      background: #a8a8a8;
+    }
+  }
+}
+
+.activity-content {
+  min-height: min-content;
+
+  .carousel-container {
+    margin-bottom: 24px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .carousel-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .carousel-title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 12px 16px;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+    color: #fff;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .activity-item {
+    padding: 16px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    transition: all 0.3s;
+
+    &:hover {
+      background: #e8eaed;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .activity-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+  }
+
+  .activity-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    flex: 1;
+  }
+
+  .activity-description {
+    margin: 0 0 12px 0;
+    color: #606266;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .activity-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .activity-time {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.announcement-content {
+  min-height: min-content;
+
+  .section-title {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #409eff;
+  }
+
+  .latest-section {
+    margin-bottom: 32px;
+  }
+
+  .announcement-item {
+    padding: 16px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    transition: all 0.3s;
+
+    &:hover {
+      background: #e8eaed;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.latest {
+      border-left: 3px solid #409eff;
+    }
+  }
+
+  .announcement-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .announcement-title {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .announcement-time {
+    font-size: 12px;
+    color: #909399;
+  }
+
+  .announcement-summary {
+    margin: 0 0 12px 0;
+    color: #606266;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .history-section {
+    :deep(.el-timeline) {
+      padding-left: 0;
+    }
+
+    .timeline-item-content {
+      padding-left: 8px;
+    }
+
+    .timeline-title {
+      margin: 0 0 8px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #303133;
+    }
+
+    .timeline-summary {
+      margin: 0 0 8px 0;
+      color: #606266;
+      font-size: 13px;
+      line-height: 1.5;
+    }
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  :deep(.el-dialog) {
+    margin: 5vh auto !important;
+    max-height: 90vh;
+  }
+
+  :deep(.el-dialog__header) {
+    padding: 16px;
+    flex-shrink: 0;
+  }
+
+  :deep(.el-dialog__footer) {
+    padding: 12px;
+    flex-shrink: 0;
+  }
+
+  .announcement-tabs {
+    :deep(.el-tabs__header) {
+      margin: 0 12px;
+    }
+  }
+
+  .tab-content-wrapper {
+    height: calc(90vh - 230px);
+    max-height: calc(90vh - 230px);
+    padding: 0 12px 12px;
+    flex-shrink: 0;
+    -webkit-overflow-scrolling: touch;
+
+    // 移动端滚动条样式
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+  }
+
+  .activity-content {
+    .carousel-container {
+      margin-bottom: 16px;
+    }
+
+    .carousel-title {
+      padding: 8px 12px;
+      font-size: 14px;
+    }
+
+    .activity-item {
+      padding: 12px;
+    }
+
+    .activity-title {
+      font-size: 14px;
+    }
+
+    .activity-description {
+      font-size: 13px;
+    }
+
+    .activity-footer {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+    }
+  }
+
+  .announcement-content {
+    .section-title {
+      font-size: 14px;
+      margin-bottom: 12px;
+    }
+
+    .announcement-item {
+      padding: 12px;
+      margin-bottom: 8px;
+    }
+
+    .announcement-title {
+      font-size: 14px;
+    }
+
+    .announcement-summary {
+      font-size: 13px;
+    }
+
+    .history-section {
+      .timeline-title {
+        font-size: 13px;
+      }
+
+      .timeline-summary {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .dialog-footer {
+    flex-direction: column;
+    gap: 8px;
+
+    .el-button {
+      width: 100%;
+      margin: 0;
+    }
+  }
+}
+
+// 平板适配 (768px - 1024px)
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+  :deep(.el-dialog) {
+    margin: 5vh auto !important;
+    max-height: 90vh;
+  }
+
+  .announcement-tabs {
+    max-height: calc(90vh - 200px);
+  }
+}
+</style>

Yi.Ai.Vue3/src/data/mockAnnouncementData.ts

@@ -0,0 +1,301 @@
+import type { Activity, Announcement, CarouselItem, SystemAnnouncementResponse } from '@/api'
+
+/**
+ * 模拟数据 - 系统公告
+ * 这些数据可以用于开发和测试，实际使用时应从后端API获取
+ */
+
+// 轮播图数据
+export const mockCarousels: CarouselItem[] = [
+  {
+    id: 1,
+    imageUrl: 'https://images.unsplash.com/photo-1607827448387-a67db1383b59?w=800&h=400&fit=crop',
+    title: '新年特惠活动',
+    link: '/activity/1',
+  },
+  {
+    id: 2,
+    imageUrl: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=800&h=400&fit=crop',
+    title: '新功能上线',
+    link: '/activity/2',
+  },
+  {
+    id: 3,
+    imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=400&fit=crop',
+    title: '限时优惠',
+    link: '/activity/3',
+  },
+]
+
+// 活动数据
+export const mockActivities: Activity[] = [
+  {
+    id: 1,
+    title: '新年特惠活动',
+    description: '参与新年特惠活动，即可获得丰厚奖励。活动期间充值即送额外积分，最高可获得50%额外积分奖励！',
+    content: `
+      <h2>活动详情</h2>
+      <p>为了感谢各位用户的支持，我们特别推出新年特惠活动！</p>
+
+      <h3>活动时间</h3>
+      <p>2025年1月1日 00:00 - 2025年1月31日 23:59</p>
+
+      <h3>活动规则</h3>
+      <ul>
+        <li>充值满100元，赠送10%积分</li>
+        <li>充值满500元，赠送20%积分</li>
+        <li>充值满1000元，赠送30%积分</li>
+        <li>充值满5000元，赠送50%积分</li>
+      </ul>
+
+      <h3>注意事项</h3>
+      <ol>
+        <li>每个用户在活动期间最多可参与5次</li>
+        <li>赠送的积分将在充值成功后24小时内到账</li>
+        <li>本活动最终解释权归平台所有</li>
+      </ol>
+
+      <blockquote>
+        机会难得，不要错过！
+      </blockquote>
+    `,
+    coverImage: 'https://images.unsplash.com/photo-1607827448387-a67db1383b59?w=1200&h=600&fit=crop',
+    startTime: '2025-01-01T00:00:00Z',
+    endTime: '2025-01-31T23:59:59Z',
+    status: 'active',
+    createdAt: '2024-12-25T10:00:00Z',
+    updatedAt: '2024-12-26T15:30:00Z',
+  },
+  {
+    id: 2,
+    title: 'AI功能免费体验',
+    description: '全新AI功能上线，限时免费体验。包括智能对话、图像生成、代码辅助等多项功能。',
+    content: `
+      <h2>新功能介绍</h2>
+      <p>我们很高兴地宣布，全新的AI功能已经正式上线！</p>
+
+      <h3>功能亮点</h3>
+      <ul>
+        <li><strong>智能对话</strong>: 更自然的对话体验，支持上下文理解</li>
+        <li><strong>图像生成</strong>: 通过文字描述生成精美图片</li>
+        <li><strong>代码辅助</strong>: 智能代码补全和错误检测</li>
+        <li><strong>文档分析</strong>: 快速提取文档关键信息</li>
+      </ul>
+
+      <h3>体验时间</h3>
+      <p>2025年1月1日 - 2025年2月28日</p>
+
+      <p>在体验期间，所有功能完全免费使用！</p>
+    `,
+    coverImage: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=1200&h=600&fit=crop',
+    startTime: '2025-01-01T00:00:00Z',
+    endTime: '2025-02-28T23:59:59Z',
+    status: 'active',
+    createdAt: '2024-12-28T08:00:00Z',
+    updatedAt: '2024-12-28T08:00:00Z',
+  },
+  {
+    id: 3,
+    title: '推荐好友得奖励',
+    description: '邀请好友注册使用，双方均可获得积分奖励。推荐越多，奖励越多！',
+    content: `
+      <h2>推荐计划</h2>
+      <p>邀请您的朋友一起体验我们的服务，双方都能获得丰厚奖励！</p>
+
+      <h3>奖励规则</h3>
+      <ul>
+        <li>好友通过您的邀请链接注册，您和好友各得50积分</li>
+        <li>好友首次充值，您额外获得其充值金额10%的积分</li>
+        <li>推荐5位好友，额外奖励200积分</li>
+        <li>推荐10位好友，额外奖励500积分</li>
+      </ul>
+
+      <h3>如何参与</h3>
+      <ol>
+        <li>登录您的账户</li>
+        <li>进入"推荐好友"页面</li>
+        <li>复制您的专属邀请链接</li>
+        <li>分享给您的朋友</li>
+      </ol>
+    `,
+    status: 'active',
+    createdAt: '2024-12-20T10:00:00Z',
+  },
+]
+
+// 公告数据
+export const mockAnnouncements: Announcement[] = [
+  {
+    id: 1,
+    title: '系统维护升级公告',
+    content: `
+      <p>尊敬的用户：</p>
+
+      <p>为了给您提供更好的服务体验，我们计划于<strong>2025年1月10日 22:00 - 2025年1月11日 02:00</strong>对系统进行维护升级。</p>
+
+      <h3>维护内容</h3>
+      <ul>
+        <li>优化系统性能，提升响应速度</li>
+        <li>修复已知问题</li>
+        <li>更新安全补丁</li>
+        <li>新增部分功能</li>
+      </ul>
+
+      <h3>影响范围</h3>
+      <p>维护期间，系统将暂时无法访问，给您带来不便敬请谅解。</p>
+
+      <p>如有紧急问题，请联系客服：service@example.com</p>
+
+      <p>感谢您的理解与支持！</p>
+    `,
+    type: 'latest',
+    isImportant: true,
+    publishTime: '2025-01-05T10:00:00Z',
+    createdAt: '2025-01-05T09:30:00Z',
+  },
+  {
+    id: 2,
+    title: '隐私政策更新通知',
+    content: `
+      <p>尊敬的用户：</p>
+
+      <p>我们更新了隐私政策，新政策将于<strong>2025年1月15日</strong>生效。</p>
+
+      <h3>主要变更</h3>
+      <ul>
+        <li>明确了数据收集和使用范围</li>
+        <li>增加了用户数据控制权说明</li>
+        <li>完善了第三方数据共享规则</li>
+      </ul>
+
+      <p>详细内容请查看完整的<a href="/privacy-policy" target="_blank">隐私政策</a>。</p>
+
+      <p>如有疑问，欢迎联系我们。</p>
+    `,
+    type: 'latest',
+    isImportant: false,
+    publishTime: '2025-01-03T14:00:00Z',
+    createdAt: '2025-01-03T13:30:00Z',
+  },
+  {
+    id: 3,
+    title: 'API接口升级通知',
+    content: `
+      <p>开发者们注意：</p>
+
+      <p>我们的API接口将进行版本升级，新版本为<code>v2.0</code>。</p>
+
+      <h3>升级时间</h3>
+      <p>2025年2月1日</p>
+
+      <h3>主要变化</h3>
+      <ul>
+        <li>优化了响应数据结构</li>
+        <li>新增多个端点</li>
+        <li>提升了并发处理能力</li>
+      </ul>
+
+      <p>旧版本API将继续维护至2025年6月1日。</p>
+    `,
+    type: 'history',
+    isImportant: false,
+    publishTime: '2024-12-28T10:00:00Z',
+    createdAt: '2024-12-28T09:00:00Z',
+  },
+  {
+    id: 4,
+    title: '新年假期客服安排',
+    content: `
+      <p>尊敬的用户：</p>
+
+      <p>新年假期期间（1月1日-1月3日），客服工作时间调整为：</p>
+
+      <ul>
+        <li>在线客服：10:00 - 18:00</li>
+        <li>邮件客服：正常响应，回复时间可能延迟</li>
+      </ul>
+
+      <p>1月4日起恢复正常工作时间。</p>
+    `,
+    type: 'history',
+    isImportant: false,
+    publishTime: '2024-12-25T15:00:00Z',
+    createdAt: '2024-12-25T14:00:00Z',
+  },
+  {
+    id: 5,
+    title: '用户协议更新',
+    content: `
+      <p>我们更新了用户服务协议，主要涉及：</p>
+
+      <ul>
+        <li>账户安全责任条款</li>
+        <li>服务使用规范</li>
+        <li>争议解决方式</li>
+      </ul>
+
+      <p>继续使用服务即表示您同意新的用户协议。</p>
+    `,
+    type: 'history',
+    isImportant: false,
+    publishTime: '2024-12-20T10:00:00Z',
+    createdAt: '2024-12-20T09:00:00Z',
+  },
+]
+
+// 完整的系统公告响应数据
+export const mockSystemAnnouncementData: SystemAnnouncementResponse = {
+  carousels: mockCarousels,
+  activities: mockActivities,
+  announcements: mockAnnouncements,
+}
+
+/**
+ * 模拟API延迟
+ */
+export function mockDelay(ms: number = 500): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * 模拟获取系统公告API
+ */
+export async function getMockSystemAnnouncements(): Promise<{ data: SystemAnnouncementResponse }> {
+  await mockDelay()
+  return { data: mockSystemAnnouncementData }
+}
+
+/**
+ * 模拟获取活动详情API
+ */
+export async function getMockActivityDetail(id: string | number) {
+  await mockDelay()
+  const activity = mockActivities.find(a => a.id.toString() === id.toString())
+  if (!activity) {
+    throw new Error('活动不存在')
+  }
+  return {
+    data: {
+      ...activity,
+      views: Math.floor(Math.random() * 10000) + 1000,
+      participantCount: Math.floor(Math.random() * 1000) + 100,
+    },
+  }
+}
+
+/**
+ * 模拟获取公告详情API
+ */
+export async function getMockAnnouncementDetail(id: string | number) {
+  await mockDelay()
+  const announcement = mockAnnouncements.find(a => a.id.toString() === id.toString())
+  if (!announcement) {
+    throw new Error('公告不存在')
+  }
+  return {
+    data: {
+      ...announcement,
+      views: Math.floor(Math.random() * 10000) + 1000,
+    },
+  }
+}

Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { Bell } from '@element-plus/icons-vue'
+import { storeToRefs } from 'pinia'
+import { useAnnouncementStore } from '@/stores'
+
+const announcementStore = useAnnouncementStore()
+const { announcements } = storeToRefs(announcementStore)
+
+// 计算未读公告数量（最新公告）
+const unreadCount = computed(() => {
+  return announcements.value.filter(a => a.type === 'latest').length
+})
+
+// 打开公告弹窗
+function openAnnouncement() {
+  announcementStore.openDialog()
+}
+</script>
+
+<template>
+  <div class="announcement-btn-container">
+    <el-badge
+      :value="unreadCount"
+      :hidden="unreadCount === 0"
+      :max="99"
+      class="announcement-badge"
+    >
+      <div
+        class="announcement-btn"
+        @click="openAnnouncement"
+      >
+        <el-icon :size="20">
+          <Bell />
+        </el-icon>
+      </div>
+    </el-badge>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.announcement-btn-container {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+
+  .announcement-badge {
+    :deep(.el-badge__content) {
+      background-color: #f56c6c;
+      border: none;
+      font-size: 12px;
+      height: 18px;
+      line-height: 18px;
+      padding: 0 6px;
+    }
+  }
+
+  .announcement-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    .el-icon {
+      color: #606266;
+      transition: color 0.3s;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+
+      .el-icon {
+        color: #409eff;
+      }
+    }
+  }
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .announcement-btn-container {
+    margin-right: 8px;
+
+    .announcement-btn {
+      width: 36px;
+      height: 36px;
+
+      .el-icon {
+        font-size: 18px;
+      }
+    }
+
+    .announcement-badge {
+      :deep(.el-badge__content) {
+        font-size: 10px;
+        height: 16px;
+        line-height: 16px;
+        padding: 0 4px;
+      }
+    }
+  }
+}
+</style>

Yi.Ai.Vue3/src/layouts/components/Header/index.vue

@@ -4,6 +4,7 @@ import { onKeyStroke } from '@vueuse/core';
 import { SIDE_BAR_WIDTH } from '@/config/index';
 import { useDesignStore, useUserStore } from '@/stores';
 import { useSessionStore } from '@/stores/modules/session';
+import AnnouncementBtn from './components/AnnouncementBtn.vue';
 import Avatar from './components/Avatar.vue';
 import Collapse from './components/Collapse.vue';
 import CreateChat from './components/CreateChat.vue';
@@ -69,6 +70,7 @@ onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtr
 
         <!-- 右边 -->
         <div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
+          <AnnouncementBtn />
           <Avatar v-show="userStore.userInfo" />
           <LoginBtn v-show="!userStore.userInfo" />
         </div>

Yi.Ai.Vue3/src/pages/activity/detail.vue

@@ -0,0 +1,370 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import { getActivityDetail } from '@/api'
+import type { ActivityDetailResponse } from '@/api'
+
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(false)
+const activityDetail = ref<ActivityDetailResponse | null>(null)
+
+// 获取活动详情
+async function fetchActivityDetail() {
+  const id = route.params.id as string
+  if (!id)
+    return
+
+  loading.value = true
+  try {
+    const res = await getActivityDetail(id)
+    activityDetail.value = res.data
+  }
+  catch (error) {
+    console.error('获取活动详情失败:', error)
+    ElMessage.error('获取活动详情失败')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 返回上一页
+function goBack() {
+  router.back()
+}
+
+// 格式化时间
+function formatDateTime(time?: string) {
+  if (!time)
+    return '-'
+  const date = new Date(time)
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
+// 页面加载时获取详情
+onMounted(() => {
+  fetchActivityDetail()
+})
+</script>
+
+<template>
+  <div class="activity-detail-page">
+    <el-card v-loading="loading" class="detail-card">
+      <template #header>
+        <div class="card-header">
+          <el-button type="primary" link @click="goBack">
+            <el-icon><i-ep-arrow-left /></el-icon>
+            返回
+          </el-button>
+        </div>
+      </template>
+
+      <div v-if="activityDetail" class="detail-content">
+        <!-- 活动头部 -->
+        <div class="detail-header">
+          <h1 class="detail-title">{{ activityDetail.title }}</h1>
+          <div class="detail-meta">
+            <el-tag
+              v-if="activityDetail.status === 'active'"
+              type="success"
+              size="large"
+            >
+              进行中
+            </el-tag>
+            <el-tag
+              v-else-if="activityDetail.status === 'expired'"
+              type="info"
+              size="large"
+            >
+              已结束
+            </el-tag>
+            <span class="meta-item">
+              <el-icon><i-ep-view /></el-icon>
+              浏览 {{ activityDetail.views || 0 }}
+            </span>
+            <span class="meta-item">
+              <el-icon><i-ep-user /></el-icon>
+              参与 {{ activityDetail.participantCount || 0 }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 活动封面 -->
+        <div v-if="activityDetail.coverImage" class="detail-cover">
+          <img :src="activityDetail.coverImage" :alt="activityDetail.title">
+        </div>
+
+        <!-- 活动描述 -->
+        <div class="detail-description">
+          <h3>活动简介</h3>
+          <p>{{ activityDetail.description }}</p>
+        </div>
+
+        <!-- 活动时间 -->
+        <div class="detail-time">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="开始时间">
+              {{ formatDateTime(activityDetail.startTime) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="结束时间">
+              {{ formatDateTime(activityDetail.endTime) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="发布时间">
+              {{ formatDateTime(activityDetail.createdAt) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="更新时间">
+              {{ formatDateTime(activityDetail.updatedAt) }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+
+        <!-- 活动详细内容 -->
+        <div class="detail-body">
+          <h3>活动详情</h3>
+          <div class="content-html" v-html="activityDetail.content" />
+        </div>
+      </div>
+
+      <el-empty v-else description="暂无活动详情" />
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.activity-detail-page {
+  padding: 24px;
+  background: #f5f7fa;
+  min-height: 100vh;
+
+  .detail-card {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .detail-content {
+    .detail-header {
+      margin-bottom: 24px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid #e4e7ed;
+
+      .detail-title {
+        margin: 0 0 16px 0;
+        font-size: 28px;
+        font-weight: 600;
+        color: #303133;
+        line-height: 1.4;
+      }
+
+      .detail-meta {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+
+        .meta-item {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 14px;
+          color: #606266;
+
+          .el-icon {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+
+    .detail-cover {
+      margin-bottom: 24px;
+      border-radius: 8px;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: auto;
+        display: block;
+      }
+    }
+
+    .detail-description {
+      margin-bottom: 24px;
+      padding: 20px;
+      background: #f9fafb;
+      border-radius: 8px;
+
+      h3 {
+        margin: 0 0 12px 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      p {
+        margin: 0;
+        font-size: 15px;
+        color: #606266;
+        line-height: 1.8;
+      }
+    }
+
+    .detail-time {
+      margin-bottom: 24px;
+    }
+
+    .detail-body {
+      h3 {
+        margin: 0 0 16px 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      .content-html {
+        font-size: 15px;
+        color: #303133;
+        line-height: 1.8;
+
+        :deep(img) {
+          max-width: 100%;
+          height: auto;
+          border-radius: 4px;
+        }
+
+        :deep(p) {
+          margin: 12px 0;
+        }
+
+        :deep(h1),
+        :deep(h2),
+        :deep(h3),
+        :deep(h4),
+        :deep(h5),
+        :deep(h6) {
+          margin: 20px 0 12px;
+          font-weight: 600;
+          color: #303133;
+        }
+
+        :deep(ul),
+        :deep(ol) {
+          padding-left: 24px;
+          margin: 12px 0;
+        }
+
+        :deep(li) {
+          margin: 8px 0;
+        }
+
+        :deep(blockquote) {
+          margin: 16px 0;
+          padding: 12px 16px;
+          background: #f5f7fa;
+          border-left: 4px solid #409eff;
+          color: #606266;
+        }
+
+        :deep(code) {
+          padding: 2px 6px;
+          background: #f5f7fa;
+          border-radius: 3px;
+          font-family: 'Courier New', monospace;
+          font-size: 14px;
+        }
+
+        :deep(pre) {
+          margin: 16px 0;
+          padding: 16px;
+          background: #282c34;
+          border-radius: 4px;
+          overflow-x: auto;
+
+          code {
+            background: none;
+            padding: 0;
+            color: #abb2bf;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .activity-detail-page {
+    padding: 12px;
+
+    .detail-card {
+      :deep(.el-card__header) {
+        padding: 12px;
+      }
+
+      :deep(.el-card__body) {
+        padding: 12px;
+      }
+    }
+
+    .detail-content {
+      .detail-header {
+        margin-bottom: 16px;
+        padding-bottom: 16px;
+
+        .detail-title {
+          font-size: 20px;
+        }
+
+        .detail-meta {
+          gap: 8px;
+
+          .meta-item {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .detail-description {
+        padding: 12px;
+        margin-bottom: 16px;
+
+        h3 {
+          font-size: 16px;
+        }
+
+        p {
+          font-size: 14px;
+        }
+      }
+
+      .detail-time {
+        margin-bottom: 16px;
+
+        :deep(.el-descriptions__label) {
+          font-size: 12px;
+        }
+
+        :deep(.el-descriptions__content) {
+          font-size: 12px;
+        }
+      }
+
+      .detail-body {
+        h3 {
+          font-size: 16px;
+        }
+
+        .content-html {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>

Yi.Ai.Vue3/src/pages/announcement/detail.vue

@@ -0,0 +1,364 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import { getAnnouncementDetail } from '@/api'
+import type { AnnouncementDetailResponse } from '@/api'
+
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(false)
+const announcementDetail = ref<AnnouncementDetailResponse | null>(null)
+
+// 获取公告详情
+async function fetchAnnouncementDetail() {
+  const id = route.params.id as string
+  if (!id)
+    return
+
+  loading.value = true
+  try {
+    const res = await getAnnouncementDetail(id)
+    announcementDetail.value = res.data
+  }
+  catch (error) {
+    console.error('获取公告详情失败:', error)
+    ElMessage.error('获取公告详情失败')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 返回上一页
+function goBack() {
+  router.back()
+}
+
+// 格式化时间
+function formatDateTime(time?: string) {
+  if (!time)
+    return '-'
+  const date = new Date(time)
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
+// 页面加载时获取详情
+onMounted(() => {
+  fetchAnnouncementDetail()
+})
+</script>
+
+<template>
+  <div class="announcement-detail-page">
+    <el-card v-loading="loading" class="detail-card">
+      <template #header>
+        <div class="card-header">
+          <el-button type="primary" link @click="goBack">
+            <el-icon><i-ep-arrow-left /></el-icon>
+            返回
+          </el-button>
+        </div>
+      </template>
+
+      <div v-if="announcementDetail" class="detail-content">
+        <!-- 公告头部 -->
+        <div class="detail-header">
+          <h1 class="detail-title">
+            <el-icon v-if="announcementDetail.isImportant" color="#f56c6c" class="important-icon">
+              <i-ep-warning />
+            </el-icon>
+            {{ announcementDetail.title }}
+          </h1>
+          <div class="detail-meta">
+            <el-tag
+              v-if="announcementDetail.type === 'latest'"
+              type="success"
+              size="large"
+            >
+              最新公告
+            </el-tag>
+            <el-tag
+              v-else
+              type="info"
+              size="large"
+            >
+              历史公告
+            </el-tag>
+            <span class="meta-item">
+              <el-icon><i-ep-view /></el-icon>
+              浏览 {{ announcementDetail.views || 0 }}
+            </span>
+            <span class="meta-item">
+              <el-icon><i-ep-clock /></el-icon>
+              发布时间: {{ formatDateTime(announcementDetail.publishTime) }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 公告详细内容 -->
+        <div class="detail-body">
+          <div class="content-html" v-html="announcementDetail.content" />
+        </div>
+
+        <!-- 公告底部信息 -->
+        <div class="detail-footer">
+          <el-divider />
+          <div class="footer-info">
+            <span>创建时间: {{ formatDateTime(announcementDetail.createdAt) }}</span>
+            <span v-if="announcementDetail.updatedAt">
+              更新时间: {{ formatDateTime(announcementDetail.updatedAt) }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <el-empty v-else description="暂无公告详情" />
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.announcement-detail-page {
+  padding: 24px;
+  background: #f5f7fa;
+  min-height: 100vh;
+
+  .detail-card {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .detail-content {
+    .detail-header {
+      margin-bottom: 24px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid #e4e7ed;
+
+      .detail-title {
+        margin: 0 0 16px 0;
+        font-size: 28px;
+        font-weight: 600;
+        color: #303133;
+        line-height: 1.4;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .important-icon {
+          font-size: 30px;
+          animation: pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+          0%, 100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.6;
+          }
+        }
+      }
+
+      .detail-meta {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+
+        .meta-item {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 14px;
+          color: #606266;
+
+          .el-icon {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+
+    .detail-body {
+      margin-bottom: 24px;
+
+      .content-html {
+        font-size: 16px;
+        color: #303133;
+        line-height: 1.8;
+
+        :deep(img) {
+          max-width: 100%;
+          height: auto;
+          border-radius: 4px;
+        }
+
+        :deep(p) {
+          margin: 12px 0;
+        }
+
+        :deep(h1),
+        :deep(h2),
+        :deep(h3),
+        :deep(h4),
+        :deep(h5),
+        :deep(h6) {
+          margin: 24px 0 12px;
+          font-weight: 600;
+          color: #303133;
+        }
+
+        :deep(ul),
+        :deep(ol) {
+          padding-left: 24px;
+          margin: 12px 0;
+        }
+
+        :deep(li) {
+          margin: 8px 0;
+        }
+
+        :deep(blockquote) {
+          margin: 16px 0;
+          padding: 12px 16px;
+          background: #f5f7fa;
+          border-left: 4px solid #409eff;
+          color: #606266;
+        }
+
+        :deep(code) {
+          padding: 2px 6px;
+          background: #f5f7fa;
+          border-radius: 3px;
+          font-family: 'Courier New', monospace;
+          font-size: 14px;
+        }
+
+        :deep(pre) {
+          margin: 16px 0;
+          padding: 16px;
+          background: #282c34;
+          border-radius: 4px;
+          overflow-x: auto;
+
+          code {
+            background: none;
+            padding: 0;
+            color: #abb2bf;
+          }
+        }
+
+        :deep(table) {
+          width: 100%;
+          margin: 16px 0;
+          border-collapse: collapse;
+          border-spacing: 0;
+
+          th,
+          td {
+            padding: 12px;
+            border: 1px solid #e4e7ed;
+            text-align: left;
+          }
+
+          th {
+            background: #f5f7fa;
+            font-weight: 600;
+          }
+
+          tr:hover {
+            background: #fafafa;
+          }
+        }
+      }
+    }
+
+    .detail-footer {
+      .footer-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 13px;
+        color: #909399;
+        flex-wrap: wrap;
+        gap: 12px;
+      }
+    }
+  }
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .announcement-detail-page {
+    padding: 12px;
+
+    .detail-card {
+      :deep(.el-card__header) {
+        padding: 12px;
+      }
+
+      :deep(.el-card__body) {
+        padding: 12px;
+      }
+    }
+
+    .detail-content {
+      .detail-header {
+        margin-bottom: 16px;
+        padding-bottom: 16px;
+
+        .detail-title {
+          font-size: 20px;
+
+          .important-icon {
+            font-size: 24px;
+          }
+        }
+
+        .detail-meta {
+          gap: 8px;
+
+          .meta-item {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .detail-body {
+        margin-bottom: 16px;
+
+        .content-html {
+          font-size: 14px;
+
+          :deep(table) {
+            display: block;
+            overflow-x: auto;
+            white-space: nowrap;
+
+            th,
+            td {
+              padding: 8px;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+
+      .detail-footer {
+        .footer-info {
+          font-size: 11px;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 4px;
+        }
+      }
+    }
+  }
+}
+</style>

Yi.Ai.Vue3/src/routers/modules/staticRouter.ts

@@ -55,6 +55,26 @@ export const layoutRouter: RouteRecordRaw[] = [
         },
 
       },
+      {
+        path: '/activity/:id',
+        name: 'activityDetail',
+        component: () => import('@/pages/activity/detail.vue'),
+        meta: {
+          title: '活动详情',
+          isDefaultChat: false,
+          layout: 'blankPage',
+        },
+      },
+      {
+        path: '/announcement/:id',
+        name: 'announcementDetail',
+        component: () => import('@/pages/announcement/detail.vue'),
+        meta: {
+          title: '公告详情',
+          isDefaultChat: false,
+          layout: 'blankPage',
+        },
+      },
     ],
   },
 ];

Yi.Ai.Vue3/src/stores/index.ts

@@ -7,6 +7,7 @@ store.use(piniaPluginPersistedstate);
 
 export default store;
 
+export * from './modules/announcement'
 // export * from './modules/chat';
 export * from './modules/design';
 export * from './modules/user';

Yi.Ai.Vue3/src/stores/modules/announcement.ts

@@ -0,0 +1,94 @@
+import { defineStore } from 'pinia'
+import type { Activity, Announcement, CarouselItem } from '@/api'
+
+export type CloseType = 'today' | 'week' | 'permanent'
+
+export const useAnnouncementStore = defineStore(
+  'announcement',
+  () => {
+    // 弹窗显示状态
+    const isDialogVisible = ref(false)
+
+    // 公告数据
+    const carousels = ref<CarouselItem[]>([])
+    const activities = ref<Activity[]>([])
+    const announcements = ref<Announcement[]>([])
+
+    // 关闭记录
+    const closeType = ref<CloseType | null>(null)
+    const closedAt = ref<number | null>(null)
+
+    // 打开弹窗
+    const openDialog = () => {
+      isDialogVisible.value = true
+    }
+
+    // 关闭弹窗
+    const closeDialog = (type: CloseType) => {
+      isDialogVisible.value = false
+      closeType.value = type
+      closedAt.value = Date.now()
+    }
+
+    // 检查是否应该显示弹窗
+    const shouldShowDialog = computed(() => {
+      if (!closedAt.value || !closeType.value)
+        return true
+
+      const now = Date.now()
+      const elapsed = now - closedAt.value
+
+      if (closeType.value === 'permanent')
+        return false
+
+      if (closeType.value === 'today') {
+        // 检查是否已过去一天（24小时）
+        return elapsed > 24 * 60 * 60 * 1000
+      }
+
+      if (closeType.value === 'week') {
+        // 检查是否已过去一周（7天）
+        return elapsed > 7 * 24 * 60 * 60 * 1000
+      }
+
+      return true
+    })
+
+    // 设置公告数据
+    const setAnnouncementData = (data: {
+      carousels: CarouselItem[]
+      activities: Activity[]
+      announcements: Announcement[]
+    }) => {
+      carousels.value = data.carousels
+      activities.value = data.activities
+      announcements.value = data.announcements
+    }
+
+    // 重置关闭状态（用于测试或管理员重置）
+    const resetCloseStatus = () => {
+      closeType.value = null
+      closedAt.value = null
+    }
+
+    return {
+      isDialogVisible,
+      carousels,
+      activities,
+      announcements,
+      closeType,
+      closedAt,
+      shouldShowDialog,
+      openDialog,
+      closeDialog,
+      setAnnouncementData,
+      resetCloseStatus,
+    }
+  },
+  {
+    persist: {
+      // 只持久化关闭状态相关的数据
+      paths: ['closeType', 'closedAt'],
+    },
+  },
+)

Yi.Ai.Vue3/src/utils/request.ts

@@ -77,10 +77,11 @@ function jwtPlugin(): {
   afterResponse: (response: any) => Promise<any>;
   beforeStream: (body: any, config: any) => Promise<void>;
 } {
-  const userStore = useUserStore();
   return {
     name: 'jwt',
     beforeRequest: async (config) => {
+      // 延迟获取 store，确保 Pinia 已经初始化
+      const userStore = useUserStore();
       config.headers = new Headers(config.headers);
       if (userStore.refreshToken) {
         config.headers.set('refresh_token', `${userStore.refreshToken}`);
@@ -94,6 +95,8 @@ function jwtPlugin(): {
 
     // 响应后处理
     afterResponse: async (response: any) => {
+      // 延迟获取 store，确保 Pinia 已经初始化
+      const userStore = useUserStore();
       if (response.response.headers.get('access_token')) {
         userStore.setToken(response.response.headers.get('access_token'), response.response.headers.get('refresh_token'));
       }
@@ -118,6 +121,8 @@ function jwtPlugin(): {
     },
 
     onError: async (error) => {
+      // 延迟获取 store，确保 Pinia 已经初始化
+      const userStore = useUserStore();
       if (error.status === 403) {
         const data = await (error.response.json());
         // 弹窗提示

Yi.Ai.Vue3/types/components.d.ts

@@ -16,9 +16,12 @@ declare module 'vue' {
     DeepThinking: typeof import('./../src/components/DeepThinking/index.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
@@ -39,7 +42,11 @@ declare module 'vue' {
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     FilesSelect: typeof import('./../src/components/FilesSelect/index.vue')['default']
     IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
@@ -58,6 +65,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SupportModelList: typeof import('./../src/components/userPersonalCenter/components/SupportModelList.vue')['default']
     SvgIcon: typeof import('./../src/components/SvgIcon/index.vue')['default']
+    SystemAnnouncementDialog: typeof import('./../src/components/SystemAnnouncementDialog/index.vue')['default']
     UsageStatistics: typeof import('./../src/components/userPersonalCenter/components/UsageStatistics.vue')['default']
     UserManagement: typeof import('./../src/components/userPersonalCenter/components/UserManagement.vue')['default']
     VerificationCode: typeof import('./../src/components/LoginDialog/components/FormLogin/VerificationCode.vue')['default']

Yi.Ai.Vue3/types/import_meta.d.ts

@@ -6,6 +6,7 @@ interface ImportMetaEnv {
   readonly VITE_WEB_ENV: string;
   readonly VITE_WEB_BASE_API: string;
   readonly VITE_API_URL: string;
+  readonly VITE_BUILD_COMPRESS: string;
   readonly VITE_SSO_SEVER_URL: string;
   readonly VITE_APP_VERSION: string;
 }

Yi.Ai.Vue3/系统公告API接口文档.md

@@ -0,0 +1,232 @@
+# 系统公告 API 接口文档
+
+## 概述
+
+本文档定义了系统公告和活动功能所需的后端API接口。包括公告弹窗数据、活动详情、公告详情三个主要接口。
+
+---
+
+## 1. 获取系统公告和活动数据
+
+### 接口信息
+
+- **路径**: `GET /announcement/system`
+- **描述**: 获取系统公告弹窗所需的所有数据，包括轮播图、活动列表、公告列表
+- **权限**: 无需登录即可访问
+
+### 响应数据结构
+
+```typescript
+{
+  "success": true,
+  "data": {
+    "carousels": [
+      {
+        "id": 1,
+        "imageUrl": "https://example.com/carousel/1.jpg",
+        "link": "https://example.com/activity/1",
+        "title": "新年活动"
+      }
+    ],
+    "activities": [
+      {
+        "id": 1,
+        "title": "新年特惠活动",
+        "description": "参与活动即可获得丰厚奖励",
+        "content": "<p>活动详细内容HTML格式</p>",
+        "coverImage": "https://example.com/activity/cover1.jpg",
+        "startTime": "2025-01-01T00:00:00Z",
+        "endTime": "2025-01-31T23:59:59Z",
+        "status": "active",
+        "createdAt": "2025-01-01T00:00:00Z",
+        "updatedAt": "2025-01-02T00:00:00Z"
+      }
+    ],
+    "announcements": [
+      {
+        "id": 1,
+        "title": "系统升级公告",
+        "content": "<p>系统将于今晚进行维护升级</p>",
+        "type": "latest",
+        "isImportant": true,
+        "publishTime": "2025-01-05T10:00:00Z",
+        "createdAt": "2025-01-05T09:00:00Z",
+        "updatedAt": "2025-01-05T10:00:00Z"
+      }
+    ]
+  },
+  "message": "获取成功"
+}
+```
+
+### 字段说明
+
+#### carousels（轮播图）
+
+| 字段 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| id | number/string | 是 | 轮播图ID |
+| imageUrl | string | 是 | 图片URL |
+| link | string | 否 | 点击跳转链接 |
+| title | string | 否 | 轮播图标题 |
+
+#### activities（活动）
+
+| 字段 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| id | number/string | 是 | 活动ID |
+| title | string | 是 | 活动标题 |
+| description | string | 是 | 活动简介 |
+| content | string | 是 | 活动详细内容（HTML格式） |
+| coverImage | string | 否 | 封面图URL |
+| startTime | string | 否 | 开始时间（ISO 8601格式） |
+| endTime | string | 否 | 结束时间（ISO 8601格式） |
+| status | string | 是 | 状态：active(进行中), inactive(未开始), expired(已结束) |
+| createdAt | string | 是 | 创建时间（ISO 8601格式） |
+| updatedAt | string | 否 | 更新时间（ISO 8601格式） |
+
+#### announcements（公告）
+
+| 字段 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| id | number/string | 是 | 公告ID |
+| title | string | 是 | 公告标题 |
+| content | string | 是 | 公告内容（HTML格式） |
+| type | string | 是 | 类型：latest(最新公告), history(历史公告) |
+| isImportant | boolean | 否 | 是否重要公告（显示警告图标） |
+| publishTime | string | 是 | 发布时间（ISO 8601格式） |
+| createdAt | string | 是 | 创建时间（ISO 8601格式） |
+| updatedAt | string | 否 | 更新时间（ISO 8601格式） |
+
+---
+
+## 2. 获取活动详情
+
+### 接口信息
+
+- **路径**: `GET /announcement/activity/{id}`
+- **描述**: 获取单个活动的详细信息
+- **权限**: 无需登录即可访问
+
+### 请求参数
+
+| 参数 | 位置 | 类型 | 必填 | 说明 |
+|------|------|------|------|------|
+| id | path | string/number | 是 | 活动ID |
+
+### 响应数据结构
+
+```typescript
+{
+  "success": true,
+  "data": {
+    "id": 1,
+    "title": "新年特惠活动",
+    "description": "参与活动即可获得丰厚奖励",
+    "content": "<p>活动详细内容HTML格式...</p>",
+    "coverImage": "https://example.com/activity/cover1.jpg",
+    "startTime": "2025-01-01T00:00:00Z",
+    "endTime": "2025-01-31T23:59:59Z",
+    "status": "active",
+    "createdAt": "2025-01-01T00:00:00Z",
+    "updatedAt": "2025-01-02T00:00:00Z",
+    "views": 1234,
+    "participantCount": 567
+  },
+  "message": "获取成功"
+}
+```
+
+### 额外字段说明
+
+| 字段 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| views | number | 否 | 浏览次数 |
+| participantCount | number | 否 | 参与人数 |
+
+---
+
+## 3. 获取公告详情
+
+### 接口信息
+
+- **路径**: `GET /announcement/detail/{id}`
+- **描述**: 获取单个公告的详细信息
+- **权限**: 无需登录即可访问
+
+### 请求参数
+
+| 参数 | 位置 | 类型 | 必填 | 说明 |
+|------|------|------|------|------|
+| id | path | string/number | 是 | 公告ID |
+
+### 响应数据结构
+
+```typescript
+{
+  "success": true,
+  "data": {
+    "id": 1,
+    "title": "系统升级公告",
+    "content": "<p>系统将于今晚进行维护升级，预计时间为晚上10点至次日凌晨2点...</p>",
+    "type": "latest",
+    "isImportant": true,
+    "publishTime": "2025-01-05T10:00:00Z",
+    "createdAt": "2025-01-05T09:00:00Z",
+    "updatedAt": "2025-01-05T10:00:00Z",
+    "views": 5678
+  },
+  "message": "获取成功"
+}
+```
+
+### 额外字段说明
+
+| 字段 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| views | number | 否 | 浏览次数 |
+
+---
+
+## 错误响应
+
+所有接口在出错时应返回统一的错误格式：
+
+```typescript
+{
+  "success": false,
+  "data": null,
+  "message": "错误描述信息",
+  "errorCode": "ERROR_CODE" // 可选的错误码
+}
+```
+
+### 常见错误码
+
+| 状态码 | 说明 |
+|--------|------|
+| 404 | 资源不存在 |
+| 500 | 服务器内部错误 |
+
+---
+
+## 注意事项
+
+1. **时间格式**: 所有时间字段使用 ISO 8601 格式（如：`2025-01-05T10:00:00Z`）
+2. **HTML内容**: content 字段包含HTML格式的内容，前端会进行渲染，请确保内容安全，防止XSS攻击
+3. **图片URL**: 所有图片URL应该是完整的可访问地址
+4. **状态管理**: 活动状态（active/inactive/expired）应该根据当前时间和活动时间自动判断
+5. **公告分类**: 公告的 type 字段（latest/history）可以根据发布时间自动分类，或由管理员手动指定
+6. **浏览统计**: views 字段建议在每次访问详情页时自动递增
+
+---
+
+## 前端状态管理
+
+前端使用 Pinia 管理公告弹窗的显示状态：
+
+- **今日关闭**: 24小时内不再显示
+- **本周关闭**: 7天内不再显示
+- **关闭公告**: 永久不再显示（除非用户清除浏览器缓存）
+
+这些状态存储在浏览器的 localStorage 中，不需要后端接口支持。

Yi.Ai.Vue3/系统公告功能使用说明.md

@@ -0,0 +1,337 @@
+# 系统公告功能使用说明
+
+## 功能概述
+
+本次更新为项目添加了完整的系统公告弹窗功能，包括活动展示、公告通知、轮播图等。用户可以通过不同的关闭选项来控制弹窗的显示频率。
+
+---
+
+## 已实现的功能
+
+### 1. 系统公告弹窗
+
+- **自动弹出**: 用户进入应用时自动检测并显示公告弹窗
+- **手动打开**: 右上角有公告按钮（铃铛图标），随时可以点击打开公告弹窗
+- **未读提示**: 公告按钮上显示红色徽章，标识最新公告数量
+- **Tab切换**: 支持"活动"和"公告"两个Tab页面
+- **关闭选项**: 提供三种关闭方式
+  - 今日关闭：24小时内不再自动弹出，但仍可通过按钮手动打开
+  - 本周关闭：7天内不再自动弹出，但仍可通过按钮手动打开
+  - 关闭公告：永久不再自动弹出（除非清除浏览器缓存），但仍可通过按钮手动打开
+
+### 2. 活动页面
+
+- **轮播图**: 顶部展示活动轮播图，支持自动播放
+- **活动列表**: 显示所有活动，包含标题、简介、状态标签
+- **状态标识**:
+  - 进行中：绿色标签
+  - 已结束：灰色标签
+- **查看详情**: 点击可跳转到活动详情页面
+
+### 3. 公告页面
+
+- **最新公告**: 顶部显示最新发布的公告，带蓝色边框高亮
+- **重要标识**: 重要公告显示警告图标
+- **历史公告**: 使用时间线形式展示历史公告
+- **查看详情**: 点击可跳转到公告详情页面
+
+### 4. 详情页面
+
+#### 活动详情页面
+- 活动标题和状态
+- 浏览次数和参与人数
+- 活动封面图
+- 活动简介
+- 活动时间信息（开始、结束、发布、更新时间）
+- 完整的活动内容（支持HTML格式）
+
+#### 公告详情页面
+- 公告标题和类型
+- 重要公告标识（带动画效果）
+- 浏览次数
+- 发布时间
+- 完整的公告内容（支持HTML格式）
+- 创建和更新时间
+
+---
+
+## 文件结构
+
+```
+Yi.Ai.Vue3/
+├── src/
+│   ├── api/
+│   │   └── announcement/
+│   │       ├── index.ts          # API接口定义
+│   │       └── types.ts          # TypeScript类型定义
+│   ├── components/
+│   │   └── SystemAnnouncementDialog/
+│   │       └── index.vue         # 系统公告弹窗组件
+│   ├── layouts/
+│   │   └── components/
+│   │       └── Header/
+│   │           ├── components/
+│   │           │   └── AnnouncementBtn.vue  # 公告按钮组件（新增）
+│   │           └── index.vue     # Header组件（已更新）
+│   ├── pages/
+│   │   ├── activity/
+│   │   │   └── detail.vue        # 活动详情页面
+│   │   └── announcement/
+│   │       └── detail.vue        # 公告详情页面
+│   ├── stores/
+│   │   └── modules/
+│   │       └── announcement.ts   # 公告状态管理
+│   ├── data/
+│   │   └── mockAnnouncementData.ts  # 模拟数据
+│   ├── routers/
+│   │   └── modules/
+│   │       └── staticRouter.ts   # 路由配置（已更新）
+│   ├── utils/
+│   │   └── request.ts            # HTTP请求工具（已修复Pinia初始化问题）
+│   └── App.vue                   # 主应用文件（已更新）
+├── 系统公告API接口文档.md          # API接口文档
+└── 系统公告功能使用说明.md          # 本文档
+```
+
+---
+
+## 如何使用
+
+### 开发环境测试（使用模拟数据）
+
+1. **导入模拟数据**
+
+在 `src/App.vue` 中临时替换API调用：
+
+```typescript
+// 导入模拟数据函数
+import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData'
+
+// 替换 getSystemAnnouncements() 为 getMockSystemAnnouncements()
+onMounted(async () => {
+  if (announcementStore.shouldShowDialog) {
+    try {
+      // 使用模拟数据
+      const res = await getMockSystemAnnouncements()
+      if (res.data) {
+        announcementStore.setAnnouncementData(res.data)
+        announcementStore.openDialog()
+      }
+    }
+    catch (error) {
+      console.error('获取系统公告失败:', error)
+    }
+  }
+})
+```
+
+2. **同样的方式更新详情页面**
+
+在 `src/pages/activity/detail.vue` 和 `src/pages/announcement/detail.vue` 中也可以使用模拟数据函数进行测试。
+
+3. **启动开发服务器**
+
+```bash
+npm run dev
+```
+
+4. **测试功能**
+
+- 打开浏览器访问应用
+- 应该会自动弹出系统公告弹窗
+- 测试不同的关闭选项
+- 点击"查看详情"按钮测试跳转
+
+### 生产环境部署（使用真实API）
+
+1. **后端实现API接口**
+
+参考 `系统公告API接口文档.md` 实现以下三个接口：
+- `GET /announcement/system` - 获取系统公告数据
+- `GET /announcement/activity/{id}` - 获取活动详情
+- `GET /announcement/detail/{id}` - 获取公告详情
+
+2. **确认API调用**
+
+确保 `src/App.vue` 和详情页面使用的是真实的API函数（默认配置）：
+- `getSystemAnnouncements()`
+- `getActivityDetail(id)`
+- `getAnnouncementDetail(id)`
+
+3. **构建部署**
+
+```bash
+npm run build
+```
+
+---
+
+## 自定义配置
+
+### 修改关闭时间
+
+在 `src/stores/modules/announcement.ts` 中修改时间计算逻辑：
+
+```typescript
+const shouldShowDialog = computed(() => {
+  // ... 现有代码
+
+  if (closeType.value === 'today') {
+    // 修改为其他时间，如12小时
+    return elapsed > 12 * 60 * 60 * 1000
+  }
+
+  if (closeType.value === 'week') {
+    // 修改为其他时间，如3天
+    return elapsed > 3 * 24 * 60 * 60 * 1000
+  }
+
+  // ... 现有代码
+})
+```
+
+### 修改弹窗样式
+
+在 `src/components/SystemAnnouncementDialog/index.vue` 中修改样式：
+
+- 修改弹窗宽度：`width="700px"` 改为其他值
+- 修改轮播图高度：`height="250px"` 改为其他值
+- 修改CSS样式：在 `<style>` 部分进行调整
+
+### 添加新的Tab页
+
+1. 在弹窗组件中添加新的 `<el-tab-pane>`
+2. 添加对应的数据类型定义
+3. 更新API接口和store
+
+---
+
+## 管理功能
+
+### 手动触发弹窗
+
+用户可以通过以下方式打开公告弹窗：
+
+1. **点击右上角公告按钮**（推荐）
+   - 位于Header右侧的铃铛图标
+   - 显示未读公告数量的红色徽章
+   - 点击即可打开公告弹窗
+
+2. **在代码中手动调用**
+
+在任何组件中可以手动打开公告弹窗：
+
+```typescript
+import { useAnnouncementStore } from '@/stores'
+
+const announcementStore = useAnnouncementStore()
+
+// 打开弹窗
+announcementStore.openDialog()
+```
+
+### 重置关闭状态
+
+如果需要重置用户的关闭状态（例如有重要公告需要强制显示）：
+
+```typescript
+// 重置关闭状态
+announcementStore.resetCloseStatus()
+
+// 然后重新打开弹窗
+announcementStore.openDialog()
+```
+
+### 查看当前状态
+
+```typescript
+const announcementStore = useAnnouncementStore()
+
+// 查看是否应该显示弹窗
+console.log(announcementStore.shouldShowDialog)
+
+// 查看关闭类型
+console.log(announcementStore.closeType)
+
+// 查看关闭时间
+console.log(announcementStore.closedAt)
+```
+
+---
+
+## 注意事项
+
+1. **XSS防护**: 公告和活动内容使用 `v-html` 渲染，请确保后端返回的HTML内容是安全的，建议进行内容过滤和转义。
+
+2. **图片资源**: 轮播图和封面图需要可访问的URL地址，建议使用CDN。
+
+3. **性能优化**:
+   - 弹窗数据会在应用启动时加载，确保接口响应快速
+   - 考虑添加加载状态和错误处理
+
+4. **响应式设计**: 当前设计主要针对PC端，如需移动端适配，需要调整样式和布局。
+
+5. **浏览器兼容**: 使用了现代CSS特性，建议在主流现代浏览器中使用。
+
+6. **状态持久化**: 关闭状态存储在 localStorage 中，清除浏览器缓存会重置状态。
+
+---
+
+## 后续优化建议
+
+1. **数据统计**: 添加打点统计，记录用户查看公告的行为
+2. **推送通知**: 对重要公告支持浏览器推送通知
+3. **多语言支持**: 支持国际化（i18n）
+4. **个性化推荐**: 根据用户兴趣推荐相关活动
+5. **评论功能**: 允许用户对活动和公告进行评论
+6. **分享功能**: 支持将活动和公告分享到社交媒体
+7. **搜索功能**: 添加公告和活动的搜索功能
+8. **管理后台**: 开发管理后台用于创建和管理公告活动
+
+---
+
+## 技术栈
+
+- **Vue 3.5.17**: 核心框架，使用 Composition API
+- **TypeScript**: 类型安全
+- **Element Plus**: UI组件库
+- **Pinia**: 状态管理，支持持久化
+- **Vue Router 4**: 路由管理
+- **Vite**: 构建工具
+
+---
+
+## 问题排查
+
+### 弹窗不显示
+
+1. 检查 `announcementStore.shouldShowDialog` 的值
+2. 检查API是否返回数据
+3. 查看浏览器控制台是否有错误
+4. 尝试调用 `announcementStore.resetCloseStatus()` 重置状态
+
+### 详情页面404
+
+1. 确认路由配置是否正确
+2. 检查路由名称是否匹配
+3. 确认ID参数是否正确传递
+
+### 样式显示异常
+
+1. 检查Element Plus是否正确安装
+2. 确认 SCSS 预处理器是否配置
+3. 清除浏览器缓存重试
+
+---
+
+## 联系支持
+
+如有问题或建议，请通过以下方式联系：
+
+- GitHub Issues
+- 项目文档
+- 技术支持团队
+
+---
+
+**祝使用愉快！**

Yi.Ai.Vue3/系统公告功能更新日志.md

@@ -0,0 +1,177 @@
+# 系统公告功能更新日志
+
+## 2025-01-05 - 完整功能实现
+
+### 新增功能
+
+#### 1. 系统公告弹窗
+- ✅ 自动弹出机制：应用启动时自动检测并显示
+- ✅ 双Tab设计：活动页和公告页分离展示
+- ✅ 三种关闭模式：今日关闭、本周关闭、永久关闭
+- ✅ 状态持久化：关闭状态保存到localStorage
+
+#### 2. 活动展示
+- ✅ 轮播图组件：支持多图轮播、自动播放
+- ✅ 活动列表：展示活动标题、简介、状态
+- ✅ 状态标签：进行中（绿色）、已结束（灰色）
+- ✅ 活动详情页：完整的活动信息展示
+
+#### 3. 公告展示
+- ✅ 最新公告区：高亮显示最新发布的公告
+- ✅ 重要标识：重要公告显示警告图标（带动画）
+- ✅ 历史公告：时间线形式展示历史公告
+- ✅ 公告详情页：完整的公告内容展示
+
+#### 4. 右上角公告入口（新增）
+- ✅ 铃铛图标按钮：位于Header右侧
+- ✅ 未读徽章：显示最新公告数量的红色徽章
+- ✅ 随时可访问：即使关闭自动弹窗后也能手动打开
+- ✅ 悬停效果：鼠标悬停时图标变色
+
+### 技术实现
+
+#### API接口（3个）
+1. `GET /announcement/system` - 获取系统公告数据
+2. `GET /announcement/activity/{id}` - 获取活动详情
+3. `GET /announcement/detail/{id}` - 获取公告详情
+
+#### 核心组件（3个）
+1. `SystemAnnouncementDialog` - 系统公告弹窗
+2. `AnnouncementBtn` - 公告按钮
+3. 活动和公告详情页
+
+#### 状态管理
+- Pinia Store：`announcementStore`
+- 持久化：localStorage（仅存储关闭状态）
+- 响应式数据：轮播图、活动、公告列表
+
+#### 路由配置
+- `/activity/:id` - 活动详情
+- `/announcement/:id` - 公告详情
+
+### 文件变更
+
+#### 新增文件（11个）
+```
+src/api/announcement/index.ts
+src/api/announcement/types.ts
+src/stores/modules/announcement.ts
+src/components/SystemAnnouncementDialog/index.vue
+src/layouts/components/Header/components/AnnouncementBtn.vue
+src/pages/activity/detail.vue
+src/pages/announcement/detail.vue
+src/data/mockAnnouncementData.ts
+系统公告API接口文档.md
+系统公告功能使用说明.md
+系统公告功能更新日志.md (本文件)
+```
+
+#### 修改文件（5个）
+```
+src/api/index.ts - 导出announcement模块
+src/stores/index.ts - 导出announcementStore
+src/routers/modules/staticRouter.ts - 添加详情页路由
+src/layouts/components/Header/index.vue - 添加公告按钮
+src/utils/request.ts - 修复Pinia初始化问题
+src/App.vue - 集成系统公告弹窗
+```
+
+### 问题修复
+
+#### 1. Pinia初始化错误
+**问题**：`getActivePinia() was called but there was no active Pinia`
+
+**原因**：在 `request.ts` 的 `jwtPlugin()` 函数中，在模块加载时就调用了 `useUserStore()`，此时 Pinia 还未初始化。
+
+**解决方案**：将 `useUserStore()` 的调用从函数开始移到各个钩子函数内部（`beforeRequest`、`afterResponse`、`onError`），确保只在实际请求时才调用 store。
+
+#### 2. storeToRefs未定义
+**问题**：`storeToRefs is not defined`
+
+**原因**：在 `SystemAnnouncementDialog/index.vue` 中使用了 `storeToRefs` 但忘记导入。
+
+**解决方案**：添加 `import { storeToRefs } from 'pinia'`
+
+### 功能亮点
+
+1. **智能弹窗机制**
+   - 首次访问自动弹出
+   - 支持三种关闭模式
+   - 即使关闭后仍可通过按钮手动打开
+
+2. **优雅的UI设计**
+   - 响应式布局
+   - 平滑过渡动画
+   - Element Plus组件库
+   - SCSS样式编写
+
+3. **完善的类型定义**
+   - TypeScript类型安全
+   - 接口类型定义完整
+   - IDE智能提示友好
+
+4. **灵活的数据来源**
+   - 支持真实API接口
+   - 提供模拟数据用于测试
+   - 易于切换
+
+5. **用户友好**
+   - 右上角固定入口
+   - 未读徽章提示
+   - 查看详情便捷
+
+### 待优化项
+
+1. **移动端适配**
+   - 当前主要针对PC端设计
+   - 需要优化移动端显示效果
+
+2. **国际化支持**
+   - 添加i18n多语言支持
+
+3. **性能优化**
+   - 图片懒加载
+   - 虚拟滚动（公告列表很长时）
+
+4. **功能扩展**
+   - 公告搜索功能
+   - 评论功能
+   - 分享到社交媒体
+   - 推送通知
+
+5. **数据统计**
+   - 浏览量统计
+   - 用户行为分析
+   - 点击率跟踪
+
+### 使用指南
+
+详细使用说明请查看：
+- 📖 [系统公告功能使用说明.md](./系统公告功能使用说明.md)
+- 📝 [系统公告API接口文档.md](./系统公告API接口文档.md)
+
+### 开发测试
+
+使用模拟数据进行测试：
+
+```typescript
+// 在 src/App.vue 中
+import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData'
+
+// 使用模拟数据
+const res = await getMockSystemAnnouncements()
+```
+
+### 生产部署
+
+1. 后端实现三个API接口
+2. 确认前端使用真实API（默认配置）
+3. 执行构建命令：`npm run build`
+4. 部署dist目录
+
+---
+
+**开发团队**：Claude Code
+**版本**：v1.0.0
+**日期**：2025-01-05
+**状态**：✅ 已完成并测试