fix: 界面展示同步失败错误提示

This commit is contained in:
hzm
2026-02-08 05:44:56 +08:00
parent e7b28dfb30
commit fe5577265a

View File

@@ -2174,6 +2174,18 @@ export default function HomePage() {
// 成功提示弹窗 // 成功提示弹窗
const [successModal, setSuccessModal] = useState({ open: false, message: '' }); const [successModal, setSuccessModal] = useState({ open: false, message: '' });
// 轻提示 (Toast)
const [toast, setToast] = useState({ show: false, message: '', type: 'info' }); // type: 'info' | 'success' | 'error'
const toastTimeoutRef = useRef(null);
const showToast = (message, type = 'info') => {
if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
setToast({ show: true, message, type });
toastTimeoutRef.current = setTimeout(() => {
setToast((prev) => ({ ...prev, show: false }));
}, 3000);
};
const [updateModalOpen, setUpdateModalOpen] = useState(false); const [updateModalOpen, setUpdateModalOpen] = useState(false);
const [cloudConfigModal, setCloudConfigModal] = useState({ open: false, userId: null }); const [cloudConfigModal, setCloudConfigModal] = useState({ open: false, userId: null });
const syncDebounceRef = useRef(null); const syncDebounceRef = useRef(null);
@@ -3363,12 +3375,14 @@ export default function HomePage() {
if (updateError) throw updateError; if (updateError) throw updateError;
localStorage.setItem('localUpdatedAt', now); localStorage.setItem('localUpdatedAt', now);
showToast(`同步云端配置异常`, 'error');
if (showTip) { if (showTip) {
setSuccessModal({ open: true, message: '已同步云端配置' }); setSuccessModal({ open: true, message: '已同步云端配置' });
} }
} catch (e) { } catch (e) {
console.error('同步云端配置异常', e); console.error('同步云端配置异常', e);
showToast(`同步云端配置异常:${e}`, 'error');
} }
}; };
@@ -5007,6 +5021,51 @@ export default function HomePage() {
</div> </div>
</div> </div>
)} )}
{/* 全局轻提示 Toast */}
<AnimatePresence>
{toast.show && (
<motion.div
initial={{ opacity: 0, y: -20, x: '-50%' }}
animate={{ opacity: 1, y: 0, x: '-50%' }}
exit={{ opacity: 0, y: -20, x: '-50%' }}
style={{
position: 'fixed',
top: 24,
left: '50%',
zIndex: 9999,
padding: '10px 20px',
background: toast.type === 'error' ? 'rgba(239, 68, 68, 0.9)' :
toast.type === 'success' ? 'rgba(34, 197, 94, 0.9)' :
'rgba(30, 41, 59, 0.9)',
color: '#fff',
borderRadius: '8px',
backdropFilter: 'blur(8px)',
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
fontSize: '14px',
fontWeight: 500,
display: 'flex',
alignItems: 'center',
gap: 8,
maxWidth: '90vw',
whiteSpace: 'nowrap'
}}
>
{toast.type === 'error' && (
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
<path d="M12 8v4M12 16h.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
</svg>
)}
{toast.type === 'success' && (
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
)}
{toast.message}
</motion.div>
)}
</AnimatePresence>
</div> </div>
); );
} }