From 97d05ce612da907b1ba6bcf9d8b979bea32fa891 Mon Sep 17 00:00:00 2001
From: Haitao Pan <manbuzhe2009@qq.com>
Date: Fri, 6 Feb 2026 12:19:28 +0800
Subject: [PATCH] feat: Add explicit Apply button to Sandbox Node Binding UI

---
 .../components/SandboxNodeBindingPanel.tsx    | 139 +++++++++++-------
 1 file changed, 88 insertions(+), 51 deletions(-)

diff --git a/src/modules/extensions/builtin/user-center/management/components/SandboxNodeBindingPanel.tsx b/src/modules/extensions/builtin/user-center/management/components/SandboxNodeBindingPanel.tsx
index 4628d5d..230ab77 100644
--- a/src/modules/extensions/builtin/user-center/management/components/SandboxNodeBindingPanel.tsx
+++ b/src/modules/extensions/builtin/user-center/management/components/SandboxNodeBindingPanel.tsx
@@ -44,65 +44,102 @@ export default function SandboxNodeBindingPanel() {
   })
   const [message, setMessage] = useState<string | null>(null)
 
-  const current = getSandboxNodeBinding()
-  const selectedAddress = current?.address ?? ''
+  const currentBinding = useMemo(() => getSandboxNodeBinding(), [])
+  const [draftAddress, setDraftAddress] = useState<string>(currentBinding?.address ?? '')
 
-  const selectedNode = useMemo(
-    () => nodes?.find((node) => node.address === selectedAddress) ?? null,
-    [nodes, selectedAddress],
-  )
+  const isChanged = useMemo(() => {
+    const current = getSandboxNodeBinding()
+    return (current?.address ?? '') !== draftAddress
+  }, [draftAddress])
+
+  const handleApply = () => {
+    const address = draftAddress.trim()
+    if (!address) {
+      clearSandboxNodeBinding()
+      setMessage('已成功清空绑定节点')
+    } else {
+      const node = nodes?.find((item) => item.address === address)
+      if (!node) {
+        setMessage('错误：选择的节点不存在')
+        return
+      }
+      setSandboxNodeBinding({
+        address: node.address,
+        name: node.name,
+        updatedBy: 'root',
+      })
+      setMessage(`应用成功：已绑定至 ${node.name || node.address}`)
+    }
+  }
+
+  const currentActive = getSandboxNodeBinding()
 
   return (
     <Card>
-      <div className="space-y-3">
-        <h2 className="text-lg font-semibold text-gray-900">Root 管理员专用：Sandbox Node 绑定节点</h2>
-        <p className="text-sm text-gray-600">仅允许绑定 1 个节点，Sandbox@svc.plus 会使用该节点生成 VLESS 配置。</p>
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900">Root 管理员专用：Sandbox Node 绑定节点</h2>
+          <p className="text-sm text-gray-600">选择并“确认应用”后，Sandbox@svc.plus 将固定使用该节点生成配置。</p>
+        </div>
 
-        <label className="flex flex-col gap-2 text-sm text-gray-700">
-          绑定节点
-          <select
-            value={selectedAddress}
-            disabled={isLoading || !nodes || nodes.length === 0}
-            onChange={(event) => {
-              const address = event.target.value.trim()
-              if (!address) {
-                clearSandboxNodeBinding()
-                setMessage('已清空绑定节点')
-                return
-              }
-              const node = nodes?.find((item) => item.address === address)
-              if (!node) {
-                setMessage('节点不存在，无法绑定')
-                return
-              }
-              setSandboxNodeBinding({
-                address: node.address,
-                name: node.name,
-                updatedBy: 'root',
-              })
-              setMessage(`已绑定：${node.name || node.address}`)
-            }}
-            className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800 focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-200"
+        <div className="flex items-end gap-3">
+          <label className="flex flex-1 flex-col gap-2 text-sm font-medium text-gray-700">
+            选择目标节点
+            <select
+              value={draftAddress}
+              disabled={isLoading || !nodes}
+              onChange={(e) => {
+                setDraftAddress(e.target.value)
+                setMessage(null)
+              }}
+              className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800 focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-200"
+            >
+              <option value="">不绑定（清空）</option>
+              {(nodes ?? []).map((node) => (
+                <option key={node.address} value={node.address}>
+                  {node.name} ({node.address})
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <button
+            onClick={handleApply}
+            disabled={!isChanged}
+            className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${isChanged
+                ? 'bg-purple-600 text-white hover:bg-purple-700 shadow-sm'
+                : 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              }`}
           >
-            <option value="">不绑定（清空）</option>
-            {(nodes ?? []).map((node) => (
-              <option key={node.address} value={node.address}>
-                {node.name} ({node.address})
-              </option>
-            ))}
-          </select>
-        </label>
+            确认应用
+          </button>
+        </div>
 
-        {selectedNode ? (
-          <p className="text-xs text-gray-600">
-            当前绑定：<span className="font-medium text-gray-800">{selectedNode.name || selectedNode.address}</span>
+        <div className="space-y-1 rounded-md bg-gray-50 p-3">
+          {currentActive ? (
+            <div className="flex items-center gap-2 text-xs text-gray-700">
+              <div className="h-2 w-2 rounded-full bg-green-500" />
+              当前活跃绑定：<span className="font-bold">{currentActive.name || currentActive.address}</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2 text-xs text-gray-500">
+              <div className="h-2 w-2 rounded-full bg-gray-300" />
+              当前未绑定任何节点
+            </div>
+          )}
+          {currentActive?.updatedAt && (
+            <p className="pl-4 text-[10px] text-gray-400">
+              最后更新时间：{new Date(currentActive.updatedAt).toLocaleString()}
+            </p>
+          )}
+        </div>
+
+        {error && <p className="text-xs text-red-600">⚠️ 节点列表加载失败：{error.message}</p>}
+        {message && (
+          <p className={`text-xs font-medium ${message.startsWith('错误') ? 'text-red-600' : 'text-green-600'}`}>
+            {message}
           </p>
-        ) : null}
-        {current?.updatedAt ? (
-          <p className="text-xs text-gray-500">最后更新：{new Date(current.updatedAt).toLocaleString()}</p>
-        ) : null}
-        {error ? <p className="text-xs text-red-600">节点加载失败：{error.message}</p> : null}
-        {message ? <p className="text-xs text-green-700">{message}</p> : null}
+        )}
       </div>
     </Card>
   )