xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 系统公告弹窗前端

Browse Source
This commit is contained in:
Gsh
2025-11-05 23:12:23 +08:00
parent 09fb43ee14
commit 17337b8d78
21 changed files with 2729 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Yi.Ai.Vue3/src/App.vue
View File

@@ -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>

31
Yi.Ai.Vue3/src/api/announcement/index.ts Normal file
View File

@@ -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'

51
Yi.Ai.Vue3/src/api/announcement/types.ts Normal file
View File

@@ -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
}

1
Yi.Ai.Vue3/src/api/index.ts
View File

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

598
Yi.Ai.Vue3/src/components/SystemAnnouncementDialog/index.vue Normal file
View File

@@ -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>

301
Yi.Ai.Vue3/src/data/mockAnnouncementData.ts Normal file
View File

@@ -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,
},
}
}

107
Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue Normal file
View File

@@ -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>

2
Yi.Ai.Vue3/src/layouts/components/Header/index.vue
View File

@@ -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>

370
Yi.Ai.Vue3/src/pages/activity/detail.vue Normal file
View File

@@ -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>

364
Yi.Ai.Vue3/src/pages/announcement/detail.vue Normal file
View File

@@ -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>

20
Yi.Ai.Vue3/src/routers/modules/staticRouter.ts
View File

@@ -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',
},
},
],
},
];

1
Yi.Ai.Vue3/src/stores/index.ts
View File

@@ -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';

94
Yi.Ai.Vue3/src/stores/modules/announcement.ts Normal file
View File

@@ -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'],
},
},
)

7
Yi.Ai.Vue3/src/utils/request.ts
View File

@@ -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());
// 弹窗提示