临时提交

src/App.tsx

@@ -53,7 +53,7 @@ function getFirstAvailableId(ids: number[]) : number {
 }
 
 function generateNodeData(nodes : NodeData[]) : NodeData | null {
-  const hostId = getFirstAvailableId(nodes.map(n => n.hostId))
+  const hostId = getFirstAvailableId(nodes.filter(n => n.groupId == 0).map(n => n.hostId))
   if(hostId > 255) return null
   
   const privateKey = generateWireGuardPrivateKey();

src/components/NodeEditor.tsx

@@ -1,5 +1,6 @@
 import { useState, ReactNode } from 'react';
 import { NodeData, Settings } from '../types/graph';
+import { generateWireGuardPrivateKey } from '../utils/wireguardConfig'
 import './NodeEditor.css';
 
 
@@ -39,6 +40,10 @@ export default function NodeEditor({
     // onClose();
   };
 
+  const handleGenerateKey = (): void => {
+    handleInputChange('privateKey', generateWireGuardPrivateKey())
+  }
+
   return (
     <div className="node-editor-overlay">
       <div className="node-editor">
@@ -70,12 +75,20 @@ export default function NodeEditor({
           <div className="item-group">
             <input
               value={formData.privateKey || ''}
-              onChange={(e) => handleInputChange('privateKey', e.target.value)}
               readOnly
             />
-            <button className="btn-interect">重新生成</button>
+            <button className="btn-interect" onClick={handleGenerateKey}>重新生成</button>
+          </div>
         </div>
 
+        <div className="form-group">
+          <label>主机ID</label>
+          <input
+            type="text"
+            value={formData.hostId || ''}
+            onChange={(e) => handleInputChange('hostId', e.target.value)}
+            placeholder="将用作为虚拟地址的最后一位。同一子网下主机ID不能重复，不得超过255"
+          />
         </div>
 
         <div className="form-group">