添加Toast

TODO.md

@@ -12,4 +12,4 @@
 - [ ] 使用Reducer 和 Immer重构代码
 - [ ] 实现加密功能（完全加密和只加密私钥）
 - [ ] 添加测试用例
-- [ ] 完成！
+- [ ] 体验调优：生成配置完成后弹出预览窗口可以下载或者复制

package-lock.json

@@ -12,6 +12,7 @@
         "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": {
@@ -1811,8 +1812,8 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/d3-color": {
       "version": "3.1.0",
@@ -2343,6 +2344,15 @@
         "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",
@@ -2790,6 +2800,23 @@
         "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",

package.json

@@ -14,6 +14,7 @@
     "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": {

src/App.tsx

@@ -26,6 +26,7 @@ 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[] = [];
@@ -143,6 +144,7 @@ function FlowContent(): ReactNode {
 
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
+      <Toaster/>
       <SettingsContext value={settings}>
         <ReactFlow
           nodes={nodes}

src/components/CustomNode.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useContext } from 'react';
 import { Handle, Position, NodeProps } from '@xyflow/react';
 import { AppNode, SettingsContext } from '../types/graph';
 import './CustomNode.css';
+import toast from 'react-hot-toast';
 
 export default function CustomNode({ 
   data, 
@@ -9,6 +10,7 @@ export default function CustomNode({
 }: NodeProps<AppNode>): ReactNode {
   const handleGenerate = (e: React.MouseEvent) => {
     e.stopPropagation();
+    toast.success('保存成功！');
   };
 
   const settings = useContext(SettingsContext);
@@ -42,7 +44,7 @@ export default function CustomNode({
       </div>
 
       <div className="node-actions">
-        <button className="gen-btn" onClick={handleGenerate} onDoubleClick={e => e.stopPropagation()}>生成配置</button>
+        <button className="gen-btn" onClick={handleGenerate} onDoubleClick={e => e.stopPropagation()}>生成配置并复制</button>
       </div>
 
       {[Position.Top, Position.Bottom, Position.Right, Position.Left].map((position) => (