添加首页更新公告并实现关闭后不再显示功能
主要改动: 1. 在首页添加系统更新公告,展示三大更新内容: - 新增每日一练功能:系统每天自动生成练习试卷 - 新增每日一练排行榜:实时查看今日答题排名 - 调整模拟考试试卷组成:优化题型分布和分数配比 2. 实现公告关闭后持久化记忆功能: - 使用 localStorage 存储用户关闭状态 - 点击关闭后下次访问不再显示 3. 公告样式采用 Ant Design Alert 组件 - 信息类型提示,带图标 - 可关闭,用户体验友好
This commit is contained in:
parent
0074e5978f
commit
2d778364e2
@ -144,6 +144,12 @@ const Home: React.FC = () => {
|
||||
return saved !== null ? saved === 'true' : false
|
||||
})
|
||||
|
||||
// 公告显示状态
|
||||
const [showAnnouncement, setShowAnnouncement] = useState(() => {
|
||||
const dismissed = localStorage.getItem('announcementDismissed')
|
||||
return dismissed !== 'true'
|
||||
})
|
||||
|
||||
// 加载统计数据
|
||||
const loadStatistics = async () => {
|
||||
try {
|
||||
@ -404,6 +410,12 @@ const Home: React.FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭公告
|
||||
const handleCloseAnnouncement = () => {
|
||||
setShowAnnouncement(false)
|
||||
localStorage.setItem('announcementDismissed', 'true')
|
||||
}
|
||||
|
||||
// 获取用户类型显示文本
|
||||
const getUserTypeText = (type?: string) => {
|
||||
if (!type) return '未设置'
|
||||
@ -560,6 +572,28 @@ const Home: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 更新公告 */}
|
||||
{showAnnouncement && (
|
||||
<Alert
|
||||
message="系统更新公告"
|
||||
description={
|
||||
<div>
|
||||
<p style={{ marginBottom: 8 }}>本次更新内容:</p>
|
||||
<ul style={{ marginBottom: 0, paddingLeft: 20 }}>
|
||||
<li>✨ 新增每日一练功能:系统每天自动生成练习试卷,支持在线答题</li>
|
||||
<li>🏆 新增每日一练排行榜:实时查看今日答题排名,激发学习动力</li>
|
||||
<li>📝 调整模拟考试试卷组成:优化题型分布和分数配比,更贴近实际考试</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
type="info"
|
||||
showIcon
|
||||
closable
|
||||
onClose={handleCloseAnnouncement}
|
||||
style={{ marginBottom: 24 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 题型选择 */}
|
||||
<div className={styles.typeSection}>
|
||||
<Title level={4} className={styles.sectionTitle}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user