107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
import { Container, ContainerEdit } from '@abearxiong/container';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { useParams } from 'react-router';
|
|
import { query } from '@/modules';
|
|
import { message } from 'antd';
|
|
import '@abearxiong/container/dist/container.css';
|
|
|
|
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 || {};
|
|
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);
|
|
}
|
|
// 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 ContainerEdit({
|
|
root: ref.current!,
|
|
data: data as any,
|
|
showChild: true,
|
|
// edit: 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>
|
|
);
|
|
};
|