8 changed files with 314 additions and 428 deletions
--- a/README.md
+++ b/README.md
@ -1 +1,16 @@
-# Wireguard 组网可视化编辑器
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/src/App.tsx
+++ b/src/App.tsx
@ -14,14 +14,12 @@ import {
  NodeMouseHandler,
  OnConnect,
  MiniMap,
-  IsValidConnection,
-  EdgeMouseHandler
+  IsValidConnection
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { AppNode, AppEdge, NodeData, EdgeData, Settings } from './types/graph';
+import { AppNode, AppEdge, NodeData, Settings } from './types/graph';
 import CustomNode from './components/CustomNode';
 import NodeEditor from './components/NodeEditor';
-import EdgeEditor from './components/EdgeEditor'
 import Toggle from "./components/Toggle"
 import { generateWireGuardPrivateKey } from './utils/wireguardConfig';
 import './App.css';
@ -52,8 +50,7 @@ function FlowContent(): ReactNode {
  const [edges, setEdges] = useState<AppEdge[]>(initialEdges);
  const [settings, setSettings] = useState<Settings>(initialSettings);

-  const [editingNode, setEditingNode] = useState<NodeData | undefined>(undefined);
-  const [editingEdge, setEditingEdge] = useState<EdgeData | undefined>(undefined);
+  const [editingNode, setEditingNode] = useState<NodeData | null>(null);
  const [enableTwoWay, setEnableTwoWay] = useState(false);

  const onNodesChange = useCallback(
@ -66,14 +63,12 @@ function FlowContent(): ReactNode {

  const onConnect = useCallback<OnConnect>(
    (params) => {
-      const id = `e-${crypto.randomUUID()}`
      const newEdge : AppEdge = {
        ...params,
-        id: id,
+        id: `e-${crypto.randomUUID()}`,
        animated: !enableTwoWay,
        markerEnd: enableTwoWay ? undefined : { type: MarkerType.ArrowClosed },
        data : {
-          id: id,
          isTwoWayEdge: enableTwoWay
        }
      }
@ -85,11 +80,6 @@ function FlowContent(): ReactNode {
    (_event, node) => setEditingNode(node.data), 
    []);

-  const onEdgeClick = useCallback<EdgeMouseHandler<AppEdge>>(
-    (_event, edge) => setEditingEdge(edge.data),
-    []
-  )
-
  const validateConnection = useCallback<IsValidConnection>(
    (connection) => {
      if (connection.source === connection.target) {
@ -127,19 +117,7 @@ function FlowContent(): ReactNode {
        return node;
      })
    );
-    setEditingNode(undefined);
-  };
-
-  const handleUpdateEdge = (updatedData: EdgeData): void => {
-    setEdges((prev) =>
-      prev.map((edge) => {
-        if (edge.data && edge.data.id === editingEdge?.id) {
-          return { ...edge, data: updatedData };
-        }
-        return edge;
-      })
-    );
-    setEditingNode(undefined);
+    setEditingNode(null);
  };

  return (
@ -151,7 +129,6 @@ function FlowContent(): ReactNode {
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onNodeDoubleClick={onNodeClick}
-        onEdgeDoubleClick={onEdgeClick}
        nodeTypes={nodeTypes}
        deleteKeyCode={["Delete"]}
        fitView
@ -191,19 +168,10 @@ function FlowContent(): ReactNode {
        <NodeEditor
          node={editingNode}
          onUpdate={handleUpdateNode}
-          onClose={() => setEditingNode(undefined)}
+          onClose={() => setEditingNode(null)}
          settings={settings}
        />
      )}
-
-      {editingEdge && (
-        <EdgeEditor
-          edge={editingEdge}
-          onUpdate={handleUpdateEdge}
-          onClose={() => setEditingEdge(undefined)}
-        />
-      )}
-      
    </div>
  );
 }
--- a/src/TODO.md
+++ b/src/TODO.md
@ -1,7 +1,7 @@
 ## 产品基本功能实现待办事项

 - [x] 完成节点的编辑窗口
- [x] 完成边的编辑窗口
+- [ ] 完成边的编辑窗口
 - [ ] 完成全局设置编辑窗口以及相关联动
 - [ ] 实现配置生成逻辑，并验证有效
 - [ ] 实现配置保存和加载功能
--- a/src/components/CustomNode.tsx
+++ b/src/components/CustomNode.tsx
@ -12,6 +12,9 @@ export default function CustomNode({
      <div className="node-header">
        <span className="node-label">{data.label}</span>
      </div>
+      
+      <div className="node-info">
+      </div>

      {[Position.Top, Position.Bottom, Position.Right, Position.Left].map((position) => (
        (["target", "source"] as const).map((type) => (
--- a/src/components/EdgeEditor.tsx
+++ b/src/components/EdgeEditor.tsx
@ -1,68 +0,0 @@
-import { useState, ReactNode } from 'react';
-import { AppNode, AppEdge, EdgeData, EdgeDataUpdate } from '../types/graph';
-import { useReactFlow } from '@xyflow/react';
-import './FormEditor.css';
-
-interface EdgeEditorProps {
-  edge: EdgeData;
-  onUpdate: (data: EdgeDataUpdate) => void;
-  onClose: () => void;
-}
-
-export default function NodeEditor({ 
-  edge,
-  onUpdate, 
-  onClose 
-}: EdgeEditorProps): ReactNode {
-
-  const [keepalive, setKeepalive] = useState(edge.persistentKeepalive);
-  const { getNode, getEdge } = useReactFlow<AppNode, AppEdge>();
-
-  const handleSave = (): void => {
-    onUpdate({persistentKeepalive : keepalive});
-    onClose();
-  };
-
-  const e = getEdge(edge.id)
-  
-  const source = e ? getNode(e.source) : undefined
-  const target = e ? getNode(e.target) : undefined
-
-  const sourceName = source ? source.data.label : "error"
-  const targetName = target ? target.data.label : "error"
-
-  const label = `[${sourceName}] ${edge.isTwoWayEdge ? "↔" : "→"} [${targetName}]`
-
-  return (
-    <div className="node-editor-overlay">
-      <div className="node-editor">
-        <div className="editor-header">
-          <h2>设置边 {label} 参数</h2>
-          <button className="close-btn" onClick={onClose}>×</button>
-        </div>
-
-        <div className="form-group">
-            <label>保活频率（单位：秒）</label>
-            <input
-              type="number"
-              min="0"
-              step="1"
-              value={keepalive || ''}
-              onChange={
-                (e) => {
-                    const value = e.target.valueAsNumber;
-                    setKeepalive(isNaN(value) ? undefined : value);
-                }
-              }
-              placeholder={`留空或0代表不保活`}
-            />
-          </div>
-
-        <div className="editor-actions">
-          <button className="btn-save" onClick={handleSave}>保存</button>
-          <button className="btn-cancel" onClick={onClose}>取消</button>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/components/NodeEditor.css
+++ b/src/components/NodeEditor.css
@ -1,240 +1,240 @@
-.node-editor-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.node-editor {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  max-width: 500px;
-  width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.editor-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 15px;
-}
-
-.editor-header h2 {
-  margin: 0;
-  font-size: 18px;
-  color: #333;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #999;
-  padding: 0;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.close-btn:hover {
-  color: #333;
-}
-
-.error-box {
-  position: relative;
-  background: #fee;
-  border: 1px solid #fcc;
-  border-radius: 4px;
-  padding: 12px;
-  margin-bottom: 15px;
-
-  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
-}
-
-.error-close-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: #ff4d4f;
-  font-size: 16px;
-  opacity: 0.6;
-  transition: opacity 0.2s;
-  user-select: none; /* 禁止选中 */
-}
-
-.error-close-btn:hover {
-  opacity: 1;
-  background: rgba(255, 77, 79, 0.1); /* 悬停微红 */
-  border-radius: 4px;
-}
-
-@keyframes shake {
-  10%, 90% { transform: translate3d(-1px, 0, 0); }
-  20%, 80% { transform: translate3d(2px, 0, 0); }
-  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
-  40%, 60% { transform: translate3d(4px, 0, 0); }
-}
-
-.error-message {
-  margin: 5px 0;
-  color: #c33;
-  font-size: 14px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 15px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-  color: #333;
-  font-size: 14px;
-}
-
-.form-group input,
-.form-group textarea {
-  flex: 1;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-  font-family: monospace;
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-  outline: none;
-  border-color: #1677ff;
-  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
-}
-
-.form-group textarea {
-  resize: vertical;
-  font-size: 12px;
-}
-
-.editor-actions {
-  display: flex;
-  gap: 10px;
-  margin-top: 20px;
-  padding-top: 15px;
-  border-top: 1px solid #eee;
-}
-
-.item-group {
-  display: flex;
-  gap: 10px;
-}
-
-/* 1. 基础通用样式 - 强化了投影和圆角 */
-.btn-interect, .btn-save, .btn-cancel {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 6px; /* 稍微圆润一点，更现代 */
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease; /* 稍微拉长过渡，显得更平滑 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  /* 基础阴影 */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-/* 2. 统一交互反馈：悬停增强阴影，移除缩放 */
-.btn-interect:hover, .btn-save:hover, .btn-cancel:hover {
-  filter: brightness(1.05); /* 悬停微亮 */
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* 悬停时投影加深，产生“浮起”感 */
-}
-
-/* 移除 active 缩放，改为颜色反馈 */
-.btn-interect:active, .btn-save:active, .btn-cancel:active {
-  filter: brightness(0.95); /* 按下稍微变暗 */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transform: none; /* 明确去掉缩放 */
-}
-
-.btn-save, .btn-cancel {
-  flex: 1;
-}
-
-/* 3. 颜色方案优化 */
-.btn-interect, .btn-save {
-  background: #1677ff;
-  color: white;
-  border: 1px solid #0958d9; /* 增加深色边框增强质感 */
-}
-
-.btn-cancel {
-  background: #ffffff; /* 改为白色底，配合阴影更好看 */
-  color: #4b5563;
-  border: 1px solid #e5e7eb; /* 浅灰色边框 */
-}
-
-.btn-cancel:hover {
-  background: #f9fafb;
-  color: #1f2937;
-}
-
-/* 补充：调整按钮组的间距，让阴影不被遮挡 */
-.editor-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 24px;
-  padding-top: 16px;
-  border-top: 1px solid #f3f4f6;
-}
-
-/* 移除所有按钮默认的 outline */
-.btn-interect:focus, 
-.btn-save:focus, 
-.btn-cancel:focus,
-.close-btn:focus {
-  outline: none;
-}
-
-/* 蓝色按钮的焦点效果 (Save / Interect) */
-.btn-interect:focus-visible, 
-.btn-save:focus-visible {
-  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.3); /* 柔和的蓝色光晕 */
-  border-color: #1677ff;
-}
-
-/* 灰色按钮的焦点效果 (Cancel) */
-.btn-cancel:focus-visible {
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); /* 极浅的灰色光晕 */
-  border-color: #d1d5db;
-}
-
-/* 关闭按钮的焦点效果 */
-.close-btn:focus-visible {
-  background-color: #f3f4f6;
-  border-radius: 4px;
+.node-editor-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.node-editor {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 15px;
+}
+
+.editor-header h2 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #999;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  color: #333;
+}
+
+.error-box {
+  position: relative;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 4px;
+  padding: 12px;
+  margin-bottom: 15px;
+
+  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
+}
+
+.error-close-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #ff4d4f;
+  font-size: 16px;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+  user-select: none; /* 禁止选中 */
+}
+
+.error-close-btn:hover {
+  opacity: 1;
+  background: rgba(255, 77, 79, 0.1); /* 悬停微红 */
+  border-radius: 4px;
+}
+
+@keyframes shake {
+  10%, 90% { transform: translate3d(-1px, 0, 0); }
+  20%, 80% { transform: translate3d(2px, 0, 0); }
+  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+  40%, 60% { transform: translate3d(4px, 0, 0); }
+}
+
+.error-message {
+  margin: 5px 0;
+  color: #c33;
+  font-size: 14px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
+  color: #333;
+  font-size: 14px;
+}
+
+.form-group input,
+.form-group textarea {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: monospace;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
+}
+
+.form-group textarea {
+  resize: vertical;
+  font-size: 12px;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+}
+
+.item-group {
+  display: flex;
+  gap: 10px;
+}
+
+/* 1. 基础通用样式 - 强化了投影和圆角 */
+.btn-interect, .btn-save, .btn-cancel {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px; /* 稍微圆润一点，更现代 */
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease; /* 稍微拉长过渡，显得更平滑 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  /* 基础阴影 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+/* 2. 统一交互反馈：悬停增强阴影，移除缩放 */
+.btn-interect:hover, .btn-save:hover, .btn-cancel:hover {
+  filter: brightness(1.05); /* 悬停微亮 */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* 悬停时投影加深，产生“浮起”感 */
+}
+
+/* 移除 active 缩放，改为颜色反馈 */
+.btn-interect:active, .btn-save:active, .btn-cancel:active {
+  filter: brightness(0.95); /* 按下稍微变暗 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transform: none; /* 明确去掉缩放 */
+}
+
+.btn-save, .btn-cancel {
+  flex: 1;
+}
+
+/* 3. 颜色方案优化 */
+.btn-interect, .btn-save {
+  background: #1677ff;
+  color: white;
+  border: 1px solid #0958d9; /* 增加深色边框增强质感 */
+}
+
+.btn-cancel {
+  background: #ffffff; /* 改为白色底，配合阴影更好看 */
+  color: #4b5563;
+  border: 1px solid #e5e7eb; /* 浅灰色边框 */
+}
+
+.btn-cancel:hover {
+  background: #f9fafb;
+  color: #1f2937;
+}
+
+/* 补充：调整按钮组的间距，让阴影不被遮挡 */
+.editor-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #f3f4f6;
+}
+
+/* 移除所有按钮默认的 outline */
+.btn-interect:focus, 
+.btn-save:focus, 
+.btn-cancel:focus,
+.close-btn:focus {
+  outline: none;
+}
+
+/* 蓝色按钮的焦点效果 (Save / Interect) */
+.btn-interect:focus-visible, 
+.btn-save:focus-visible {
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.3); /* 柔和的蓝色光晕 */
+  border-color: #1677ff;
+}
+
+/* 灰色按钮的焦点效果 (Cancel) */
+.btn-cancel:focus-visible {
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); /* 极浅的灰色光晕 */
+  border-color: #d1d5db;
+}
+
+/* 关闭按钮的焦点效果 */
+.close-btn:focus-visible {
+  background-color: #f3f4f6;
+  border-radius: 4px;
 }
--- a/src/components/NodeEditor.tsx
+++ b/src/components/NodeEditor.tsx
@ -1,7 +1,7 @@
 import { useState, ReactNode } from 'react';
-import { NodeData, Settings, NodeDataUpdate } from '../types/graph';
+import { NodeData, Settings } from '../types/graph';
 import { generateWireGuardPrivateKey } from '../utils/wireguardConfig'
-import './FormEditor.css';
+import './NodeEditor.css';
 import Folder from './Folder'


@ -10,10 +10,15 @@ interface Validation {
  errors: string[]
 }

+function validateNodeConfig(formData : NodeData) : Validation {
+  // todo
+  return {isValid : true, errors: []}
+}
+
 interface NodeEditorProps {
  node: NodeData;
  settings: Settings;
-  onUpdate: (data: NodeDataUpdate) => void;
+  onUpdate: (data: NodeData) => void;
  onClose: () => void;
 }

@ -24,48 +29,36 @@ export default function NodeEditor({
  onClose 
 }: NodeEditorProps): ReactNode {

+  const [formData, setFormData] = useState<NodeData>(node);
  const [errors, setErrors] = useState<string[]>([]);

-  const [label, setLabel] = useState<string>(node.label);
-  const [privateKey, setPrivateKey] = useState<string>(node.privateKey);
-  const [ipv4Address, setIpv4Address] = useState(node.ipv4Address);
-  const [ipv6Address, setIpv6Address] = useState(node.ipv6Address);
-  const [disallowIPs, setDisallowIPs] = useState(node.disallowIPs);
-  const [listenPort, setListenPort] = useState(node.listenPort);
-  const [mtu, setmtu] = useState(node.mtu);
-  const [dnsServers, setdnsServers] = useState(node.dnsServers)
-  const [postUp, setPostUp] = useState(node.postUp)
-  const [postDown, setPostDown] = useState(node.postDown)
-  const [notes, setNotes] = useState(node.notes)
+  const handleInputChange = (field: keyof NodeData, value: string): void => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };

  const handleSave = (): void => {
-    // const validation = validateNodeConfig(formData);
-    // if (!validation.isValid) {
-    //   setErrors(validation.errors);
-    //   return;
-    // }
+    const validation = validateNodeConfig(formData);
+    if (!validation.isValid) {
+      setErrors(validation.errors);
+      return;
+    }
    setErrors([]);
-    onUpdate({
-      label: label,
-      privateKey: privateKey,
-      ipv4Address: ipv4Address,
-      ipv6Address: ipv6Address,
-      disallowIPs: disallowIPs,
-      postUp: postUp,
-      postDown: postDown,
-      mtu: mtu,
-      listenPort: listenPort,
-      dnsServers: dnsServers,
-      notes: notes
-    });
+    onUpdate(formData);
    onClose();
  };

+  const handleGenerateKey = (): void => {
+    handleInputChange('privateKey', generateWireGuardPrivateKey())
+  }
+
  return (
    <div className="node-editor-overlay">
      <div className="node-editor">
        <div className="editor-header">
-          <h2>编辑节点: {label}</h2>
+          <h2>编辑节点: {formData.label || '新节点'}</h2>
          <button className="close-btn" onClick={onClose}>×</button>
        </div>

@ -87,8 +80,8 @@ export default function NodeEditor({
          <label>节点名称</label>
          <input
            type="text"
-            value={label}
-            onChange={e => setLabel(e.target.value)}
+            value={formData.label || ''}
+            onChange={(e) => handleInputChange('label', e.target.value)}
            placeholder="例如: Node-A"
          />
        </div>
@ -97,11 +90,10 @@ export default function NodeEditor({
          <label>私钥</label>
          <div className="item-group">
            <input
-              value={privateKey}
+              value={formData.privateKey || ''}
              readOnly
            />
-            <button className="btn-interect" 
-              onClick={_ => setPrivateKey(generateWireGuardPrivateKey())}>重新生成</button>
+            <button className="btn-interect" onClick={handleGenerateKey}>重新生成</button>
          </div>
        </div>

@ -110,8 +102,8 @@ export default function NodeEditor({
            <label>IPv4地址</label>
            <input
              type="text"
-              value={ipv4Address || ''}
-              onChange={e => setIpv4Address(e.target.value)}
+              value={formData.ipv4Address || ''}
+              onChange={(e) => handleInputChange('ipv4Address', e.target.value)}
            />
          </div>
        )}
@ -121,8 +113,8 @@ export default function NodeEditor({
            <label>IPv6地址</label>
            <input
              type="text"
-              value={ipv6Address || ''}
-              onChange={e => setIpv6Address(e.target.value)}
+              value={formData.ipv6Address || ''}
+              onChange={(e) => handleInputChange('ipv6Address', e.target.value)}
            />
          </div>
        )}
@ -132,8 +124,8 @@ export default function NodeEditor({
            <label>子网黑名单</label>
            <input
              type="text"
-              value={disallowIPs || ''}
-              onChange={e => setDisallowIPs(e.target.value)}
+              value={formData.disallowIPs || ''}
+              onChange={(e) => handleInputChange('disallowIPs', e.target.value)}
            />
          </div>

@ -144,11 +136,8 @@ export default function NodeEditor({
              min="1024"
              max="49151"
              step="1"
-              value={listenPort || ''}
-              onChange={e => {
-                const value = e.target.valueAsNumber;
-                setListenPort(isNaN(value) ? undefined : value);
-              }}
+              value={formData.listenPort || ''}
+              onChange={(e) => handleInputChange('listenPort', e.target.value)}
              placeholder={`默认值：${settings.listenPort}`}
            />
          </div>
@ -159,11 +148,8 @@ export default function NodeEditor({
              type="number"
              min="1"
              step="1"
-              value={mtu || ''}
-              onChange={e => {
-                const value = e.target.valueAsNumber;
-                setmtu(isNaN(value) ? undefined : value);
-              }}
+              value={formData.mtu || ''}
+              onChange={(e) => handleInputChange('mtu', e.target.value)}
              placeholder={settings.mtu ? `默认值：${settings.mtu}` : ''}
            />
          </div>
@ -172,8 +158,8 @@ export default function NodeEditor({
            <label>DNS服务器</label>
            <input
              type="text"
-              value={dnsServers || ''}
-              onChange={(e) => setdnsServers(e.target.value)}
+              value={formData.dnsServers || ''}
+              onChange={(e) => handleInputChange('dnsServers', e.target.value)}
              placeholder="例如: 8.8.8.8,1.1.1.1"
            />
          </div>
@ -182,8 +168,8 @@ export default function NodeEditor({
            <label>PostUp</label>
            <textarea
              rows={2}
-              value={postUp || ''}
-              onChange={(e) => setPostUp(e.target.value)}
+              value={formData.postUp || ''}
+              onChange={(e) => handleInputChange('postUp', e.target.value)}
            />
          </div>

@ -191,8 +177,8 @@ export default function NodeEditor({
            <label>PostDown</label>
            <textarea
              rows={2}
-              value={postDown || ''}
-              onChange={(e) => setPostDown(e.target.value)}
+              value={formData.postDown || ''}
+              onChange={(e) => handleInputChange('postDown', e.target.value)}
            />
          </div>

@ -200,8 +186,8 @@ export default function NodeEditor({
            <label>备注</label>
            <textarea
              rows={4}
-              value={notes || ''}
-              onChange={(e) => setNotes(e.target.value)}
+              value={formData.notes || ''}
+              onChange={(e) => handleInputChange('notes', e.target.value)}
            />
          </div>
        </Folder>
--- a/src/types/graph.ts
+++ b/src/types/graph.ts
@ -11,20 +11,7 @@ export type NodeData = {
  ipv4Address?: string;
  ipv6Address?: string;
  disallowIPs?: string;
-  postUp?: string;
-  postDown?: string;
-  mtu?: number;
-  listenPort?: number;
-  dnsServers?: string;
-  notes?: string;
-}

-export interface NodeDataUpdate {
-  label: string;
-  privateKey: string;
-  ipv4Address?: string;
-  ipv6Address?: string;
-  disallowIPs?: string;
  postUp?: string;
  postDown?: string;
  mtu?: number;
@ -34,13 +21,8 @@ export interface NodeDataUpdate {
 }

 export type EdgeData = {
-  readonly id: string;
  isTwoWayEdge: boolean;
-  persistentKeepalive?: number;
-}
-
-export interface EdgeDataUpdate {
-  persistentKeepalive?: number;
+  persistentKeepalive?: string;
 }

 export class SubNetRouter {