添加toggle

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[] = [

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%;
+}

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;