From 97dd6e690050b4ab8e0c631d8c33f51673547875 Mon Sep 17 00:00:00 2001
From: limil <limil.top@qq.com>
Date: Thu, 29 Jan 2026 21:17:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx               |  2 +-
 src/components/Toggle.css | 59 +++++++++++++++++++++++++++++++++++++++
 src/components/Toggle.tsx | 31 ++++++++++++++++++++
 3 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Toggle.css
 create mode 100644 src/components/Toggle.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 3d708fe..8de9e2e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,7 +10,6 @@ import {
   NodeTypes,
   NodeChange,
   OnEdgesChange,
-  ConnectionMode,
   MarkerType,
   OnConnect,
 } from '@xyflow/react';
@@ -19,6 +18,7 @@ import { AppNode, AppEdge, NodeData } from './types/graph';
 import CustomNode from './components/CustomNode';
 import NodeEditor from './components/NodeEditor';
 import ConfigViewer from './components/ConfigViewer';
+import Toggle from "./components/Toggle"
 import './App.css';
 
 const initialNodes: AppNode[] = [
diff --git a/src/components/Toggle.css b/src/components/Toggle.css
new file mode 100644
index 0000000..ec63bd0
--- /dev/null
+++ b/src/components/Toggle.css
@@ -0,0 +1,59 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
new file mode 100644
index 0000000..280ef13
--- /dev/null
+++ b/src/components/Toggle.tsx
@@ -0,0 +1,31 @@
+import { ChangeEvent } from 'react'
+import "./Toggle.css" 
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  name?: string;
+}
+
+const Toggle : React.FC<ToggleProps> = ({
+    checked,
+    onChange,
+    name
+}) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e.target.checked);
+    };
+    return (
+        <label className="switch">
+            <input
+                type="checkbox"
+                name={name}
+                checked={checked}
+                onChange={handleChange}
+            />
+            <span className="slider round"></span>
+        </label>
+    )
+}
+
+export default Toggle;
\ No newline at end of file