添加首页更新公告并实现关闭后不再显示功能

主要改动:
1. 在首页添加系统更新公告,展示三大更新内容:
   - 新增每日一练功能:系统每天自动生成练习试卷
   - 新增每日一练排行榜:实时查看今日答题排名
   - 调整模拟考试试卷组成:优化题型分布和分数配比
2. 实现公告关闭后持久化记忆功能:
   - 使用 localStorage 存储用户关闭状态
   - 点击关闭后下次访问不再显示
3. 公告样式采用 Ant Design Alert 组件
   - 信息类型提示,带图标
   - 可关闭,用户体验友好
This commit is contained in:
燕陇琪 2025-12-02 00:59:03 +08:00
parent 0074e5978f
commit 2d778364e2

View File

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