From 052dd919cd3e940ff34b334168989ff84fa13a7c Mon Sep 17 00:00:00 2001
From: xion <xiongxiao1012@outlook.com>
Date: Wed, 18 Sep 2024 23:11:13 +0800
Subject: [PATCH] feat: add preview and change edit and flow

---
 package.json                          |   5 +-
 pnpm-lock.yaml                        | 228 +++++++++++++++++++++++++-
 src/pages/container/edit/List.tsx     |  31 +++-
 src/pages/container/index.tsx         |   4 +-
 src/pages/container/preview/index.tsx |  61 +++++++
 src/pages/panel/deck/index.tsx        | 101 ++++++++++++
 src/pages/panel/edit/List.tsx         | 173 ++++++++++++++++++-
 src/pages/panel/flow/Flow.tsx         | 102 ++++++++----
 src/pages/panel/flow/index.tsx        |  27 ++-
 src/pages/panel/index.tsx             |   5 +-
 src/pages/panel/store/edit.ts         |   6 +-
 src/pages/panel/store/panel.ts        |  68 ++++++++
 tsconfig.app.json                     |   2 -
 13 files changed, 755 insertions(+), 58 deletions(-)
 create mode 100644 src/pages/container/preview/index.tsx

diff --git a/package.json b/package.json
index b7d3649..8163561 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "deploy": "rsync -avz --delete ./dist/ light:/root/apps/envision/web"
   },
   "dependencies": {
-    "@abearxiong/flows": "0.0.1-alpha.6",
+    "@abearxiong/container": "0.0.1-alpha.0",
+    "@abearxiong/flows": "0.0.1-alpha.8",
     "@abearxiong/ui": "0.0.1-alpha.0",
     "@ant-design/icons": "^5.4.0",
     "@icon-park/react": "^1.4.2",
@@ -22,6 +23,7 @@
     "antd": "^5.20.6",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
+    "copy-to-clipboard": "^3.3.3",
     "immer": "^10.1.1",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.7",
@@ -30,6 +32,7 @@
     "react-router": "^6.26.2",
     "react-router-dom": "^6.26.2",
     "react-toastify": "^10.0.5",
+    "vite-plugin-tsconfig-paths": "^1.4.1",
     "zustand": "^4.5.5"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2a4441..17c0bd2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@abearxiong/container':
+        specifier: 0.0.1-alpha.0
+        version: 0.0.1-alpha.0
       '@abearxiong/flows':
-        specifier: 0.0.1-alpha.6
-        version: 0.0.1-alpha.6(@xyflow/react@12.3.0(@types/react@18.3.7)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zustand@4.5.5(@types/react@18.3.7)(immer@10.1.1)(react@18.3.1))
+        specifier: 0.0.1-alpha.8
+        version: 0.0.1-alpha.8(@xyflow/react@12.3.0(@types/react@18.3.7)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zustand@4.5.5(@types/react@18.3.7)(immer@10.1.1)(react@18.3.1))
       '@abearxiong/ui':
         specifier: 0.0.1-alpha.0
         version: 0.0.1-alpha.0
@@ -38,6 +41,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      copy-to-clipboard:
+        specifier: ^3.3.3
+        version: 3.3.3
       immer:
         specifier: ^10.1.1
         version: 10.1.1
@@ -62,6 +68,9 @@ importers:
       react-toastify:
         specifier: ^10.0.5
         version: 10.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      vite-plugin-tsconfig-paths:
+        specifier: ^1.4.1
+        version: 1.4.1(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))
       zustand:
         specifier: ^4.5.5
         version: 4.5.5(@types/react@18.3.7)(immer@10.1.1)(react@18.3.1)
@@ -126,8 +135,11 @@ importers:
 
 packages:
 
