调整结构

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/types/graph.ts

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