xwl2023/Yi.Framework

Fork 0

Files

Gsh 17337b8d78 fix: 系统公告弹窗前端

2025-11-05 23:12:23 +08:00

4.9 KiB

Raw Blame History

系统公告功能更新日志

2025-01-05 - 完整功能实现

新增功能

1. 系统公告弹窗

✅ 自动弹出机制：应用启动时自动检测并显示
✅ 双Tab设计：活动页和公告页分离展示
✅ 三种关闭模式：今日关闭、本周关闭、永久关闭
✅ 状态持久化：关闭状态保存到localStorage

2. 活动展示

✅ 轮播图组件：支持多图轮播、自动播放
✅ 活动列表：展示活动标题、简介、状态
✅ 状态标签：进行中（绿色）、已结束（灰色）
✅ 活动详情页：完整的活动信息展示

3. 公告展示

✅ 最新公告区：高亮显示最新发布的公告
✅ 重要标识：重要公告显示警告图标（带动画）
✅ 历史公告：时间线形式展示历史公告
✅ 公告详情页：完整的公告内容展示

4. 右上角公告入口（新增）

✅ 铃铛图标按钮：位于Header右侧
✅ 未读徽章：显示最新公告数量的红色徽章
✅ 随时可访问：即使关闭自动弹窗后也能手动打开
✅ 悬停效果：鼠标悬停时图标变色

技术实现

API接口（3个）

GET /announcement/system - 获取系统公告数据
GET /announcement/activity/{id} - 获取活动详情
GET /announcement/detail/{id} - 获取公告详情

核心组件（3个）

SystemAnnouncementDialog - 系统公告弹窗
AnnouncementBtn - 公告按钮
活动和公告详情页

状态管理

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'

功能亮点

智能弹窗机制
- 首次访问自动弹出
- 支持三种关闭模式
- 即使关闭后仍可通过按钮手动打开
优雅的UI设计
- 响应式布局
- 平滑过渡动画
- Element Plus组件库
- SCSS样式编写
完善的类型定义
- TypeScript类型安全
- 接口类型定义完整
- IDE智能提示友好
灵活的数据来源
- 支持真实API接口
- 提供模拟数据用于测试
- 易于切换
用户友好
- 右上角固定入口
- 未读徽章提示
- 查看详情便捷

待优化项

移动端适配
- 当前主要针对PC端设计
- 需要优化移动端显示效果
国际化支持
- 添加i18n多语言支持
性能优化
- 图片懒加载
- 虚拟滚动（公告列表很长时）
功能扩展
- 公告搜索功能
- 评论功能
- 分享到社交媒体
- 推送通知
数据统计
- 浏览量统计
- 用户行为分析
- 点击率跟踪

使用指南

详细使用说明请查看：

📖 系统公告功能使用说明.md
📝 系统公告API接口文档.md

开发测试

使用模拟数据进行测试：

// 在 src/App.vue 中
import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData'

// 使用模拟数据
const res = await getMockSystemAnnouncements()

生产部署

后端实现三个API接口
确认前端使用真实API（默认配置）
执行构建命令：npm run build
部署dist目录

开发团队：Claude Code 版本：v1.0.0 日期：2025-01-05 状态：✅ 已完成并测试

4.9 KiB Raw Blame History Unescape Escape