10 changed files with 78 additions and 135 deletions
--- a/TODO.md
+++ b/TODO.md
@ -12,4 +12,4 @@
 - [ ] 使用Reducer 和 Immer重构代码
 - [ ] 实现加密功能（完全加密和只加密私钥）
 - [ ] 添加测试用例
- [ ] 体验调优：生成配置完成后弹出预览窗口可以下载或者复制
+- [ ] 完成！
--- a/package-lock.json
+++ b/package-lock.json
@ -12,7 +12,6 @@
        "base64-js": "^1.5.1",
        "react": "^19.2.0",
        "react-dom": "^19.2.0",
-        "react-hot-toast": "^2.6.0",
        "tweetnacl": "^1.0.3"
      },
      "devDependencies": {
@ -1812,8 +1811,8 @@
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "license": "MIT",
-      "peer": true
+      "devOptional": true,
+      "license": "MIT"
    },
    "node_modules/d3-color": {
      "version": "3.1.0",
@ -2344,15 +2343,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/goober": {
-      "version": "2.1.18",
-      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.18.tgz",
-      "integrity": "sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "csstype": "^3.0.10"
-      }
-    },
    "node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@ -2800,23 +2790,6 @@
        "react": "^19.2.3"
      }
    },
-    "node_modules/react-hot-toast": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
-      "integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.1.3",
-        "goober": "^2.1.16"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
    "node_modules/react-refresh": {
      "version": "0.18.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
--- a/package.json
+++ b/package.json
@ -14,7 +14,6 @@
    "base64-js": "^1.5.1",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
-    "react-hot-toast": "^2.6.0",
    "tweetnacl": "^1.0.3"
  },
  "devDependencies": {
--- a/src/App.tsx
+++ b/src/App.tsx
@ -18,7 +18,7 @@ import {
  EdgeMouseHandler
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { AppNode, AppEdge, NodeData, EdgeData, NodeDataUpdate, EdgeDataUpdate, Settings, initialSettings, SettingsContext } 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'
@ -26,10 +26,13 @@ import SettingsEditor from './components/SettingsEditor'
 import Toggle from "./components/Toggle"
 import { generateWireGuardPrivateKey } from './utils/wireguardConfig';
 import './App.css';
-import { Toaster } from 'react-hot-toast';

 const initialNodes: AppNode[] = [];
 const initialEdges: AppEdge[] = [];
+const initialSettings : Settings = {
+  listenPort: 38894,
+  mtu: 1420,
+};

 const nodeTypes : NodeTypes = {
  custom: CustomNode,
@ -144,34 +147,31 @@ function FlowContent(): ReactNode {

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
-      <Toaster/>
-      <SettingsContext value={settings}>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
-          onNodeDoubleClick={onNodeClick}
-          onEdgeDoubleClick={onEdgeClick}
-          nodeTypes={nodeTypes}
-          deleteKeyCode={["Delete"]}
-          fitView
-          isValidConnection={validateConnection}
-        >
-          <Background />
-          <Controls />
-          <MiniMap 
-          nodeColor={(n) => {
-            if (n.type === 'input') return 'blue';
-            return '#eee';
-          }} 
-          maskColor="rgba(0, 0, 0, 0.1)"
-          position="bottom-right" // 也可以是 top-right 等
-        />
-        </ReactFlow>
-      </SettingsContext>
-      
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onNodeDoubleClick={onNodeClick}
+        onEdgeDoubleClick={onEdgeClick}
+        nodeTypes={nodeTypes}
+        deleteKeyCode={["Delete"]}
+        fitView
+        isValidConnection={validateConnection}
+      >
+        <Background />
+        <Controls />
+        <MiniMap 
+        nodeColor={(n) => {
+          if (n.type === 'input') return 'blue';
+          return '#eee';
+        }} 
+        maskColor="rgba(0, 0, 0, 0.1)"
+        position="bottom-right" // 也可以是 top-right 等
+      />
+      </ReactFlow>
+
      <div className="toolbar">
        <div className="toolbar-group">
          <Toggle 
--- a/src/components/CustomNode.css
+++ b/src/components/CustomNode.css
@ -2,9 +2,9 @@
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
-  padding: 10px;
+  padding: 12px;
  min-width: 150px;
-  max-width: 300px; /* 限制节点不要太长 */
+  max-width: 240px; /* 限制节点不要太长 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
 }
@ -30,43 +30,26 @@

 .node-header {
  display: flex;
-  justify-content: center;
-  margin-bottom: 4px;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  gap: 8px;
 }

 .node-label {
  font-weight: 600;
  color: #333;
  font-size: 12px; /* smaller title font */
-  flex: 0 0 120px; /* 固定宽度 100px，给按钮留更多空间 */
+  flex: 0 0 100px; /* 固定宽度 100px，给按钮留更多空间 */
  min-width: 0; /* allow truncation inside flex */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
-  text-align: center;
 }

 .node-info {
-  font-size: 10px;
-  border-bottom: 1px solid #eee;
-  margin-bottom: 4px;
-}
-
-.info-item {
-  margin-bottom: 4px;
-}
-
-.info-item .label {
-  color: #999;
-}
-
-.info-item .value {
-  color: #333;
-}
-
-.node-actions {
-  display: flex;
-  gap: 10px;
+  font-size: 12px;
+  color: #666;
 }

 .gen-btn {
@ -76,11 +59,10 @@
  border-radius: 4px;
  padding: 1px 6px; /* 更小的按钮内边距 */
  cursor: pointer;
-  font-size: 8px; /* 更小的文字 */
+  font-size: 10px; /* 更小的文字 */
  line-height: 1;
  height: 20px;
  flex-shrink: 0;
-  flex: 1;
  opacity: 0.95;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, opacity 120ms ease;
  outline: none; /* remove default focus outline */
@ -90,6 +72,7 @@
  opacity: 1;
 }

+
 .gen-btn:focus {
  outline: none;
 }
@ -98,4 +81,20 @@
  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;
+  margin-bottom: 2px;
+}
+
+.info-item .label {
+  font-weight: 500;
+  color: #999;
+}
+
+.info-item .value {
+  color: #333;
+  font-family: monospace;
+}
--- a/src/components/CustomNode.tsx
+++ b/src/components/CustomNode.tsx
@ -1,8 +1,7 @@
-import { ReactNode, useContext } from 'react';
+import { ReactNode } from 'react';
 import { Handle, Position, NodeProps } from '@xyflow/react';
-import { AppNode, SettingsContext } from '../types/graph';
+import { AppNode } from '../types/graph';
 import './CustomNode.css';
-import toast from 'react-hot-toast';

 export default function CustomNode({ 
  data, 
@ -10,41 +9,13 @@ export default function CustomNode({
 }: NodeProps<AppNode>): ReactNode {
  const handleGenerate = (e: React.MouseEvent) => {
    e.stopPropagation();
-    toast.success('保存成功！');
  };
-
-  const settings = useContext(SettingsContext);
  
  return (
    <div className={`custom-node ${selected ? 'selected' : ''}`}>
      <div className="node-header">
-        <label className="node-label">{data.label}</label>
-      </div>
-
-      <div className='node-info'>
-        {settings.ipv4Subnet && (
-          <div className="info-item">
-            <span className="label">IPv4地址：</span>
-            <span className="value">{data.ipv4Address || "未设置"}</span>
-          </div>
-        )}
-        
-        {settings.ipv6Subnet && (
-          <div className="info-item">
-            <span className="label">IPv6地址：</span>
-            <span className="value">{data.ipv6Address || "未设置"}</span>
-          </div>
-        )}
-
-        {(!settings.ipv4Subnet && !settings.ipv6Subnet) && (
-          <div className="info-item">
-            <span className="label">未设置任何子网，请在设置中设置</span>
-          </div>
-        )}
-      </div>
-
-      <div className="node-actions">
-        <button className="gen-btn" onClick={handleGenerate} onDoubleClick={e => e.stopPropagation()}>生成配置并复制</button>
+        <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) => (
--- a/src/components/FormEditor.css
+++ b/src/components/FormEditor.css
@ -160,6 +160,10 @@
  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);
 }
--- a/src/components/NodeEditor.tsx
+++ b/src/components/NodeEditor.tsx
@ -27,14 +27,18 @@ function Validate(updateData : NodeDataUpdate, settings : Settings) : string[] {

  if(ipv4Subnet) {
    const cidr = IPNetwork.parse(ipv4Subnet);
-    if(ipv4Address && !cidr.contains(IPNetwork.parse(`${ipv4Address}/32`))) {
+    if(!ipv4Address) {
+      errors.push("需要设置IPv4地址");
+    } else if(!cidr.contains(IPNetwork.parse(`${ipv4Address}/32`))) {
      errors.push("IPv4不在子网范围中");
    }
  }

  if(ipv6Subnet) {
    const cidr = IPNetwork.parse(ipv6Subnet);
-    if(ipv6Address && !cidr.contains(IPNetwork.parse(`${ipv6Address}/128`))) {
+    if(!ipv6Address) {
+      errors.push("需要设置IPv6地址");
+    } else if(!cidr.contains(IPNetwork.parse(`${ipv6Address}/128`))) {
      errors.push("IPv6不在子网范围中");
    }
  }
--- a/src/components/SettingsEditor.tsx
+++ b/src/components/SettingsEditor.tsx
@ -17,7 +17,7 @@ function Validate(updateData: Settings) : string[] {
  if(ipv4Subnet) {
    const result = IPNetwork.parse(ipv4Subnet)
    if(!result.isValid) {
-      errors.push("IPv4子网：" + (result.error || "ipv4子网不合法"))
+      errors.push("IPv4子网：" + (result.error ?? "ipv4子网不合法"))
    } else if(result.version != 'IPv4') {
      errors.push("IPv4子网：" + "非IPv4 CIDR");
    }
@ -26,7 +26,7 @@ function Validate(updateData: Settings) : string[] {
  if(ipv6Subnet) {
    const result = IPNetwork.parse(ipv6Subnet)
    if(!result.isValid) {
-      errors.push("IPv6子网：" + (result.error || "子网不合法"));
+      errors.push("IPv6子网：" + (result.error ?? "子网不合法"));
    } else if(result.version != 'IPv6') {
      errors.push("IPv6子网：" + "非IPv6 CIDR");
    }
--- a/src/types/graph.ts
+++ b/src/types/graph.ts
@ -38,11 +38,4 @@ export interface Settings {

  ipv4Subnet?: string;
  ipv6Subnet?: string;
-}
-
-export const initialSettings : Settings = {
-  listenPort: 38894,
-  mtu: 1420,
-};
-
-export const SettingsContext = createContext<Settings>(initialSettings);
+}