fix: 界面展示同步失败错误提示
This commit is contained in:
59
app/page.jsx
59
app/page.jsx
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user