109 lines
3.6 KiB
JavaScript
109 lines
3.6 KiB
JavaScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import ConfirmModal from './ConfirmModal';
|
|
import { CloseIcon, CloudIcon } from './Icons';
|
|
|
|
export default function CloudConfigModal({ onConfirm, onCancel, type = 'empty' }) {
|
|
const [pendingAction, setPendingAction] = useState(null); // 'local' | 'cloud' | null
|
|
const isConflict = type === 'conflict';
|
|
|
|
const handlePrimaryClick = () => {
|
|
if (isConflict) {
|
|
setPendingAction('local');
|
|
} else {
|
|
onConfirm?.();
|
|
}
|
|
};
|
|
|
|
const handleSecondaryClick = () => {
|
|
if (isConflict) {
|
|
setPendingAction('cloud');
|
|
} else {
|
|
onCancel?.();
|
|
}
|
|
};
|
|
|
|
const handleConfirmModalCancel = () => {
|
|
setPendingAction(null);
|
|
};
|
|
|
|
const handleConfirmModalConfirm = () => {
|
|
if (pendingAction === 'local') {
|
|
onConfirm?.();
|
|
} else if (pendingAction === 'cloud') {
|
|
onCancel?.();
|
|
}
|
|
setPendingAction(null);
|
|
};
|
|
|
|
const confirmTitle =
|
|
pendingAction === 'local'
|
|
? '确认使用本地配置覆盖云端？'
|
|
: '确认使用云端配置覆盖本地？';
|
|
|
|
const confirmMessage =
|
|
pendingAction === 'local'
|
|
? '此操作会将当前本地配置同步到云端，覆盖云端原有配置，且可能无法恢复，请谨慎操作。'
|
|
: '此操作会使用云端配置覆盖当前本地配置，导致本地修改丢失，且可能无法恢复，请谨慎操作。';
|
|
|
|
return (
|
|
<motion.div
|
|
className="modal-overlay"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={isConflict ? "配置冲突提示" : "云端同步提示"}
|
|
onClick={isConflict ? undefined : onCancel}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
className="glass card modal"
|
|
style={{ maxWidth: '420px' }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="title" style={{ marginBottom: 12, justifyContent: 'space-between' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
|
<CloudIcon width="20" height="20" />
|
|
<span>{isConflict ? '发现配置冲突' : '云端暂无配置'}</span>
|
|
</div>
|
|
{!isConflict && (
|
|
<button className="icon-button" onClick={onCancel} style={{ border: 'none', background: 'transparent' }}>
|
|
<CloseIcon width="20" height="20" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<p className="muted" style={{ marginBottom: 20, fontSize: '14px', lineHeight: '1.6' }}>
|
|
{isConflict
|
|
? '检测到本地配置与云端不一致，请选择操作：'
|
|
: '是否将本地配置同步到云端？'}
|
|
</p>
|
|
<div className="row" style={{ flexDirection: 'column', gap: 12 }}>
|
|
<button className="button secondary" onClick={handlePrimaryClick}>
|
|
{isConflict ? '保留本地 (覆盖云端)' : '同步本地到云端'}
|
|
</button>
|
|
<button className="button" onClick={handleSecondaryClick}>
|
|
{isConflict ? '使用云端 (覆盖本地)' : '暂不同步'}
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
{pendingAction && (
|
|
<ConfirmModal
|
|
title={confirmTitle}
|
|
message={confirmMessage}
|
|
onConfirm={handleConfirmModalConfirm}
|
|
onCancel={handleConfirmModalCancel}
|
|
confirmText="确认覆盖"
|
|
icon={<CloudIcon width="20" height="20" />}
|
|
confirmVariant="danger"
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
}
|