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

temp

Browse Source
This commit is contained in:
xion 2024-09-24 00:40:35 +08:00
parent 27f487c48f
commit d53c18606e
8 changed files with 289 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -12,7 +12,7 @@
"deploy": "rsync -avz --delete ./dist/ light:/root/apps/envision/web"
},
"dependencies": {
"@abearxiong/container": "0.0.1-alpha.6",
"@abearxiong/container": "0.0.1-alpha.8",
"@abearxiong/flows": "0.0.1-alpha.9",
"@abearxiong/ui": "0.0.1-alpha.0",
"@ant-design/icons": "^5.5.1",
@ -52,7 +52,7 @@
"globals": "^15.9.0",
"react-is": "^18.3.1",
"tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.12",
"tailwindcss": "^3.4.13",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.6.2",
"typescript-eslint": "^8.6.0",

38
pnpm-lock.yaml generated
View File

@ -9,8 +9,8 @@ importers:
.:
dependencies:
'@abearxiong/container':
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)
specifier: 0.0.1-alpha.8
version: 0.0.1-alpha.8(@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))
@ -86,10 +86,10 @@ importers:
version: 9.11.0
'@tailwindcss/aspect-ratio':
specifier: ^0.4.2
version: 0.4.2(tailwindcss@3.4.12)
version: 0.4.2(tailwindcss@3.4.13)
'@tailwindcss/typography':
specifier: ^0.5.15
version: 0.5.15(tailwindcss@3.4.12)
version: 0.5.15(tailwindcss@3.4.13)
'@types/node':
specifier: ^22.5.5
version: 22.5.5
@ -124,11 +124,11 @@ importers:
specifier: ^2.5.2
version: 2.5.2
tailwindcss:
specifier: ^3.4.12
version: 3.4.12
specifier: ^3.4.13
version: 3.4.13
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.4.12)
version: 1.0.7(tailwindcss@3.4.13)
typescript:
specifier: ^5.6.2
version: 5.6.2
@ -141,8 +141,8 @@ importers:
packages:
'@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}
'@abearxiong/container@0.0.1-alpha.8':
resolution: {integrity: sha512-7DNio7j1YYGIQ1tVLD8p49spwmY1zf+PeX+M5VRw9dQXnKWlFr3FLAWoEJH2Lk7ODEMkRfzwsLMAh1vXFossfQ==, tarball: https://npm.pkg.github.com/download/@abearxiong/container/0.0.1-alpha.8/6191afd30d2b3040a41596d4bf96a319d15ee664}
peerDependencies:
'@emotion/css': ^11.13.0
crypto-js: ^4.2.0
@ -2136,8 +2136,8 @@ packages:
peerDependencies:
tailwindcss: '>=3.0.0 || insiders'
tailwindcss@3.4.12:
resolution: {integrity: sha512-Htf/gHj2+soPb9UayUNci/Ja3d8pTmu9ONTfh4QY8r3MATTZOzmv6UYWF7ZwikEIC8okpfqmGqrmDehua8mF8w==}
tailwindcss@3.4.13:
resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
engines: {node: '>=14.0.0'}
hasBin: true
@ -2370,7 +2370,7 @@ packages:
snapshots:
'@abearxiong/container@0.0.1-alpha.6(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)':
'@abearxiong/container@0.0.1-alpha.8(@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
@ -2933,17 +2933,17 @@ snapshots:
'@rollup/rollup-win32-x64-msvc@4.22.0':
optional: true
'@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.12)':
'@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.13)':
dependencies:
tailwindcss: 3.4.12
tailwindcss: 3.4.13
'@tailwindcss/typography@0.5.15(tailwindcss@3.4.12)':
'@tailwindcss/typography@0.5.15(tailwindcss@3.4.13)':
dependencies:
lodash.castarray: 4.4.0
lodash.isplainobject: 4.0.6
lodash.merge: 4.6.2
postcss-selector-parser: 6.0.10
tailwindcss: 3.4.12
tailwindcss: 3.4.13
'@types/babel__core@7.20.5':
dependencies:
@ -4571,11 +4571,11 @@ snapshots:
tailwind-merge@2.5.2: {}
tailwindcss-animate@1.0.7(tailwindcss@3.4.12):
tailwindcss-animate@1.0.7(tailwindcss@3.4.13):
dependencies:
tailwindcss: 3.4.12
tailwindcss: 3.4.13
tailwindcss@3.4.12:
tailwindcss@3.4.13:
dependencies:
'@alloc/quick-lru': 5.2.0
arg: 5.0.2

1
src/App.tsx
View File

@ -4,6 +4,7 @@ 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';
import '@abearxiong/container/dist/container.css';
export const App = () => {
return (

142
src/modules/deck-to-flow/deck.ts Normal file
View File

@ -0,0 +1,142 @@
import { RenderData } from '@abearxiong/container';
type Page = {
data: {
edges: { id: string; source: string; target: string }[];
nodes: { id: string; type: string; position: { x: number; y: number }; data: any }[];
};
id: string;
type: string;
[key: string]: any;
};
type Container = {
code: string;
id: string;
[key: string]: any;
};
type PageEditData = {
page: Page;
containerList: Container[];
};
export const getContainerData = (pageEditData: PageEditData) => {
const { page, containerList } = pageEditData;
const containerObj = containerList.reduce((acc, container) => {
acc[container.id] = container;
return acc;
}, {});
const { edges, nodes } = page.data;
const nodesObj = nodes.reduce((acc, node) => {
acc[node.id] = node;
return acc;
}, {});
const treeArray = getTreeFromEdges(edges);
const floatNodes = nodes.filter((node) => !treeArray.find((item) => item.id === node.id));
const treeNodes = nodes.filter((node) => treeArray.find((item) => item.id === node.id));
const renderData: RenderData[] = [];
for (let tree of treeArray) {
const node = nodesObj[tree.id];
const container = containerObj[node.data?.cid];
const style = node.data?.style ?? {
position: 'absolute',
width: 100,
height: 100,
};
const data = {
node: { ...node },
container: { ...container },
};
renderData.push({
id: node.id,
children: tree.children,
parents: tree.parents,
code: container?.code || '',
codeId: container?.id,
data: data || {},
className: node.data?.className,
shadowRoot: node.data?.shadowRoot,
showChild: node.data?.showChild,
style,
});
}
for (let node of floatNodes) {
const container = containerObj[node.data?.cid];
const style = node.data?.style ?? {
position: 'absolute',
width: 100,
height: 100,
};
const data = {
node: { ...node },
container: { ...container },
};
renderData.push({
id: node.id,
children: [],
parents: [],
code: container?.code || '',
codeId: container?.id,
data: data || {},
className: node.data?.className,
shadowRoot: node.data?.shadowRoot,
showChild: node.data?.showChild,
style,
});
}
return renderData;
};
const getTreeFromEdges = (
edges: { id: string; source: string; target: string }[],
): {
id: string;
parents: string[];
children: string[];
}[] => {
// 构建树形结构
function buildNodeTree(edges) {
const nodeMap = {};
// 初始化每个节点的子节点列表和父节点列表
edges.forEach((edge) => {
if (!nodeMap[edge.source]) {
nodeMap[edge.source] = { id: edge.source, parents: [], children: [] };
}
if (!nodeMap[edge.target]) {
nodeMap[edge.target] = { id: edge.target, parents: [], children: [] };
}
// 连接父节点和子节点
nodeMap[edge.source].children.push(nodeMap[edge.target]);
nodeMap[edge.target].parents.push(nodeMap[edge.source]);
});
return nodeMap;
}
const nodeTree = buildNodeTree(edges);
// 递归获取所有父节点，按顺序
function getAllParents(node) {
const parents: string[] = [];
function traverseParents(currentNode) {
if (currentNode.parents.length > 0) {
currentNode.parents.forEach((parent: any) => {
parents.push(parent.id);
traverseParents(parent);
});
}
}
traverseParents(node);
return parents.reverse(); // 确保顺序从最顶层到直接父节点
}
function getNodeInfo(nodeMap) {
return Object.values(nodeMap).map((node: any) => ({
id: node.id,
parents: getAllParents(node),
children: node.children.map((child) => child.id),
}));
}
const result = getNodeInfo(nodeTree);
return result;
};

32
src/modules/index.ts
View File

@ -1,30 +1,2 @@
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');
};
export * from './query';
export * from './deck-to-flow/deck';

30
src/modules/query.ts Normal file
View File

@ -0,0 +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');
};

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

@ -74,7 +74,7 @@ export const Preview = () => {
const code = {
id: data.id,
title: data.title,
codeId: data.Id,
codeId: data.id,
code: data.code,
data: data.data,
};
@ -88,7 +88,7 @@ export const Preview = () => {
const code = {
id: data.id,
title: data.title,
codeId: data.Id,
codeId: data.id,
code: data.code,
data: data.data,
hash: '',

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

@ -1,16 +1,70 @@
import { Container, ContainerEdit } from '@abearxiong/container';
import { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router';
import { query } from '@/modules';
import { query, useStore, ws } from '@/modules';
import { message } from 'antd';
import '@abearxiong/container/dist/container.css';
import { getContainerData } from '@/modules/deck-to-flow/deck';
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: {
pid: id,
cids: ['170c0b55-8c13-4d6e-bf35-3f935d979a0d'],
},
},
}),
);
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, pid } = receivedData;
if (pid !== id) return;
if (refresh) {
refresh(containerData);
}
}
};
};
const getParent = (data: { children?: string[]; [key: string]: any }[], id: string, list: string[]) => {
for (let item of data) {
if (item.children?.includes(id)) {
// 找到了当前的父亲节点
list.unshift(item.id);
getParent(data, item.id, list);
return;
}
}
return;
};
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>({});
const containerRef = useRef<ContainerEdit | null>(null);
useEffect(() => {
if (!id) return;
@ -26,44 +80,8 @@ export const Deck = () => {
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 || {};
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,
// TODO: style className shadowRoot showChild
className: nodeData.className,
shadowRoot: nodeData.shadowRoot,
showChild: nodeData.showChild,
style,
};
});
init(codes);
console.log('codes', codes);
const result = getContainerData({ page, containerList });
init(result);
}
// if (res.code === 200) {
// const data = res.data;
@ -80,11 +98,40 @@ export const Deck = () => {
// message.error(res.msg || 'Failed to fetch data');
// }
};
const refresh = async (data: any) => {
console.log('refresh', data);
if (!data.id) return;
const code = {
codeId: data.id,
code: data.code,
hash: '',
};
const container = containerRef.current!;
// @ts-ignore
await container.updateDataCode([code]);
const containerList = container.data.filter((item) => item.codeId === data.id);
await new Promise((resolve) => {
setTimeout(resolve, 2000);
});
console.log('containerList update', containerList);
// container.reRender();
containerList.forEach((item) => {
container.hotReload(item.id);
});
// @ts-ignore
window.c = container;
};
useListener(id, { refresh });
const init = async (data: any[]) => {
console.log(
'init',
data.filter((item) => item.codeId),
);
// console.log('data', data, ref.current);
const container = new ContainerEdit({
root: ref.current!,
data: data as any,
data: data.filter((item) => item.codeId),
showChild: true,
// edit: false,
});