调整结构

TODO.md

@@ -8,6 +8,7 @@
 
 - [ ] 实现子网路由功能，并验证有效
 
+- [ ] 使用Immer优化对象和数组state的更新
 - [ ] 实现配置保存和加载功能
 - [ ] 实现加密功能（完全加密和只加密私钥）
 - [ ] 添加测试用例

src/components/CustomNode.css

@@ -4,6 +4,7 @@
   border-radius: 8px;
   padding: 12px;
   min-width: 150px;
+  max-width: 240px; /* 限制节点不要太长 */
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }
@@ -38,24 +39,12 @@
 .node-label {
   font-weight: 600;
   color: #333;
-  font-size: 14px;
-  flex: 1;
-  word-break: break-word;
-}
-
-.edit-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 16px;
-  padding: 2px 4px;
-  opacity: 0.6;
-  transition: opacity 0.2s;
-  flex-shrink: 0;
-}
-
-.edit-btn:hover {
-  opacity: 1;
+  font-size: 12px; /* smaller title font */
+  flex: 0 0 100px; /* 固定宽度 100px，给按钮留更多空间 */
+  min-width: 0; /* allow truncation inside flex */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .node-info {
@@ -63,6 +52,37 @@
   color: #666;
 }
 
+.gen-btn {
+  background: #1677ff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 1px 6px; /* 更小的按钮内边距 */
+  cursor: pointer;
+  font-size: 10px; /* 更小的文字 */
+  line-height: 1;
+  height: 20px;
+  flex-shrink: 0;
+  opacity: 0.95;
+  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, opacity 120ms ease;
+  outline: none; /* remove default focus outline */
+}
+
+.gen-btn:hover {
+  opacity: 1;
+}
+
+
+.gen-btn:focus {
+  outline: none;
+}
+
+.gen-btn:active {
+  transform: translateY(1px) scale(0.995);
+  background-color: #0f62d6; /* slightly darker on press */
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
+}
+
 .info-item {
   display: flex;
   gap: 4px;

src/components/CustomNode.tsx

@@ -7,10 +7,15 @@ export default function CustomNode({
   data, 
   selected
 }: NodeProps<AppNode>): ReactNode {
+  const handleGenerate = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+  
   return (
     <div className={`custom-node ${selected ? 'selected' : ''}`}>
       <div className="node-header">
-        <span className="node-label">{data.label}</span>
+        <span className="node-label" title={data.label}>{data.label}</span>
+        <button className="gen-btn" onClick={handleGenerate} onDoubleClick={e => e.stopPropagation()}>生成配置</button>
       </div>
 
       {[Position.Top, Position.Bottom, Position.Right, Position.Left].map((position) => (

src/components/NodeEditor.tsx

@@ -12,16 +12,10 @@ interface NodeEditorProps {
   onClose: () => void;
 }
 
-
-class Validation {
-  constructor(
-    public readonly isValid: boolean,
-    public readonly errors: string[],
-  ) {}
-}
-
-function Validate(updateData : NodeDataUpdate, settings : Settings) : Validation {
+function Validate(updateData : NodeDataUpdate, settings : Settings) : string[] {
   const errors: string[] = [];
+  const {ipv4Address, ipv6Address, mtu, listenPort} = updateData;
+  const {ipv4Subnet, ipv6Subnet} = settings;
 
   if(!updateData.label) {
     errors.push("Label不能是空");
@@ -31,8 +25,6 @@ function Validate(updateData : NodeDataUpdate, settings : Settings) : Validation
     errors.push("privateKey不能是空");
   }
 
-  const ipv4Subnet = settings.ipv4Subnet;
-  const ipv4Address = updateData.ipv4Address;
   if(ipv4Subnet) {
     const cidr = IPNetwork.parse(ipv4Subnet);
     if(!ipv4Address) {
@@ -42,8 +34,6 @@ function Validate(updateData : NodeDataUpdate, settings : Settings) : Validation
     }
   }
 
-  const ipv6Subnet = settings.ipv6Subnet;
-  const ipv6Address = updateData.ipv6Address;
   if(ipv6Subnet) {
     const cidr = IPNetwork.parse(ipv6Subnet);
     if(!ipv6Address) {
@@ -53,8 +43,23 @@ function Validate(updateData : NodeDataUpdate, settings : Settings) : Validation
     }
   }
 
-  const isValid : boolean = errors.length === 0;
-  return new Validation(isValid, errors);
+  if(listenPort !== undefined) {
+      if(isNaN(listenPort)) {
+        errors.push("监听端口不是数字");
+      } else if(listenPort < 30000 || listenPort > 49151) {
+        errors.push("监听端口不在范围内：[30000, 49151]");
+      }
+  }
+
+  if(mtu !== undefined) {
+    if(isNaN(mtu)) {
+      errors.push("mtu不是数字");
+    } else if(mtu < 1200) {
+      errors.push("mtu过小（小于1200）");
+    }
+  }
+
+  return errors;
 }
 
 export default function NodeEditor({ 
@@ -94,12 +99,11 @@ export default function NodeEditor({
     }
 
     const validation = Validate(updateData, settings);
-    if(!validation.isValid) {
-      setErrors(validation.errors);
+    setErrors(validation);
+    if(validation.length > 0) {
       return ;
     }
 
-    setErrors([]);
     onUpdate(updateData);
     onClose();
   };
@@ -175,26 +179,23 @@ export default function NodeEditor({
         <Folder title='高级'>
           <div className="form-group">
             <label>子网黑名单</label>
-            <input
-              type="text"
+            <textarea
+              rows={2}
               value={disallowIPs || ''}
               onChange={e => setDisallowIPs(e.target.value)}
             />
           </div>
 
           <div className="form-group">
-            <label>侦听端口</label>
+            <label>监听端口</label>
             <input
               type="number"
               min="30000"
               max="49151"
               step="1"
-              value={listenPort || ''}
-              onChange={e => {
-                const value = e.target.valueAsNumber;
-                setListenPort(isNaN(value) ? undefined : value);
-              }}
-              placeholder={`默认值：${settings.listenPort}`}
+              value={listenPort || ""}
+              onChange={e => setListenPort(e.target.valueAsNumber)}
+              placeholder='范围：[30000, 49151]'
             />
           </div>
 
@@ -205,11 +206,8 @@ export default function NodeEditor({
               min="1200"
               step="1"
               value={mtu || ''}
-              onChange={e => {
-                const value = e.target.valueAsNumber;
-                setmtu(isNaN(value) ? undefined : value);
-              }}
-              placeholder={settings.mtu ? `默认值：${settings.mtu}` : ''}
+              onChange={e => setmtu(e.target.valueAsNumber)}
+              placeholder='需要大于1200'
             />
           </div>
 

src/components/SettingsEditor.tsx

@@ -9,6 +9,44 @@ interface SettingEditorProps {
   onClose: () => void;
 }
 
+function Validate(updateData: Settings) : string[] {
+  const errors: string[] = [];
+
+  const {ipv4Subnet, ipv6Subnet, mtu, listenPort} = updateData;
+
+  if(ipv4Subnet) {
+    const result = IPNetwork.parse(ipv4Subnet)
+    if(!result.isValid) {
+      errors.push("IPv4子网：" + (result.error ?? "ipv4子网不合法"))
+    } else if(result.version != 'IPv4') {
+      errors.push("IPv4子网：" + "非IPv4 CIDR");
+    }
+  }
+
+  if(ipv6Subnet) {
+    const result = IPNetwork.parse(ipv6Subnet)
+    if(!result.isValid) {
+      errors.push("IPv6子网：" + (result.error ?? "子网不合法"));
+    } else if(result.version != 'IPv6') {
+      errors.push("IPv6子网：" + "非IPv6 CIDR");
+    }
+  }
+
+  if(isNaN(listenPort)) {
+    errors.push("监听端口不是数字");
+  } else if(listenPort < 30000 || listenPort > 49151) {
+    errors.push("监听端口不在范围内：[30000, 49151]");
+  }
+
+  if(isNaN(mtu)) {
+    errors.push("mtu不是数字");
+  } else if(mtu < 1200) {
+    errors.push("mtu过小（小于1200）");
+  }
+
+  return errors;
+}
+
 export default function SettingsEditor({ 
   settings,
   onUpdate, 
@@ -22,35 +60,20 @@ export default function SettingsEditor({
   const [ipv6Subnet, setIpv6Subnet] = useState(settings.ipv6Subnet)
 
   const handleSave = (): void => {
-    const errorInfo : string[] = [];
-    if(ipv4Subnet) {
-      const result = IPNetwork.parse(ipv4Subnet)
-      if(!result.isValid) {
-        errorInfo.push("IPv4子网：" + (result.error ?? "ipv4子网不合法"))
-      } else if(result.version != 'IPv4') {
-        errorInfo.push("IPv4子网：" + "非IPv4 CIDR");
-      }
-    }
-    if(ipv6Subnet) {
-      const result = IPNetwork.parse(ipv6Subnet)
-      if(!result.isValid) {
-        errorInfo.push("IPv6子网：" + (result.error ?? "子网不合法"));
-      } else if(result.version != 'IPv6') {
-        errorInfo.push("IPv6子网：" + "非IPv6 CIDR");
-      }
-    }
-    if(errorInfo.length > 0) {
-      setErrors(errorInfo);
-      return ;
-    }
-
-    setErrors([]);
-    onUpdate({
+    const updateData = {
       listenPort: listenPort,
       mtu: mtu,
       ipv4Subnet: ipv4Subnet,
       ipv6Subnet: ipv6Subnet
-    });
+    };
+
+    const validation = Validate(updateData);
+    setErrors(validation);
+    if(validation.length > 0) {
+      return ;
+    }
+
+    onUpdate(updateData);
     onClose();
   };
 
@@ -77,7 +100,7 @@ export default function SettingsEditor({
         )}
 
         <div className="form-group">
-          <label>侦听端口</label>
+          <label>监听端口</label>
           <input
             type="number"
             min="30000"
@@ -95,10 +118,7 @@ export default function SettingsEditor({
             min="1200"
             step="1"
             value={mtu || ''}
-            onChange={e => {
-              const value = e.target.valueAsNumber;
-              setmtu(isNaN(value) ? 1420 : value);
-            }}
+            onChange={e => setmtu(e.target.valueAsNumber)}
           />
         </div>
 

src/types/graph.ts

@@ -1,4 +1,5 @@
 import { Node, Edge } from '@xyflow/react';
+import { createContext } from 'react';
 
 export type AppNode = Node<NodeData>;