From 7953b906a556855efd3a5ccfe7ee16ed7f0afd8a Mon Sep 17 00:00:00 2001
From: hzm <934585316@qq.com>
Date: Thu, 12 Mar 2026 20:29:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E6=97=B6=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E8=A6=86=E7=9B=96=E6=93=8D=E4=BD=9C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=8C=E6=AC=A1=E7=A1=AE=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/CloudConfigModal.jsx | 58 ++++++++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 2 deletions(-)

diff --git a/app/components/CloudConfigModal.jsx b/app/components/CloudConfigModal.jsx
index da39be0..f0cdc1c 100644
--- a/app/components/CloudConfigModal.jsx
+++ b/app/components/CloudConfigModal.jsx
@@ -1,10 +1,53 @@
 '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"
@@ -41,14 +84,25 @@ export default function CloudConfigModal({ onConfirm, onCancel, type = 'empty' }
             : '是否将本地配置同步到云端？'}
         </p>
         <div className="row" style={{ flexDirection: 'column', gap: 12 }}>
-          <button className="button secondary" onClick={onConfirm}>
+          <button className="button secondary" onClick={handlePrimaryClick}>
             {isConflict ? '保留本地 (覆盖云端)' : '同步本地到云端'}
           </button>
-          <button className="button" onClick={onCancel}>
+          <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>
   );
 }