优化参数更新

src/App.tsx

@@ -18,10 +18,11 @@ import {
   EdgeMouseHandler
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { AppNode, AppEdge, NodeData, EdgeData, Settings } from './types/graph';
+import { AppNode, AppEdge, NodeData, EdgeData, NodeDataUpdate, EdgeDataUpdate, Settings } from './types/graph';
 import CustomNode from './components/CustomNode';
 import NodeEditor from './components/NodeEditor';
 import EdgeEditor from './components/EdgeEditor'
+import SettingsEditor from './components/SettingsEditor'
 import Toggle from "./components/Toggle"
 import { generateWireGuardPrivateKey } from './utils/wireguardConfig';
 import './App.css';
@@ -55,6 +56,7 @@ function FlowContent(): ReactNode {
   const [editingNode, setEditingNode] = useState<NodeData | undefined>(undefined);
   const [editingEdge, setEditingEdge] = useState<EdgeData | undefined>(undefined);
   const [enableTwoWay, setEnableTwoWay] = useState(false);
+  const [editSettings, setEditSettings] = useState<boolean>(false);
 
   const onNodesChange = useCallback(
     (changes: NodeChange<AppNode>[]) => setNodes((nds) => applyNodeChanges<AppNode>(changes, nds)),
@@ -118,28 +120,26 @@ function FlowContent(): ReactNode {
     setNodes((prev) => [...prev.map(node => ({ ...node, selected: false })), newNode]);
   };
 
-  const handleUpdateNode = (updatedData: NodeData): void => {
+  const handleUpdateNode = (updatedData: NodeDataUpdate): void => {
     setNodes((prev) =>
       prev.map((node) => {
         if (node.data.id === editingNode?.id) {
-          return { ...node, data: updatedData };
+          node.data = {...node.data, ...updatedData}
         }
         return node;
       })
     );
-    setEditingNode(undefined);
   };
 
-  const handleUpdateEdge = (updatedData: EdgeData): void => {
+  const handleUpdateEdge = (updatedData: EdgeDataUpdate): void => {
     setEdges((prev) =>
       prev.map((edge) => {
         if (edge.data && edge.data.id === editingEdge?.id) {
-          return { ...edge, data: updatedData };
+          edge.data = {...edge.data, ...updatedData}
         }
         return edge;
       })
     );
-    setEditingNode(undefined);
   };
 
   return (
@@ -180,7 +180,7 @@ function FlowContent(): ReactNode {
             ➕ 添加节点
           </button>
 
-          <button className="toolbar-btn" onClick={() => {}} title="设置">
+          <button className="toolbar-btn" onClick={() => {setEditSettings(true);}} title="设置">
             📋 设置
           </button>
 
@@ -204,6 +204,14 @@ function FlowContent(): ReactNode {
         />
       )}
 
+      {editSettings && (
+        <SettingsEditor
+          settings={settings}
+          onUpdate={settingsUpdate => {}}
+          onClose={() => setEditSettings(false)}
+        />
+      )}
+      
     </div>
   );
 }

src/components/SettingsEditor.tsx

@@ -0,0 +1,37 @@
+import { useState, ReactNode } from 'react';
+import { Settings } from '../types/graph';
+import './FormEditor.css';
+
+interface SettingEditorProps {
+  settings: Settings;
+  onUpdate?: (data: Settings) => void;
+  onClose: () => void;
+}
+
+export default function SettingsEditor({ 
+  settings,
+  onUpdate, 
+  onClose 
+}: SettingEditorProps): ReactNode {
+
+  const handleSave = (): void => {
+    // onUpdate();
+    onClose();
+  };
+
+  return (
+    <div className="node-editor-overlay">
+      <div className="node-editor">
+        <div className="editor-header">
+          <h2>全局设置</h2>
+          <button className="close-btn" onClick={onClose}>×</button>
+        </div>
+
+        <div className="editor-actions">
+          <button className="btn-save" onClick={handleSave}>保存</button>
+          <button className="btn-cancel" onClick={onClose}>取消</button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/types/graph.ts

@@ -6,20 +6,9 @@ export type AppEdge = Edge<EdgeData>;
 
 export type NodeData = {
   readonly id: string;
-  label: string;
+} & NodeDataUpdate
-  privateKey: string;
-  ipv4Address?: string;
-  ipv6Address?: string;
-  disallowIPs?: string;
-  postUp?: string;
-  postDown?: string;
-  mtu?: number;
-  listenPort?: number;
-  dnsServers?: string;
-  notes?: string;
-}
 
-export interface NodeDataUpdate {
+export type NodeDataUpdate = {
   label: string;
   privateKey: string;
   ipv4Address?: string;
@@ -36,10 +25,9 @@ export interface NodeDataUpdate {
 export type EdgeData = {
   readonly id: string;
   isTwoWayEdge: boolean;
-  persistentKeepalive?: number;
+} & EdgeDataUpdate
-}
 
-export interface EdgeDataUpdate {
+export type EdgeDataUpdate = {
   persistentKeepalive?: number;
 }
 
@@ -52,7 +40,7 @@ export class SubNetRouter {
   ) {}
 }
 
-export type Settings = {
+export interface Settings {
   listenPort: number;
   mtu: number;