fix: 系统公告弹窗前端

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

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