-  '@abearxiong/flows@0.0.1-alpha.6':
-    resolution: {integrity: sha512-CV9U4WZBpebsK00s0LrdOj4QoUa3BgUqiA+UhWPSRxEqtp+r5Vgo2/7MDeoKLyhZ8YQZ7fMcGQl4w0zcWKKG3Q==, tarball: https://npm.pkg.github.com/download/@abearxiong/flows/0.0.1-alpha.6/a1af0defd5b351d7316f800201d222472a763369}
+  '@abearxiong/container@0.0.1-alpha.0':
+    resolution: {integrity: sha512-k0IccMq4Q05eSYsZOMGjOX4fs824JmXngnt6V3wZ01+0xGzvodmYe5ooEnb1TqUz3hWPFMOoPUCQbMsg00LHAA==, tarball: https://npm.pkg.github.com/download/@abearxiong/container/0.0.1-alpha.0/41c8dc7d007947465f35b91e78b74fc773c63e27}
+
+  '@abearxiong/flows@0.0.1-alpha.8':
+    resolution: {integrity: sha512-QLTH2gWw2HewLh8veK0ojmnhosgAOfs/Or9SlAMfNkOAYd2IypVebxAXEuYALrqDBalA1CLCi/f3IjaANS+tXg==, tarball: https://npm.pkg.github.com/download/@abearxiong/flows/0.0.1-alpha.8/3d86a1d0261cf3f810ab1a5633b74ecb5aadebf4}
     peerDependencies:
       '@xyflow/react': ^12.3.0
       immer: ^10.1.1
@@ -274,12 +286,42 @@ packages:
     resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
     engines: {node: '>=10'}
 
+  '@emotion/babel-plugin@11.12.0':
+    resolution: {integrity: sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==}
+
+  '@emotion/cache@11.13.1':
+    resolution: {integrity: sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==}
+
+  '@emotion/css@11.13.0':
+    resolution: {integrity: sha512-BUk99ylT+YHl+W/HN7nv1RCTkDYmKKqa1qbvM/qLSQEg61gipuBF5Hptk/2/ERmX2DCv0ccuFGhz9i0KSZOqPg==}
+
   '@emotion/hash@0.8.0':
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
 
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
+  '@emotion/serialize@1.3.1':
+    resolution: {integrity: sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==}
+
+  '@emotion/sheet@1.4.0':
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
+
+  '@emotion/unitless@0.10.0':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+
   '@emotion/unitless@0.7.5':
     resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
 
+  '@emotion/utils@1.4.0':
+    resolution: {integrity: sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==}
+
+  '@emotion/weak-memoize@0.4.0':
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -716,6 +758,9 @@ packages:
   '@types/node@22.5.5':
     resolution: {integrity: sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==}
 
+  '@types/parse-json@4.0.2':
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+
   '@types/prismjs@1.26.4':
     resolution: {integrity: sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==}
 
@@ -878,6 +923,10 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+
   bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
 
@@ -977,16 +1026,26 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
   copy-to-clipboard@3.3.3:
     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
 
+  cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -1080,6 +1139,9 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -1180,6 +1242,9 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1303,6 +1368,9 @@ packages:
   is-alphanumerical@2.0.1:
     resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
 
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -1370,6 +1438,9 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -1525,6 +1596,10 @@ packages:
   parse-entities@4.0.1:
     resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
 
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
   parse-numeric-range@1.3.0:
     resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
 
@@ -1549,6 +1624,10 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
@@ -1974,6 +2053,10 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
@@ -2003,6 +2086,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+
   stylis@4.3.4:
     resolution: {integrity: sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==}
 
@@ -2089,6 +2175,11 @@ packages:
       typescript:
         optional: true
 
+  typescript-paths@1.5.1:
+    resolution: {integrity: sha512-lYErSLCON2MSplVV5V/LBgD4UNjMgY3guATdFCZY2q1Nr6OZEu4q6zX/rYMsG1TaWqqQSszg6C9EU7AGWMDrIw==}
+    peerDependencies:
+      typescript: ^4.7.2 || ^5
+
   typescript@5.6.2:
     resolution: {integrity: sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==}
     engines: {node: '>=14.17'}
@@ -2168,6 +2259,11 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
+  vite-plugin-tsconfig-paths@1.4.1:
+    resolution: {integrity: sha512-pGpvsPGDpiM5z7I9ZhBe7H2WAH0gAC2Lh55rM3pE+84V2q7qojNO28wdUl4i/M4XUfJcilhyucmbc9D7IKqpXA==}
+    peerDependencies:
+      vite: '*'
+
   vite@5.4.6:
     resolution: {integrity: sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -2222,6 +2318,10 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
   yaml@2.5.1:
     resolution: {integrity: sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==}
     engines: {node: '>= 14'}
@@ -2251,7 +2351,15 @@ packages:
 
 snapshots:
 
-  '@abearxiong/flows@0.0.1-alpha.6(@xyflow/react@12.3.0(@types/react@18.3.7)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zustand@4.5.5(@types/react@18.3.7)(immer@10.1.1)(react@18.3.1))':
+  '@abearxiong/container@0.0.1-alpha.0':
+    dependencies:
+      '@emotion/css': 11.13.0
+      crypto-js: 4.2.0
+      eventemitter3: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@abearxiong/flows@0.0.1-alpha.8(@xyflow/react@12.3.0(@types/react@18.3.7)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zustand@4.5.5(@types/react@18.3.7)(immer@10.1.1)(react@18.3.1))':
     dependencies:
       '@ant-design/icons': 5.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@icon-park/react': 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2453,10 +2561,64 @@ snapshots:
 
   '@ctrl/tinycolor@3.6.1': {}
 
+  '@emotion/babel-plugin@11.12.0':
+    dependencies:
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/runtime': 7.25.6
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.1
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/cache@11.13.1':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.0
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+
+  '@emotion/css@11.13.0':
+    dependencies:
+      '@emotion/babel-plugin': 11.12.0
+      '@emotion/cache': 11.13.1
+      '@emotion/serialize': 1.3.1
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@emotion/hash@0.8.0': {}
 
+  '@emotion/hash@0.9.2': {}
+
+  '@emotion/memoize@0.9.0': {}
+
+  '@emotion/serialize@1.3.1':
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.0
+      csstype: 3.1.3
+
+  '@emotion/sheet@1.4.0': {}
+
+  '@emotion/unitless@0.10.0': {}
+
   '@emotion/unitless@0.7.5': {}
 
+  '@emotion/utils@1.4.0': {}
+
+  '@emotion/weak-memoize@0.4.0': {}
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -2817,6 +2979,8 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
+  '@types/parse-json@4.0.2': {}
+
   '@types/prismjs@1.26.4': {}
 
   '@types/prop-types@15.7.12': {}
@@ -3065,6 +3229,12 @@ snapshots:
       postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
+  babel-plugin-macros@3.1.0:
+    dependencies:
+      '@babel/runtime': 7.25.6
+      cosmiconfig: 7.1.0
+      resolve: 1.22.8
+
   bail@2.0.2: {}
 
   balanced-match@1.0.2: {}
@@ -3156,18 +3326,30 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  convert-source-map@1.9.0: {}
+
   convert-source-map@2.0.0: {}
 
   copy-to-clipboard@3.3.3:
     dependencies:
       toggle-selection: 1.0.6
 
+  cosmiconfig@7.1.0:
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crypto-js@4.2.0: {}
+
   cssesc@3.0.0: {}
 
   csstype@3.1.3: {}
@@ -3240,6 +3422,10 @@ snapshots:
 
   entities@4.5.0: {}
 
+  error-ex@1.3.2:
+    dependencies:
+      is-arrayish: 0.2.1
+
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5
@@ -3378,6 +3564,8 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-root@1.1.0: {}
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -3533,6 +3721,8 @@ snapshots:
       is-alphabetical: 2.0.1
       is-decimal: 2.0.1
 
+  is-arrayish@0.2.1: {}
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -3581,6 +3771,8 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
+  json-parse-even-better-errors@2.3.1: {}
+
   json-schema-traverse@0.4.1: {}
 
   json-stable-stringify-without-jsonify@1.0.1: {}
@@ -3732,6 +3924,13 @@ snapshots:
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
 
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
   parse-numeric-range@1.3.0: {}
 
   parse5@6.0.1: {}
@@ -3751,6 +3950,8 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
+  path-type@4.0.0: {}
+
   picocolors@1.1.0: {}
 
   picomatch@2.3.1: {}
@@ -4279,6 +4480,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  source-map@0.5.7: {}
+
   space-separated-tokens@2.0.2: {}
 
   string-convert@0.2.1: {}
@@ -4310,6 +4513,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  stylis@4.2.0: {}
+
   stylis@4.3.4: {}
 
   sucrase@3.35.0:
@@ -4410,6 +4615,10 @@ snapshots:
       - eslint
       - supports-color
 
+  typescript-paths@1.5.1(typescript@5.6.2):
+    dependencies:
+      typescript: 5.6.2
+
   typescript@5.6.2: {}
 
   undici-types@6.19.8: {}
@@ -4530,6 +4739,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
+  vite-plugin-tsconfig-paths@1.4.1(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5)):
+    dependencies:
+      typescript-paths: 1.5.1(typescript@5.6.2)
+      vite: 5.4.6(@types/node@22.5.5)
+    transitivePeerDependencies:
+      - typescript
+
   vite@5.4.6(@types/node@22.5.5):
     dependencies:
       esbuild: 0.21.5
@@ -4561,6 +4777,8 @@ snapshots:
 
   yallist@3.1.1: {}
 
+  yaml@1.10.2: {}
+
   yaml@2.5.1: {}
 
   yocto-queue@0.1.0: {}
diff --git a/src/pages/container/edit/List.tsx b/src/pages/container/edit/List.tsx
index 5424413..08673e5 100644
--- a/src/pages/container/edit/List.tsx
+++ b/src/pages/container/edit/List.tsx
@@ -4,7 +4,8 @@ import { TextArea } from '../components/TextArea';
 import { useContainerStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
-
+import copy from 'copy-to-clipboard';
+import { useNavigate } from 'react-router';
 const FormModal = () => {
   const [form] = Form.useForm();
   const containerStore = useContainerStore(
@@ -73,6 +74,7 @@ const FormModal = () => {
   );
 };
 export const ContainerList = () => {
+  const navicate = useNavigate();
   const containerStore = useContainerStore(
     useShallow((state) => {
       return {
@@ -90,10 +92,23 @@ export const ContainerList = () => {
   }, []);
 
   const columns = [
-    // {
-    //   title: 'ID',
-    //   dataIndex: 'id',
-    // },
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      render: (text: string) => {
+        return (
+          <div
+            className='w-40 truncate cursor-pointer'
+            title={text}
+            onClick={() => {
+              copy(text);
+              message.success('copy success');
+            }}>
+            {text}
+          </div>
+        );
+      },
+    },
     {
       title: 'Title',
       dataIndex: 'title',
@@ -124,6 +139,12 @@ export const ContainerList = () => {
               }}>
               Edit
             </Button>
+            <Button
+              onClick={() => {
+                navicate('/container/preview/' + record.id);
+              }}>
+              Preview
+            </Button>
             <Button
               danger
               onClick={() => {
diff --git a/src/pages/container/index.tsx b/src/pages/container/index.tsx
index c7b6f4a..69097ad 100644
--- a/src/pages/container/index.tsx
+++ b/src/pages/container/index.tsx
@@ -1,13 +1,15 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { ContainerList } from './edit/List';
 import { Main } from './layouts';
-
+import { Preview } from './preview';
 export const App = () => {
   return (
     <Routes>
       <Route element={<Main />}>
         <Route path='/' element={<Navigate to='/container/edit/list' />}></Route>
         <Route path='edit/list' element={<ContainerList />} />
+        <Route path='preview/:id' element={<Preview />} />
+        
         <Route path='/' element={<div>Home</div>} />
       </Route>
     </Routes>
diff --git a/src/pages/container/preview/index.tsx b/src/pages/container/preview/index.tsx
new file mode 100644
index 0000000..f8e6784
--- /dev/null
+++ b/src/pages/container/preview/index.tsx
@@ -0,0 +1,61 @@
+import { Container } from '@abearxiong/container';
+import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router';
+import { query } from '@/modules';
+import { message } from 'antd';
+
+export const Preview = () => {
+  const params = useParams<{ id: string }>();
+  const id = params.id;
+  const ref = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<any>(null);
+  const [data, setData] = useState<any>({});
+
+  useEffect(() => {
+    if (!id) return;
+    fetch();
+  }, []);
+  const fetch = async () => {
+    const res = await query.post({
+      path: 'container',
+      key: 'get',
+      id,
+    });
+    if (res.code === 200) {
+      const data = res.data;
+      // setData([data]);
+      console.log('data', data);
+      const code = {
+        id: data.id,
+        title: data.title,
+        code: data.code,
+        data: data.data,
+      };
+      init([code]);
+    } else {
+      message.error(res.msg || 'Failed to fetch data');
+    }
+  };
+  const init = async (data: any[]) => {
+    // console.log('data', data, ref.current);
+    const container = new Container({
+      root: ref.current!,
+      data: data as any,
+      showChild: false,
+    });
+    container.render(id!);
+    containerRef.current = container;
+  };
+  return (
+    <div className='w-full h-full bg-gray-200'>
+      <div className='text-center mb-10 font-bold text-4xl mt-4 '>Preview</div>
+      <div
+        className='flex '
+        style={{
+          height: 'calc(100% - 32px)',
+        }}>
+        <div className='mx-auto border bg-white h-h-full w-[80%] h-[80%]' ref={ref}></div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/panel/deck/index.tsx b/src/pages/panel/deck/index.tsx
index e69de29..f7c71e4 100644
--- a/src/pages/panel/deck/index.tsx
+++ b/src/pages/panel/deck/index.tsx
@@ -0,0 +1,101 @@
+import { Container } from '@abearxiong/container';
+import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router';
+import { query } from '@/modules';
+import { message } from 'antd';
+
+export const Deck = () => {
+  const params = useParams<{ id: string }>();
+  const id = params.id;
+  const ref = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<any>(null);
+  const [data, setData] = useState<any>({});
+
+  useEffect(() => {
+    if (!id) return;
+    fetch();
+  }, []);
+  const fetch = async () => {
+    const res = await query.post({
+      path: 'page',
+      key: 'getDeck',
+      id,
+    });
+    if (res.code === 200) {
+      const data = res.data;
+      console.log('data', data);
+      const { page, containerList } = data;
+      const { edges, nodes } = page.data;
+      for (let edge of edges) {
+        const { source, target } = edge;
+        const node = nodes.find((node: any) => node.id === source);
+        if (!node) continue;
+        node.children = node.children || [];
+        node.children.push(target);
+      }
+      for (let node of nodes) {
+        const container = containerList.find((container: any) => container.id === node.data?.cid);
+        if (container) {
+          node.container = container;
+        }
+      }
+      const codes = nodes.map((node: any) => {
+        const container = node.container;
+        const data = container?.data || {};
+        return {
+          id: node.id,
+          title: node.title,
+          code: container?.code || '',
+          data: data,
+          children: node.children,
+          ...data, // style className shadowRoot showChild
+        };
+      });
+      // const code = {
+      //   id: data.id,
+      //   title: data.title,
+      //   code: data.code,
+      //   data: data.data,
+      // };
+      // init([code]);
+      init(codes);
+      console.log('codes', codes);
+    }
+    // if (res.code === 200) {
+    //   const data = res.data;
+    //   // setData([data]);
+    //   console.log('data', data);
+    //   const code = {
+    //     id: data.id,
+    //     title: data.title,
+    //     code: data.code,
+    //     data: data.data,
+    //   };
+    //   init([code]);
+    // } else {
+    //   message.error(res.msg || 'Failed to fetch data');
+    // }
+  };
+  const init = async (data: any[]) => {
+    // console.log('data', data, ref.current);
+    const container = new Container({
+      root: ref.current!,
+      data: data as any,
+      showChild: true,
+    });
+    container.render(id!);
+    containerRef.current = container;
+  };
+  return (
+    <div className='w-full h-full bg-gray-200'>
+      <div className='text-center mb-10 font-bold text-4xl mt-4 '>Preview</div>
+      <div
+        className='flex '
+        style={{
+          height: 'calc(100% - 32px)',
+        }}>
+        <div className='mx-auto border bg-white h-h-full w-[80%] h-[80%]' ref={ref}></div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/panel/edit/List.tsx b/src/pages/panel/edit/List.tsx
index dccf5d5..7e41b97 100644
--- a/src/pages/panel/edit/List.tsx
+++ b/src/pages/panel/edit/List.tsx
@@ -1,3 +1,172 @@
-export const List = () => {
-  return <div>List</div>;
+import { useEditStore } from '../store';
+import { Button, Input, message, Modal, Table } from 'antd';
+import { useEffect, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { Form } from 'antd';
+import copy from 'copy-to-clipboard';
+import { useNavigate } from 'react-router';
+
+
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const editStore = useEditStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEditModal,
+        setShowEdit: state.setShowEditModal,
+        formData: state.formData,
+        updateData: state.updateData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = editStore.showEdit;
+    if (open) {
+      form.setFieldsValue(editStore.formData || {});
+    } else {
+      form.resetFields();
+    }
+  }, [editStore.showEdit]);
+  const onFinish = async (values: any) => {
+    editStore.updateData(values);
+  };
+  const onClose = () => {
+    editStore.setShowEdit(false);
+    form.resetFields();
+  };
+  const isEdit = editStore.formData.id;
+  return (
+    <Modal title={isEdit ? 'Edit' : 'Add'} open={editStore.showEdit} onClose={onClose} destroyOnClose footer={false} width={800} onCancel={onClose}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        labelCol={{
+          span: 4,
+        }}
+        wrapperCol={{
+          span: 20,
+        }}>
+        <Form.Item name='id' hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name='title' label='title'>
+          <Input />
+        </Form.Item>
+        {/* <Form.Item name='code' label='code'>
+          <TextArea value={containerStore.formData.code} />
+        </Form.Item> */}
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Submit
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export const List = () => {
+  const navicate = useNavigate();
+  const editStore = useEditStore(
+    useShallow((state) => {
+      return {
+        setFormData: state.setFormData,
+        setShowEdit: state.setShowEditModal,
+        list: state.list,
+        deleteData: state.deleteData,
+        getList: state.getList,
+        loading: state.loading,
+      };
+    }),
+  );
+  useEffect(() => {
+    editStore.getList();
+  }, []);
+
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      render: (text: string) => {
+        return (
+          <div
+            className='w-40 truncate cursor-pointer'
+            title={text}
+            onClick={() => {
+              copy(text);
+              message.success('copy success');
+            }}>
+            {text}
+          </div>
+        );
+      },
+    },
+    {
+      title: 'Title',
+      dataIndex: 'title',
+    },
+
+    {
+      title: 'Operation',
+      dataIndex: 'operation',
+      render: (text: string, record: any) => {
+        return (
+          <div className='flex gap-2'>
+            <Button
+              type='primary'
+              onClick={() => {
+                editStore.setFormData(record);
+                editStore.setShowEdit(true);
+              }}>
+              Edit
+            </Button>
+            <Button
+              onClick={() => {
+                navicate('/container/preview/' + record.id);
+              }}>
+              Preview
+            </Button>
+            <Button
+              danger
+              onClick={() => {
+                editStore.deleteData(record.id);
+              }}>
+              Delete
+            </Button>
+          </div>
+        );
+      },
+    },
+  ];
+  return (
+    <div className='w-full h-full flex flex-col'>
+      <div className='mb-2 w-full p-2 bg-white rounded-lg'>
+        <Button
+          className='w-20 '
+          type='primary'
+          onClick={() => {
+            editStore.setFormData({});
+            editStore.setShowEdit(true);
+          }}>
+          Add
+        </Button>
+      </div>
+      <div className='flex-grow overflow-scroll'>
+        <Table
+          pagination={false}
+          scroll={{
+            y: 600,
+          }}
+          loading={editStore.loading}
+          dataSource={editStore.list}
+          rowKey='id'
+          columns={columns}
+        />
+      </div>
+      <div className='h-2'></div>
+      <FormModal />
+    </div>
+  );
 };
diff --git a/src/pages/panel/flow/Flow.tsx b/src/pages/panel/flow/Flow.tsx
index e60c7fc..0fbac71 100644
--- a/src/pages/panel/flow/Flow.tsx
+++ b/src/pages/panel/flow/Flow.tsx
@@ -14,33 +14,17 @@ import {
   useStoreApi,
   Panel,
 } from '@xyflow/react';
-import type { Node } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { useShallow } from 'zustand/react/shallow';
-import { useAddNode } from '@abearxiong/flows';
-import { Router, Container } from '@abearxiong/flows';
-console.log("R", Router);
-import { useContainerMenu, useRouterMenu } from '@abearxiong/flows';
+import { Container, useAddNode, ContainerMenusList, useMenuFlow } from '@abearxiong/flows';
+import { useMenuEmitter, ContainerMenusKeys } from '@abearxiong/flows';
+import { nanoid } from 'nanoid';
 import { Button } from 'antd';
+import { usePanelStore } from '../store';
 // router: Router
 const nodeTypes = {
   container: Container,
 };
-export const initialNodes: Node[] = [
-  { id: '1', position: { x: 100, y: 100 }, data: { label: '1' } },
-  { id: '2', position: { x: 100, y: 400 }, data: { label: '2' } },
-  { id: '3', position: { x: 100, y: 700 }, data: { label: '3' }, drag: true },
-].map((node) => ({
-  ...node,
-  // type: 'router',
-  type: 'container',
-  position: {
-    x: node.position.y,
-    y: node.position.x,
-  },
-}));
-
-export const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
 export const Flow = () => {
   return (
@@ -50,17 +34,58 @@ export const Flow = () => {
   );
 };
 const ReactFlowApp = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([...initialNodes]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState<any>([...initialEdges]);
-
-  const reactFlow = useReactFlow();
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
 
   const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+  const panelStore = usePanelStore(
+    useShallow((state) => {
+      return {
+        data: state.data,
+        saveNodesEdges: state.saveNodesEdges,
+      };
+    }),
+  );
+  useEffect(() => {
+    if (panelStore.data?.id) {
+      const { data } = panelStore.data || {};
+      const nodes = data.nodes || [];
+      const edges = data.edges || [];
+      setNodes(nodes);
+      setEdges(edges);
+    } else {
+      setNodes([]);
+      setEdges([]);
+    }
+  }, [panelStore.data]);
+  const { menuCom, onContextMenu, onClose } = useMenuFlow(
+    (item, cacheData) => {
+      emit({
+        menu: item,
+        data: cacheData,
+      });
+    },
+    {
+      menusList: ContainerMenusList,
+    },
+  );
 
-  const { menuCom, onContextMenu, onClose } = useContainerMenu((item, cacheData) => {
-    console.log(item, cacheData);
+  const { emit } = useMenuEmitter<ContainerMenusKeys>({
+    preview: ({ menu, data }) => {
+      console.log('preview', data);
+      if (data?.data?.cid) {
+        window.open(`/container/preview/${data.data.cid}`, '_blank');
+      }
+    },
   });
   const { onNeedAdd, onAdd, onMouseMove, adding } = useAddNode();
+  const onSave = useCallback(() => {
+    panelStore.saveNodesEdges({
+      nodes,
+      edges,
+    });
+  }, [nodes, edges]);
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -99,16 +124,25 @@ const ReactFlowApp = () => {
       }}>
       <MiniMap />
       <Controls />
-      <Background gap={[14, 14]} size={2} color='#E4E5E7' />
+      {/* <Background gap={[14, 14]} size={2} color='#E4E5E7' /> */}
+      <Background color='#000' />
       <Panel>{menuCom}</Panel>
       <Panel>
-        <Button
-          type='primary'
-          onClick={(e) => {
-            onNeedAdd({ id: '5', data: { label: '测试添加按钮' }, type: 'router' }, e);
-          }}>
-          测试添加按钮
-        </Button>
+        <div className='flex gap-2'>
+          <Button
+            type='primary'
+            onClick={(e) => {
+              onNeedAdd({ id: nanoid(6), data: { label: '容器' }, type: 'container' }, e);
+            }}>
+            测试添加按钮
+          </Button>
+          <Button
+            onClick={() => {
+              onSave();
+            }}>
+            保存
+          </Button>
+        </div>
       </Panel>
     </ReactFlow>
   );
diff --git a/src/pages/panel/flow/index.tsx b/src/pages/panel/flow/index.tsx
index 38dacfd..bcbe60f 100644
--- a/src/pages/panel/flow/index.tsx
+++ b/src/pages/panel/flow/index.tsx
@@ -1,10 +1,31 @@
+import { useParams } from 'react-router';
 import Flow from './Flow';
+import { usePanelStore } from '../store';
+import { useShallow } from 'zustand/react/shallow';
+import { useEffect } from 'react';
 
 export const App = () => {
+  const param = useParams();
+  const id = param.id;
+
+  const panel = usePanelStore(
+    useShallow((state) => {
+      return {
+        getPanel: state.getPanel,
+      };
+    }),
+  );
+  useEffect(() => {
+    id && panel.getPanel(id);
+  }, []);
+  if (!id) {
+    return <>No ID</>;
+  }
   return (
-    <div className='w-full h-full'>
-      sdf
-      <Flow />
+    <div className='w-full h-full p-4'>
+      <div className='w-full h-full'>
+        <Flow />
+      </div>
     </div>
   );
 };
diff --git a/src/pages/panel/index.tsx b/src/pages/panel/index.tsx
index e2e2e89..0831c30 100644
--- a/src/pages/panel/index.tsx
+++ b/src/pages/panel/index.tsx
@@ -2,14 +2,15 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { List } from './edit/List';
 import { Main } from './layouts';
 import { App as FlowApp } from './flow';
-
+import { Deck } from './deck';
 export const App = () => {
   return (
     <Routes>
       <Route element={<Main />}>
         <Route path='/' element={<Navigate to='/panel/edit/list' />}></Route>
         <Route path='edit/list' element={<List />} />
-        <Route path='flow' element={<FlowApp />} />
+        <Route path='flow/:id' element={<FlowApp />} />
+        <Route path='deck/:id' element={<Deck />} />
         <Route path='*' element={'Not Found'}></Route>
       </Route>
     </Routes>
diff --git a/src/pages/panel/store/edit.ts b/src/pages/panel/store/edit.ts
index d5d2898..15a2268 100644
--- a/src/pages/panel/store/edit.ts
+++ b/src/pages/panel/store/edit.ts
@@ -26,7 +26,7 @@ export const useEditStore = create<EditStore>((set, get) => {
     getList: async () => {
       set({ loading: true });
 
-      const res = await query.post({ path: 'panel', key: 'list' });
+      const res = await query.post({ path: 'page', key: 'list' });
       set({ loading: false });
       if (res.code === 200) {
         set({ list: res.data });
@@ -37,7 +37,7 @@ export const useEditStore = create<EditStore>((set, get) => {
     updateData: async (data) => {
       const { getList } = get();
       const res = await query.post({
-        path: 'panel',
+        path: 'page',
         key: 'update',
         data,
       });
@@ -52,7 +52,7 @@ export const useEditStore = create<EditStore>((set, get) => {
     deleteData: async (id) => {
       const { getList } = get();
       const res = await query.post({
-        path: 'panel',
+        path: 'page',
         key: 'delete',
         id,
       });
diff --git a/src/pages/panel/store/panel.ts b/src/pages/panel/store/panel.ts
index 165d51b..bf2afc3 100644
--- a/src/pages/panel/store/panel.ts
+++ b/src/pages/panel/store/panel.ts
@@ -1,14 +1,82 @@
 import { create } from 'zustand';
 import { query } from '@/modules';
 import { message } from 'antd';
+import { produce } from 'immer';
 
 type PanelStore = {
   id: string;
   setId: (id: string) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  data: any;
+  setData: (data: any) => void;
+  getPanel: (id?: string) => Promise<void>;
+  saveNodesEdges: (data: { nodes?: any[]; edges?: any[]; viewport?: any }) => Promise<void>;
 };
 export const usePanelStore = create<PanelStore>((set, get) => {
   return {
     id: '',
     setId: (id) => set({ id }),
+    loading: false,
+    setLoading: (loading) => set({ loading }),
+    data: {},
+    setData: (data) => set({ data }),
+    getPanel: async (pid) => {
+      const id = pid || get().id;
+      if (!id) {
+        message.error('ID is required');
+        return;
+      }
+      set(
+        produce((state) => {
+          state.data = {};
+          state.loading = true;
+        }),
+      );
+      const res = await query.post({
+        path: 'page',
+        key: 'get',
+        id,
+      });
+      set({ loading: false });
+      console.log('res', res);
+      if (res.code === 200) {
+        set(
+          produce((state) => {
+            state.data = res.data;
+            state.id = res.data.id;
+          }),
+        );
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    saveNodesEdges: async ({ edges, nodes, viewport }) => {
+      const { id, data: panelData } = get();
+      const { data } = panelData || {};
+      const res = await query.post({
+        path: 'page',
+        key: 'update',
+        data: {
+          id,
+          data: {
+            ...data.data,
+            edges,
+            nodes,
+            viewport,
+          },
+        },
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set(
+          produce((state) => {
+            state.data = res.data;
+          }),
+        );
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
   };
 });
diff --git a/tsconfig.app.json b/tsconfig.app.json
index aa501b0..df92285 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -32,7 +32,5 @@
   },
   "include": [
     "src",
-    "./node_modules/@abearxiong/flows/**/*",
-    "./node_modules/.pnpm/@abearxiong+flows@0.0.1-alpha.6_@xyflow+react@12.3.0_@types+react@18.3.7_immer@10.1.1_react-d_f4d35tqb5yuohcch2fzlye5hn4/**/*"
   ]
 }
\ No newline at end of file