kevisual/kevisual-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add listen code change

Browse Source
This commit is contained in:
xion 2024-09-23 20:51:59 +08:00
parent 4d308921a3
commit 27f487c48f
13 changed files with 419 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>envision</title>
</head>
<body>
<div id="root"></div>

8
package.json
View File

@ -1,5 +1,5 @@
{
"name": "vite-react",
"name": "@kevisual/envision",
"private": true,
"version": "0.0.0",
"type": "module",
@ -12,17 +12,17 @@
"deploy": "rsync -avz --delete ./dist/ light:/root/apps/envision/web"
},
"dependencies": {
"@abearxiong/container": "0.0.1-alpha.4",
"@abearxiong/container": "0.0.1-alpha.6",
"@abearxiong/flows": "0.0.1-alpha.9",
"@abearxiong/ui": "0.0.1-alpha.0",
"@ant-design/icons": "^5.5.1",
"@icon-park/react": "^1.4.2",
"@kevisual/codemirror": "^0.0.1",
"@kevisual/codemirror": "^0.0.2",
"@kevisual/query": "^0.0.2",
"@kevisual/ui": "^0.0.2",
"@uiw/react-textarea-code-editor": "^3.0.2",
"@xyflow/react": "^12.3.0",
"antd": "^5.20.6",
"antd": "^5.21.0",
"classnames": "^2.5.1",
"clsx": "^2.1.1",
"copy-to-clipboard": "^3.3.3",

141
pnpm-lock.yaml generated
View File

@ -9,8 +9,8 @@ importers:
.:
dependencies:
'@abearxiong/container':
specifier: 0.0.1-alpha.4
version: 0.0.1-alpha.4(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)
specifier: 0.0.1-alpha.6
version: 0.0.1-alpha.6(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)
'@abearxiong/flows':
specifier: 0.0.1-alpha.9
version: 0.0.1-alpha.9(@xyflow/react@12.3.0(@types/react@18.3.8)(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.8)(immer@10.1.1)(react@18.3.1))
@ -24,8 +24,8 @@ importers:
specifier: ^1.4.2
version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@kevisual/codemirror':
specifier: ^0.0.1
version: 0.0.1
specifier: ^0.0.2
version: 0.0.2
'@kevisual/query':
specifier: ^0.0.2
version: 0.0.2
@ -39,8 +39,8 @@ importers:
specifier: ^12.3.0
version: 12.3.0(@types/react@18.3.8)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
antd:
specifier: ^5.20.6
version: 5.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
specifier: ^5.21.0
version: 5.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
classnames:
specifier: ^2.5.1
version: 2.5.1
@ -141,8 +141,8 @@ importers:
packages:
'@abearxiong/container@0.0.1-alpha.4':
resolution: {integrity: sha512-92qU430DQu5p+m6UhlQHyC3LWi/hbrGrDh0pTvhA181ePT/3EwXz3nnHdsHYU+Di2c5qMQEBH1TCMmZaoeacJg==, tarball: https://npm.pkg.github.com/download/@abearxiong/container/0.0.1-alpha.4/c35c637deeda7c86944047f2d39316e03bd2405c}
'@abearxiong/container@0.0.1-alpha.6':
resolution: {integrity: sha512-rhEPkVWGOxn8o7kVSgkHOpc+/PybOQTYt/V9BQpVzM6nXw5Sl1fDCaQux2Nn06bz54bU1O38wGfk6y46S0weSw==, tarball: https://npm.pkg.github.com/download/@abearxiong/container/0.0.1-alpha.6/77e190e08005b8eb0f2a5ca5a6778ae727bdc263}
peerDependencies:
'@emotion/css': ^11.13.0
crypto-js: ^4.2.0
@ -546,8 +546,8 @@ packages:
'@jridgewell/trace-mapping@0.3.25':
resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
'@kevisual/codemirror@0.0.1':
resolution: {integrity: sha512-uW1pm4Q9+WNCeCgKgpHzx01kumFiMMjsor3rF8iyiEmcWNnHnGwj1eLtPs4Ux1ID0Mh2sn3OMKFvUZjcNFi/wA==}
'@kevisual/codemirror@0.0.2':
resolution: {integrity: sha512-z+hINypSarYBj+13en8+Hj/CqTAMVIYN3Rs0ICHRzbikvrDnsnT4ohpnFgcbFPQ/zX3E1mS9ANbx4jGSJEHaPQ==}
'@kevisual/query@0.0.2':
resolution: {integrity: sha512-xE2KhqlF2WDJ8Mt/AKKYnKeBPGxlbNhh7uXSxhO1/Rz95SVfJm0QF6pCEiWi/OHQ93gxIt5qUNEGp9avXHsWxw==}
@ -910,11 +910,8 @@ packages:
resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
engines: {node: '>=12'}
antd@5.20.6:
resolution: {integrity: sha512-TZFmNenHlh26DelHCJbkB+x1OVulIKsN1f/CnAd2NxZLysXqRvSuLUeHcgccqAnxTy7B03GZ6i1tocGxPCNjgA==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
antd@5.21.0:
resolution: {integrity: sha512-eoY3LruXq/8MRCXG46O2cwc+Q8HW8Bhc+pWw7loIt6Dn22tLHckxYF/663kn55JTIOVUnJdmJDP9njdJmLXJsQ==}
any-promise@1.3.0:
resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
@ -1733,14 +1730,14 @@ packages:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-collapse@3.7.3:
resolution: {integrity: sha512-60FJcdTRn0X5sELF18TANwtVi7FtModq649H11mYF1jh83DniMoM4MqY627sEKRCTm4+WXfGDcB7hY5oW6xhyw==}
rc-collapse@3.8.0:
resolution: {integrity: sha512-YVBkssrKPBG09TGfcWWGj8zJBYD9G3XuTy89t5iUmSXrIXEAnO1M+qjUxRW6b4Qi0+wNWG6MHJF/+US+nmIlzA==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-dialog@9.5.2:
resolution: {integrity: sha512-qVUjc8JukG+j/pNaHVSRa2GO2/KbV2thm7yO4hepQ902eGdYK913sGkwg/fh9yhKYV1ql3BKIN2xnud3rEXAPw==}
rc-dialog@9.6.0:
resolution: {integrity: sha512-ApoVi9Z8PaCQg6FsUzS8yvBEQy0ZL2PkuvAgrmohPkN3okps5WZ5WQWPc1RNuiOKaAYv8B97ACdsFU5LizzCqg==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
@ -1764,8 +1761,8 @@ packages:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-image@7.9.0:
resolution: {integrity: sha512-l4zqO5E0quuLMCtdKfBgj4Suv8tIS011F5k1zBBlK25iMjjiNHxA0VeTzGFtUZERSA45gvpXDg8/P6qNLjR25g==}
rc-image@7.11.0:
resolution: {integrity: sha512-aZkTEZXqeqfPZtnSdNUnKQA0N/3MbgR7nUnZ+/4MfSFWPFHZau4p5r5ShaI0KPEMnNjv4kijSCFq/9wtJpwykw==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
@ -1782,14 +1779,14 @@ packages:
react: '>=16.0.0'
react-dom: '>=16.0.0'
rc-mentions@2.15.0:
resolution: {integrity: sha512-f5v5i7VdqvBDXbphoqcQWmXDif2Msd2arritVoWybrVDuHE6nQ7XCYsybHbV//WylooK52BFDouFvyaRDtXZEw==}
rc-mentions@2.16.1:
resolution: {integrity: sha512-GnhSTGP9Mtv6pqFFGQze44LlrtWOjHNrUUAcsdo9DnNAhN4pwVPEWy4z+2jpjkiGlJ3VoXdvMHcNDQdfI9fEaw==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-menu@9.14.1:
resolution: {integrity: sha512-5wlRb3M8S4yGlWhSoEYJ7ZVRElyScdcpUHxgiLxkeig1tEdyKrnED3B2fhpN0Rrpdp9jyhnmZR/Lwq2fH5VvDQ==}
rc-menu@9.15.1:
resolution: {integrity: sha512-UKporqU6LPfHnpPmtP6hdEK4iO5Q+b7BRv/uRpxdIyDGplZy9jwUjsnpev5bs3PQKB0H0n34WAPDfjAfn3kAPA==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
@ -1813,8 +1810,8 @@ packages:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-pagination@4.2.0:
resolution: {integrity: sha512-V6qeANJsT6tmOcZ4XiUmj8JXjRLbkusuufpuoBw2GiAn94fIixYjFLmbruD1Sbhn8fPLDnWawPp4CN37zQorvw==}
rc-pagination@4.3.0:
resolution: {integrity: sha512-UubEWA0ShnroQ1tDa291Fzw6kj0iOeF26IsUObxYTpimgj4/qPCWVFl18RLZE+0Up1IZg0IK4pMn6nB3mjvB7g==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
@ -1858,8 +1855,8 @@ packages:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-segmented@2.3.0:
resolution: {integrity: sha512-I3FtM5Smua/ESXutFfb8gJ8ZPcvFR+qUgeeGFQHBOvRiRKyAk4aBE5nfqrxXx+h8/vn60DQjOt6i4RNtrbOobg==}
rc-segmented@2.5.0:
resolution: {integrity: sha512-B28Fe3J9iUFOhFJET3RoXAPFJ2u47QvLSYcZWC4tFYNGPEjug5LAxEasZlA/PpAxhdOPqGWsGbSj7ftneukJnw==}
peerDependencies:
react: '>=16.0.0'
react-dom: '>=16.0.0'
@ -1891,28 +1888,28 @@ packages:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-table@7.45.7:
resolution: {integrity: sha512-wi9LetBL1t1csxyGkMB2p3mCiMt+NDexMlPbXHvQFmBBAsMxrgNSAPwUci2zDLUq9m8QdWc1Nh8suvrpy9mXrg==}
rc-table@7.47.5:
resolution: {integrity: sha512-fzq+V9j/atbPIcvs3emuclaEoXulwQpIiJA6/7ey52j8+9cJ4P8DGmp4YzfUVDrb3qhgedcVeD6eRgUrokwVEQ==}
engines: {node: '>=8.x'}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-tabs@15.1.1:
resolution: {integrity: sha512-Tc7bJvpEdkWIVCUL7yQrMNBJY3j44NcyWS48jF/UKMXuUlzaXK+Z/pEL5LjGcTadtPvVmNqA40yv7hmr+tCOAw==}
rc-tabs@15.2.0:
resolution: {integrity: sha512-ZfHdGw0krK4walBYNOgPWCcBImSp5NtzJR5+oI4rN9Z44FYDQKozBFfuAQHhumIUtx4EmGaYCFjywwgca/Rs1g==}
engines: {node: '>=8.x'}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-textarea@1.8.1:
resolution: {integrity: sha512-bm36N2ZqwZAP60ZQg2OY9mPdqWC+m6UTjHc+CqEZOxb3Ia29BGHazY/s5bI8M4113CkqTzhtFUDNA078ZiOx3Q==}
rc-textarea@1.8.2:
resolution: {integrity: sha512-UFAezAqltyR00a8Lf0IPAyTd29Jj9ee8wt8DqXyDMal7r/Cg/nDt3e1OOv3Th4W6mKaZijjgwuPXhAfVNTN8sw==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
rc-tooltip@6.2.0:
resolution: {integrity: sha512-iS/3iOAvtDh9GIx1ulY7EFUXUtktFccNLsARo3NPgLf0QW9oT0w3dA9cYWlhqAKmD+uriEwdWz1kH0Qs4zk2Aw==}
rc-tooltip@6.2.1:
resolution: {integrity: sha512-rws0duD/3sHHsD905Nex7FvoUGy2UBQRhTkKxeEvr2FB+r21HsOxcDJI0TzyO8NHhnAA8ILr8pfbSBg5Jj5KBg==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
@ -1930,8 +1927,8 @@ packages:
react: '*'
react-dom: '*'
rc-upload@4.7.0:
resolution: {integrity: sha512-eUwxYNHlsYe5vYhKFAUGrQG95JrnPzY+BmPi1Daq39fWNl/eOc7v4UODuWrVp2LFkQBuV3cMCG/I68iub6oBrg==}
rc-upload@4.8.1:
resolution: {integrity: sha512-toEAhwl4hjLAI1u8/CgKWt30BR06ulPa4iGQSMvSXoHzO88gPCslxqV/mnn4gJU7PDoltGIC9Eh+wkeudqgHyw==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
@ -2373,7 +2370,7 @@ packages:
snapshots:
'@abearxiong/container@0.0.1-alpha.4(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)':
'@abearxiong/container@0.0.1-alpha.6(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)':
dependencies:
'@emotion/css': 11.13.0
crypto-js: 4.2.0
@ -2792,7 +2789,7 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.0
'@kevisual/codemirror@0.0.1': {}
'@kevisual/codemirror@0.0.2': {}
'@kevisual/query@0.0.2': {}
@ -3177,7 +3174,7 @@ snapshots:
ansi-styles@6.2.1: {}
antd@5.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
antd@5.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@ant-design/colors': 7.1.0
'@ant-design/cssinjs': 1.21.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -3196,44 +3193,44 @@ snapshots:
dayjs: 1.11.13
rc-cascader: 3.28.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-checkbox: 3.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-collapse: 3.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-dialog: 9.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-collapse: 3.8.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-dialog: 9.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-drawer: 7.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-dropdown: 4.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-field-form: 2.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-image: 7.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-image: 7.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-input: 1.6.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-input-number: 9.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-mentions: 2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-menu: 9.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-mentions: 2.16.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-menu: 9.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-motion: 2.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-notification: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-pagination: 4.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-pagination: 4.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-picker: 4.6.14(dayjs@1.11.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-progress: 4.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-rate: 2.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-segmented: 2.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-segmented: 2.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-select: 14.15.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-slider: 11.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-steps: 6.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-switch: 4.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-table: 7.45.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-tabs: 15.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-textarea: 1.8.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-tooltip: 6.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-table: 7.47.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-tabs: 15.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-textarea: 1.8.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-tooltip: 6.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-tree: 5.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-tree-select: 5.23.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-upload: 4.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-upload: 4.8.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-util: 5.43.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
scroll-into-view-if-needed: 3.1.0
throttle-debounce: 5.0.2
transitivePeerDependencies:
- date-fns
- luxon
- moment
- react
- react-dom
any-promise@1.3.0: {}
@ -4060,7 +4057,7 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-collapse@3.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-collapse@3.8.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
classnames: 2.5.1
@ -4069,7 +4066,7 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-dialog@9.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-dialog@9.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
'@rc-component/portal': 1.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -4106,12 +4103,12 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-image@7.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-image@7.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
'@rc-component/portal': 1.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
classnames: 2.5.1
rc-dialog: 9.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-dialog: 9.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-motion: 2.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-util: 5.43.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react: 18.3.1
@ -4135,19 +4132,19 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-mentions@2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-mentions@2.16.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
'@rc-component/trigger': 2.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
classnames: 2.5.1
rc-input: 1.6.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-menu: 9.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-textarea: 1.8.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-menu: 9.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-textarea: 1.8.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-util: 5.43.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-menu@9.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-menu@9.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
'@rc-component/trigger': 2.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -4184,7 +4181,7 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-pagination@4.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-pagination@4.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
classnames: 2.5.1
@ -4230,7 +4227,7 @@ snapshots:
react-dom: 18.3.1(react@18.3.1)
resize-observer-polyfill: 1.5.1
rc-segmented@2.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-segmented@2.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
classnames: 2.5.1
@ -4275,7 +4272,7 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-table@7.45.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-table@7.47.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
'@rc-component/context': 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -4286,19 +4283,19 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-tabs@15.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-tabs@15.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
classnames: 2.5.1
rc-dropdown: 4.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-menu: 9.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-menu: 9.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-motion: 2.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
rc-util: 5.43.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-textarea@1.8.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-textarea@1.8.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
classnames: 2.5.1
@ -4308,7 +4305,7 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-tooltip@6.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-tooltip@6.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
'@rc-component/trigger': 2.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -4336,7 +4333,7 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
rc-upload@4.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
rc-upload@4.8.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.25.6
classnames: 2.5.1

2
src/App.tsx
View File

@ -3,6 +3,7 @@ import { ConfigProvider } from 'antd';
import { App as ContainerApp } from './pages/container';
import { App as PanelApp } from './pages/panel';
import { App as PublishApp } from './pages/publish';
import { App as CodeEditorApp } from './pages/code-editor';
export const App = () => {
return (
@ -17,6 +18,7 @@ export const App = () => {
<Route path='/container/*' element={<ContainerApp />} />
<Route path='/panel/*' element={<PanelApp />} />
<Route path='/publish/*' element={<PublishApp />} />
<Route path='/code-editor' element={<CodeEditorApp />} />
<Route path='/404' element={<div>404</div>} />
<Route path='*' element={<div>404</div>} />
</Routes>

29
src/modules/index.ts
View File

@ -1,5 +1,30 @@
import { Query } from '@kevisual/query';
export const query = new Query({});
export const request = query.post;
export const ws = new WebSocket('ws://localhost:6010/api/router');
import { create } from 'zustand';
type Store = {
connected: boolean;
setConnected: (connected: boolean) => void;
};
export const useStore = create<Store>((set) => ({
connected: false,
setConnected: (connected) => set({ connected }),
}));
// 当连接成功时
ws.onopen = () => {
console.log('Connected to WebSocket server');
useStore.getState().setConnected(true);
};
// 接收服务器的消息
ws.onmessage = (event) => {
console.log('Received message:', event.data);
// const message = JSON.parse(event.data);
};
// 处理 WebSocket 关闭
ws.onclose = () => {
console.log('Disconnected from WebSocket server');
};

29
src/pages/code-editor/hooks/use-to-code-editor.ts Normal file
View File

@ -0,0 +1,29 @@
import { useNavigate } from 'react-router';
import { ParseData } from '../store';
export const useToCodeEditor = () => {
const navigate = useNavigate();
const toPage = (pathKey: ParseData['updatePath'], data: ParseData['data']) => {
navigate('/code-editor', {
state: {
updatePath: pathKey,
data,
},
});
};
const PageUpdate = {
path: 'page',
key: 'update',
};
const toPagePage = (data: ParseData['data']) => {
navigate('/code-editor', {
state: {
updatePath: PageUpdate,
data,
},
});
};
return {
toPage,
toPagePage,
};
};

75
src/pages/code-editor/index.tsx Normal file
View File

@ -0,0 +1,75 @@
import { createEditorInstance, editor } from '@kevisual/codemirror/dist/editor.json';
import { useEffect, useRef, useLayoutEffect, useState, useCallback } from 'react';
import { useLocation, useNavigate } from 'react-router';
import { useCodeEditorStore, ParseData } from './store';
import { useToCodeEditor } from './hooks/use-to-code-editor';
export { useToCodeEditor };
import { Button, message } from 'antd';
export const App = () => {
const ref = useRef<HTMLDivElement>(null);
const editorRef = useRef<typeof editor>(null);
const location = useLocation();
const store = useCodeEditorStore();
const [mounted, setMounted] = useState(false);
useEffect(() => {
initEditor();
const state = location.state as ParseData;
if (state && state.data) {
store.init(state);
}
setMounted(true);
return () => {
setMounted(false);
};
}, []);
useLayoutEffect(() => {
if (!mounted) return;
if (editorRef.current) {
setNewValue(store.code);
} else {
setNewValue('');
}
}, [store.code, mounted]);
const initEditor = () => {
const _editor = createEditorInstance(ref.current!);
editorRef.current = _editor;
};
const setNewValue = (value: string) => {
const editor = editorRef.current;
if (editor) {
editor.dispatch({
changes: [{ from: 0, to: editor.state.doc.length, insert: value }],
});
}
};
const getValue = () => {
const editor = editorRef.current;
if (editor) {
return editor.state.doc.toString();
}
return '';
};
const onSave = useCallback(async () => {
const value = getValue();
// store.onUpdate(value);
if (store.dataType === 'object') {
try {
JSON.parse(value);
} catch (error) {
console.error(error);
message.error('JSON format error');
return;
}
}
store.onUpdate(value);
}, [store.dataType]);
return (
<div className='w-full h-full bg-gray-400'>
<div className='px-2 bg-white mb-4'>Code Editor</div>
<Button onClick={onSave}>Save</Button>
<div className='w-full p-4 rounded-md bg-white' style={{ height: 'calc(100% - 130px)' }}>
<div className='w-full h-full' ref={ref}></div>
</div>
</div>
);
};

84
src/pages/code-editor/store.ts Normal file
View File

@ -0,0 +1,84 @@
import { create } from 'zustand';
import { produce } from 'immer';
import { query } from '@/modules';
type QueryPath = {
key?: string;
path?: string;
};
export type ParseData = {
updatePath: QueryPath;
data?: string | Object;
};
type CodeEditorStore = {
code: string;
type: string; // javascript, json
setCode: (code: string) => void;
loading: boolean;
setLoading: (loading: boolean) => void;
data: any;
dataType: string | Object;
setData: (data: any) => void;
updatePath: QueryPath;
setUpdatePath: (updatePath: any) => void;
onUpdate: (data: string) => Promise<any>;
init: (parseData: { updatePath: QueryPath; data?: string | Object }) => void;
};
export const useCodeEditorStore = create<CodeEditorStore>((set, get) => ({
code: '',
type: 'javascript',
setCode: (code: string) => set({ code }),
loading: false,
setLoading: (loading: boolean) => set({ loading }),
data: {},
dataType: 'json',
setData: (data: any) => set({ data }),
updatePath: {},
setUpdatePath: (updatePath) => set({ updatePath }),
onUpdate: async (data: string) => {
const { updatePath, dataType } = get();
const { path, key } = updatePath;
let _newData = data;
if (dataType === 'object') {
try {
_newData = JSON.parse(data);
} catch (error) {
console.error(error);
return;
}
} else if (dataType === 'string') {
_newData = data;
}
if (path && key) {
const res = await query.post({ path, key, data: _newData });
if (res.code === 200) {
set(
produce((state) => {
state.data = res.data;
}),
);
}
}
},
init({ updatePath, data }) {
if (typeof data === 'string' && data) {
set(
produce((state) => {
state.code = data;
state.data = data;
state.dataType = 'string';
state.updatePath = updatePath;
}),
);
} else if (typeof data === 'object' && data) {
set(
produce((state) => {
state.data = data;
state.code = JSON.stringify(data, null, 2);
state.dataType = 'object';
state.updatePath = updatePath;
}),
);
}
},
}));

85
src/pages/container/preview/index.tsx
View File

@ -1,14 +1,60 @@
import { Container } from '@abearxiong/container';
import { Container, ContainerEdit, RenderData } from '@abearxiong/container';
import { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router';
import { query } from '@/modules';
import { replace, useParams } from 'react-router';
import { query, ws, useStore } from '@/modules';
import { message } from 'antd';
export const useListener = (id?: string, opts?: any) => {
const { refresh } = opts || {};
const connected = useStore((state) => state.connected);
// 监听服务器的消息
useEffect(() => {
if (!id) return;
if (!connected) return;
ws.send(
JSON.stringify({
type: 'subscribe',
data: {
type: 'pageEdit',
data: {
cid: id,
// cids: [],
// pids:'',
},
},
}),
);
ws.addEventListener('message', listener);
return () => {
if (!id) return;
if (!connected) return;
ws.removeEventListener('message', listener);
};
}, [id, connected]);
const listener = (event) => {
const parseIfJson = (data: string) => {
try {
return JSON.parse(data);
} catch (e) {
return data;
}
};
const receivedData = parseIfJson(event.data);
if (typeof receivedData === 'string') return;
if (receivedData.type === 'pageEdit' && receivedData.source === 'container') {
const { data: containerData } = receivedData;
if (containerData.id !== id) return;
if (refresh) {
refresh(containerData);
}
}
};
};
export const Preview = () => {
const params = useParams<{ id: string }>();
const id = params.id;
const ref = useRef<HTMLDivElement>(null);
const containerRef = useRef<any>(null);
const containerRef = useRef<Container | null>(null);
const [data, setData] = useState<any>({});
useEffect(() => {
@ -28,6 +74,7 @@ export const Preview = () => {
const code = {
id: data.id,
title: data.title,
codeId: data.Id,
code: data.code,
data: data.data,
};
@ -36,14 +83,40 @@ export const Preview = () => {
message.error(res.msg || 'Failed to fetch data');
}
};
const init = async (data: any[]) => {
const refresh = (data: any) => {
if (!data.id) return;
const code = {
id: data.id,
title: data.title,
codeId: data.Id,
code: data.code,
data: data.data,
hash: '',
};
init([code], true);
};
useListener(id, { refresh: refresh });
const init = async (data: any[], replace: boolean = false) => {
// console.log('data', data, ref.current);
if (containerRef.current) {
const container = containerRef.current;
console.log('data', data, container.data);
container.updateData(data);
await new Promise((resolve) => {
setTimeout(resolve, 2000);
});
console.log('update---data', data, container.data);
container.destroy(id!);
container.renderId(id!);
return;
}
console.log('data', containerRef.current);
const container = new Container({
root: ref.current!,
data: data as any,
showChild: false,
});
container.render(id!);
container.renderId(id!);
containerRef.current = container;
};
return (

19
src/pages/panel/deck/index.tsx
View File

@ -43,22 +43,25 @@ export const Deck = () => {
const codes = nodes.map((node: any) => {
const container = node.container;
const data = container?.data || {};
const nodeData = node.data || {};
let style = nodeData.style ?? {
position: 'absolute',
width: 100,
height: 100,
};
return {
id: node.id,
title: node.title,
code: container?.code || '',
data: data,
children: node.children,
...data, // style className shadowRoot showChild
// TODO: style className shadowRoot showChild
className: nodeData.className,
shadowRoot: nodeData.shadowRoot,
showChild: nodeData.showChild,
style,
};
});
// const code = {
// id: data.id,
// title: data.title,
// code: data.code,
// data: data.data,
// };
// init([code]);
init(codes);
console.log('codes', codes);
}

9
src/pages/panel/edit/List.tsx
View File

@ -5,7 +5,7 @@ import { useShallow } from 'zustand/react/shallow';
import { Form } from 'antd';
import copy from 'copy-to-clipboard';
import { useNavigate } from 'react-router';
import { useToCodeEditor } from '@/pages/code-editor';
const FormModal = () => {
const [form] = Form.useForm();
@ -69,6 +69,7 @@ const FormModal = () => {
};
export const List = () => {
const navicate = useNavigate();
const toCodeEditor = useToCodeEditor();
const editStore = useEditStore(
useShallow((state) => {
return {
@ -134,6 +135,12 @@ export const List = () => {
}}>
Deck
</Button>
<Button
onClick={() => {
toCodeEditor.toPagePage(record);
}}>
Source Data Editor
</Button>
<Button
danger
onClick={() => {

22
src/utils/history.ts Normal file
View File

@ -0,0 +1,22 @@
type To = string | Location;
type State<T> = {
[key: string]: any;
} & T;
export const push = <T = any>(to: To, state?: State<T>, refresh = true) => {
const _history = window.history;
if (typeof to === 'string') {
// must key is default, so react navigate can work
_history.pushState({ key: 'default', usr: state }, '', to);
} else {
// const path = to.pathname;
_history.pushState({ key: 'default', usr: state }, '', to.pathname);
}
// must dispatch popstate event, so react navigate can work
refresh && window.dispatchEvent(new Event('popstate'));
};
export const history = {
push,
};
// import { createBrowserHistory } from 'history';
// export const history = createBrowserHistory();

11
vite.config.ts
View File

@ -7,9 +7,7 @@ import nesting from 'tailwindcss/nesting';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
],
plugins: [react()],
css: {
postcss: {
@ -32,6 +30,13 @@ export default defineConfig({
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/api'),
},
'/api/router': {
target: 'ws://localhost:4000',
changeOrigin: true,
ws: true,
rewriteWsOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/api'),
},
},
},
});