diff --git a/web/src/components/settings/personal/cards/CheckinCalendar.jsx b/web/src/components/settings/personal/cards/CheckinCalendar.jsx index 4b6266ee4..d6f57cf69 100644 --- a/web/src/components/settings/personal/cards/CheckinCalendar.jsx +++ b/web/src/components/settings/personal/cards/CheckinCalendar.jsx @@ -53,8 +53,10 @@ const CheckinCalendar = ({ t, status }) => { const [currentMonth, setCurrentMonth] = useState( new Date().toISOString().slice(0, 7), ); - // 折叠状态:如果已签到则默认折叠 - const [isCollapsed, setIsCollapsed] = useState(true); + // 初始加载状态,用于避免折叠状态闪烁 + const [initialLoaded, setInitialLoaded] = useState(false); + // 折叠状态:null 表示未确定(等待首次加载) + const [isCollapsed, setIsCollapsed] = useState(null); // 创建日期到额度的映射,方便快速查找 const checkinRecordsMap = useMemo(() => { @@ -77,17 +79,31 @@ const CheckinCalendar = ({ t, status }) => { // 获取签到状态 const fetchCheckinStatus = async (month) => { + const isFirstLoad = !initialLoaded; setLoading(true); try { const res = await API.get(`/api/user/checkin?month=${month}`); const { success, data, message } = res.data; if (success) { setCheckinData(data); + // 首次加载时,根据签到状态设置折叠状态 + if (isFirstLoad) { + setIsCollapsed(data.stats?.checked_in_today ?? false); + setInitialLoaded(true); + } } else { showError(message || t('获取签到状态失败')); + if (isFirstLoad) { + setIsCollapsed(false); + setInitialLoaded(true); + } } } catch (error) { showError(t('获取签到状态失败')); + if (isFirstLoad) { + setIsCollapsed(false); + setInitialLoaded(true); + } } finally { setLoading(false); } @@ -121,15 +137,6 @@ const CheckinCalendar = ({ t, status }) => { } }, [status?.checkin_enabled, currentMonth]); - // 当签到状态加载完成后,根据是否已签到设置折叠状态 - useEffect(() => { - if (checkinData.stats?.checked_in_today) { - setIsCollapsed(true); - } else { - setIsCollapsed(false); - } - }, [checkinData.stats?.checked_in_today]); - // 如果签到功能未启用,不显示组件 if (!status?.checkin_enabled) { return null; @@ -200,11 +207,13 @@ const CheckinCalendar = ({ t, status }) => { )}