🐛 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

web/src/components/layout/NoticeModal.js

@@ -6,89 +6,89 @@ import { marked } from 'marked';
 import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';
 
 const NoticeModal = ({ visible, onClose, isMobile }) => {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
-    const [noticeContent, setNoticeContent] = useState('');
+  const [noticeContent, setNoticeContent] = useState('');
-    const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
 
-    const handleCloseTodayNotice = () => {
+  const handleCloseTodayNotice = () => {
-        const today = new Date().toDateString();
+    const today = new Date().toDateString();
-        localStorage.setItem('notice_close_date', today);
+    localStorage.setItem('notice_close_date', today);
-        onClose();
+    onClose();
-    };
+  };
 
-    const displayNotice = async () => {
+  const displayNotice = async () => {
-        setLoading(true);
+    setLoading(true);
-        try {
+    try {
-            const res = await API.get('/api/notice');
+      const res = await API.get('/api/notice');
-            const { success, message, data } = res.data;
+      const { success, message, data } = res.data;
-            if (success) {
+      if (success) {
-                if (data !== '') {
+        if (data !== '') {
-                    const htmlNotice = marked.parse(data);
+          const htmlNotice = marked.parse(data);
-                    setNoticeContent(htmlNotice);
+          setNoticeContent(htmlNotice);
-                } else {
+        } else {
-                    setNoticeContent('');
+          setNoticeContent('');
-                }
-            } else {
-                showError(message);
-            }
-        } catch (error) {
-            showError(error.message);
-        } finally {
-            setLoading(false);
         }
-    };
+      } else {
+        showError(message);
+      }
+    } catch (error) {
+      showError(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-    useEffect(() => {
+  useEffect(() => {
-        if (visible) {
+    if (visible) {
-            displayNotice();
+      displayNotice();
-        }
+    }
-    }, [visible]);
+  }, [visible]);
 
-    const renderContent = () => {
+  const renderContent = () => {
-        if (loading) {
+    if (loading) {
-            return <div className="py-12"><Empty description={t('加载中...')} /></div>;
+      return <div className="py-12"><Empty description={t('加载中...')} /></div>;
-        }
+    }
 
-        if (!noticeContent) {
+    if (!noticeContent) {
-            return (
+      return (
-                <div className="py-12">
+        <div className="py-12">
-                    <Empty
+          <Empty
-                        image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
+            image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
-                        darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
+            darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
-                        description={t('暂无公告')}
+            description={t('暂无公告')}
-                    />
+          />
-                </div>
+        </div>
-            );
+      );
-        }
+    }
-
-        return (
-            <div
-                dangerouslySetInnerHTML={{ __html: noticeContent }}
-                className="max-h-[60vh] overflow-y-auto pr-2"
-                style={{
-                    scrollbarWidth: 'thin',
-                    scrollbarColor: 'var(--semi-color-tertiary) transparent'
-                }}
-            />
-        );
-    };
 
     return (
-        <Modal
+      <div
-            title={t('系统公告')}
+        dangerouslySetInnerHTML={{ __html: noticeContent }}
-            visible={visible}
+        className="max-h-[60vh] overflow-y-auto pr-2"
-            onCancel={onClose}
+        style={{
-            footer={(
+          scrollbarWidth: 'thin',
-                <div className="flex justify-end">
+          scrollbarColor: 'var(--semi-color-tertiary) transparent'
-                    <Button type='secondary' className='!rounded-full' onClick={handleCloseTodayNotice}>{t('今日关闭')}</Button>
+        }}
-                    <Button type="primary" className='!rounded-full' onClick={onClose}>{t('关闭公告')}</Button>
+      />
-                </div>
-            )}
-            size={isMobile ? 'full-width' : 'large'}
-        >
-            {renderContent()}
-        </Modal>
     );
+  };
+
+  return (
+    <Modal
+      title={t('系统公告')}
+      visible={visible}
+      onCancel={onClose}
+      footer={(
+        <div className="flex justify-end">
+          <Button type='secondary' className='!rounded-full' onClick={handleCloseTodayNotice}>{t('今日关闭')}</Button>
+          <Button type="primary" className='!rounded-full' onClick={onClose}>{t('关闭公告')}</Button>
+        </div>
+      )}
+      size={isMobile ? 'full-width' : 'large'}
+    >
+      {renderContent()}
+    </Modal>
+  );
 };
 
 export default NoticeModal; 

web/src/pages/Home/index.js

@@ -22,11 +22,23 @@ const Home = () => {
   const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
 
   useEffect(() => {
-    const lastCloseDate = localStorage.getItem('notice_close_date');
+    const checkNoticeAndShow = async () => {
-    const today = new Date().toDateString();
+      const lastCloseDate = localStorage.getItem('notice_close_date');
-    if (lastCloseDate !== today) {
+      const today = new Date().toDateString();
-      setNoticeVisible(true);
+      if (lastCloseDate !== today) {
-    }
+        try {
+          const res = await API.get('/api/notice');
+          const { success, data } = res.data;
+          if (success && data && data.trim() !== '') {
+            setNoticeVisible(true);
+          }
+        } catch (error) {
+          console.error('获取公告失败:', error);
+        }
+      }
+    };
+
+    checkNoticeAndShow();
   }, []);
 
   const displayHomePageContent = async () => {