From cfefceaf28a5bf9c0f8abf9a2eb4237190e6a611 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= <shiyue@hdzxbj.com>
Date: Tue, 6 Jan 2026 14:16:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=B2=E6=9B=B4=E6=96=B0=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加图标：按钮现在包含一个旋转图标 (fa-rotate)。
加载状态：点击同步时，图标会旋转，按钮文字变为“同步中”并禁用。
完成提示：同步完成后，会在按钮下方显示“同步完成”的绿色提示文字，并在3秒后自动消失。
---
 index.html | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 1c4bca4..1c4e866 100644
--- a/index.html
+++ b/index.html
@@ -366,6 +366,24 @@
         );
 
         const SideDrawer = ({ isOpen, onClose, view, setView, quality, setQuality, onClearCache, syncToken, setSyncToken, onSyncNow }) => {
+            const [isSyncing, setIsSyncing] = useState(false);
+            const [syncMsg, setSyncMsg] = useState('');
+
+            const handleSyncClick = async () => {
+                if (!syncToken || isSyncing) return;
+                setIsSyncing(true);
+                setSyncMsg('');
+                try {
+                    await onSyncNow();
+                    setSyncMsg('同步完成');
+                    setTimeout(() => setSyncMsg(''), 3000);
+                } catch (e) {
+                    setSyncMsg('同步失败');
+                } finally {
+                    setIsSyncing(false);
+                }
+            };
+
             if (!isOpen) return null;
 
             return (
@@ -423,13 +441,18 @@
                                         className="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm text-white w-full focus:outline-none focus:border-primary"
                                     />
                                     <button
-                                        onClick={onSyncNow}
-                                        className="bg-primary text-black px-3 py-2 rounded-lg text-sm font-bold whitespace-nowrap"
+                                        onClick={handleSyncClick}
+                                        disabled={isSyncing}
+                                        className="bg-primary text-black px-3 py-2 rounded-lg text-sm font-bold whitespace-nowrap flex items-center gap-2 disabled:opacity-50"
                                     >
-                                        同步
+                                        <Icon name="rotate" className={isSyncing ? "animate-spin" : ""} />
+                                        {isSyncing ? '同步中' : '同步'}
                                     </button>
                                 </div>
-                                <p className="text-xs text-gray-500 mt-1">使用相同的密钥在多端同步收藏列表</p>
+                                <div className="flex justify-between items-center mt-1">
+                                    <p className="text-xs text-gray-500">使用相同的密钥在多端同步收藏列表</p>
+                                    {syncMsg && <span className="text-xs text-primary font-bold animate-[fadeIn_0.3s]">{syncMsg}</span>}
+                                </div>
                             </div>
 
                              <div className="px-4 py-2 mt-2">