Skip to content

Commit 0d724af

Browse files
author
Apple\Apple
committed
🐛 fix(home): prevent empty notice modal from auto-showing
Previously, the notice modal would automatically show every day even when the notice content was empty, causing unnecessary user interruption. This commit modifies the logic to: - Check notice content before showing the modal - Only display the modal when notice content exists and is not empty - Add proper error handling to prevent modal showing on API failures - Improve user experience by avoiding empty notice interruptions Changes: - Modified useEffect in Home component to fetch notice content first - Added API call to /api/notice before setting noticeVisible state - Added try-catch block for graceful error handling - Only show modal when notice data is truthy and non-empty after trimming
1 parent 4da5e74 commit 0d724af

File tree

2 files changed

+91
-79
lines changed

2 files changed

+91
-79
lines changed

‎web/src/components/layout/NoticeModal.js‎

Lines changed: 74 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -6,89 +6,89 @@ import { marked } from 'marked';
66
import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';
77

88
const NoticeModal = ({ visible, onClose, isMobile }) => {
9-
const { t } = useTranslation();
10-
const [noticeContent, setNoticeContent] = useState('');
11-
const [loading, setLoading] = useState(false);
9+
const { t } = useTranslation();
10+
const [noticeContent, setNoticeContent] = useState('');
11+
const [loading, setLoading] = useState(false);
1212

13-
const handleCloseTodayNotice = () => {
14-
const today = new Date().toDateString();
15-
localStorage.setItem('notice_close_date', today);
16-
onClose();
17-
};
13+
const handleCloseTodayNotice = () => {
14+
const today = new Date().toDateString();
15+
localStorage.setItem('notice_close_date', today);
16+
onClose();
17+
};
1818

19-
const displayNotice = async () => {
20-
setLoading(true);
21-
try {
22-
const res = await API.get('/api/notice');
23-
const { success, message, data } = res.data;
24-
if (success) {
25-
if (data !== '') {
26-
const htmlNotice = marked.parse(data);
27-
setNoticeContent(htmlNotice);
28-
} else {
29-
setNoticeContent('');
30-
}
31-
} else {
32-
showError(message);
33-
}
34-
} catch (error) {
35-
showError(error.message);
36-
} finally {
37-
setLoading(false);
19+
const displayNotice = async () => {
20+
setLoading(true);
21+
try {
22+
const res = await API.get('/api/notice');
23+
const { success, message, data } = res.data;
24+
if (success) {
25+
if (data !== '') {
26+
const htmlNotice = marked.parse(data);
27+
setNoticeContent(htmlNotice);
28+
} else {
29+
setNoticeContent('');
3830
}
39-
};
31+
} else {
32+
showError(message);
33+
}
34+
} catch (error) {
35+
showError(error.message);
36+
} finally {
37+
setLoading(false);
38+
}
39+
};
4040

41-
useEffect(() => {
42-
if (visible) {
43-
displayNotice();
44-
}
45-
}, [visible]);
41+
useEffect(() => {
42+
if (visible) {
43+
displayNotice();
44+
}
45+
}, [visible]);
4646

47-
const renderContent = () => {
48-
if (loading) {
49-
return <div className="py-12"><Empty description={t('加载中...')} /></div>;
50-
}
47+
const renderContent = () => {
48+
if (loading) {
49+
return <div className="py-12"><Empty description={t('加载中...')} /></div>;
50+
}
5151

52-
if (!noticeContent) {
53-
return (
54-
<div className="py-12">
55-
<Empty
56-
image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
57-
darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
58-
description={t('暂无公告')}
59-
/>
60-
</div>
61-
);
62-
}
63-
64-
return (
65-
<div
66-
dangerouslySetInnerHTML={{ __html: noticeContent }}
67-
className="max-h-[60vh] overflow-y-auto pr-2"
68-
style={{
69-
scrollbarWidth: 'thin',
70-
scrollbarColor: 'var(--semi-color-tertiary) transparent'
71-
}}
72-
/>
73-
);
74-
};
52+
if (!noticeContent) {
53+
return (
54+
<div className="py-12">
55+
<Empty
56+
image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
57+
darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
58+
description={t('暂无公告')}
59+
/>
60+
</div>
61+
);
62+
}
7563

7664
return (
77-
<Modal
78-
title={t('系统公告')}
79-
visible={visible}
80-
onCancel={onClose}
81-
footer={(
82-
<div className="flex justify-end">
83-
<Button type='secondary' className='!rounded-full' onClick={handleCloseTodayNotice}>{t('今日关闭')}</Button>
84-
<Button type="primary" className='!rounded-full' onClick={onClose}>{t('关闭公告')}</Button>
85-
</div>
86-
)}
87-
size={isMobile ? 'full-width' : 'large'}
88-
>
89-
{renderContent()}
90-
</Modal>
65+
<div
66+
dangerouslySetInnerHTML={{ __html: noticeContent }}
67+
className="max-h-[60vh] overflow-y-auto pr-2"
68+
style={{
69+
scrollbarWidth: 'thin',
70+
scrollbarColor: 'var(--semi-color-tertiary) transparent'
71+
}}
72+
/>
9173
);
74+
};
75+
76+
return (
77+
<Modal
78+
title={t('系统公告')}
79+
visible={visible}
80+
onCancel={onClose}
81+
footer={(
82+
<div className="flex justify-end">
83+
<Button type='secondary' className='!rounded-full' onClick={handleCloseTodayNotice}>{t('今日关闭')}</Button>
84+
<Button type="primary" className='!rounded-full' onClick={onClose}>{t('关闭公告')}</Button>
85+
</div>
86+
)}
87+
size={isMobile ? 'full-width' : 'large'}
88+
>
89+
{renderContent()}
90+
</Modal>
91+
);
9292
};
9393

9494
export default NoticeModal;

‎web/src/pages/Home/index.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,23 @@ const Home = () => {
2222
const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
2323

2424
useEffect(() => {
25-
const lastCloseDate = localStorage.getItem('notice_close_date');
26-
const today = new Date().toDateString();
27-
if (lastCloseDate !== today) {
28-
setNoticeVisible(true);
29-
}
25+
const checkNoticeAndShow = async () => {
26+
const lastCloseDate = localStorage.getItem('notice_close_date');
27+
const today = new Date().toDateString();
28+
if (lastCloseDate !== today) {
29+
try {
30+
const res = await API.get('/api/notice');
31+
const { success, data } = res.data;
32+
if (success && data && data.trim() !== '') {
33+
setNoticeVisible(true);
34+
}
35+
} catch (error) {
36+
console.error('获取公告失败:', error);
37+
}
38+
}
39+
};
40+
41+
checkNoticeAndShow();
3042
}, []);
3143

3244
const displayHomePageContent = async () => {

0 commit comments

Comments
 (0)