102 lines
2.4 KiB
TypeScript
102 lines
2.4 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import DraggablePanel from "@/components/DraggablePanel";
|
|
import Logo from "@/components/Logo";
|
|
import Preview from "@/components/Draggable/Preview";
|
|
import Draggable from "@/components/Draggable/Draggable";
|
|
import PreviewStore from "@/stores/previewStore";
|
|
import { useObserver } from "mobx-react-lite";
|
|
import ComponentsStore from "@/stores/componentStore";
|
|
|
|
export default function Home() {
|
|
const [isChangeSize, setIsSizeChangeSize] = useState(false);
|
|
const [isDraggable, setIsDraggable] = useState(false);
|
|
const { components } = ComponentsStore;
|
|
useEffect(() => {
|
|
ComponentsStore.initComponent([
|
|
{
|
|
id: "1",
|
|
x: 0,
|
|
y: 0,
|
|
width: 320,
|
|
height: 160,
|
|
component: () => <Logo />
|
|
},
|
|
{
|
|
id: "2",
|
|
x: 336,
|
|
y: 0,
|
|
width: 160,
|
|
height: 320,
|
|
component: () => <Logo />
|
|
},
|
|
{
|
|
id: "3",
|
|
x: 336,
|
|
y: 0,
|
|
width: 160,
|
|
height: 320,
|
|
component: () => <Logo />
|
|
},
|
|
{
|
|
id: "4",
|
|
x: 336,
|
|
y: 0,
|
|
width: 160,
|
|
height: 320,
|
|
component: () => <Logo />
|
|
},
|
|
{
|
|
id: "5",
|
|
x: 336,
|
|
y: 0,
|
|
width: 160,
|
|
height: 320,
|
|
component: () => <Logo />
|
|
},
|
|
{
|
|
id: "6",
|
|
x: 336,
|
|
y: 0,
|
|
width: 160,
|
|
height: 320,
|
|
component: () => <Logo />
|
|
},
|
|
]);
|
|
}, [])
|
|
|
|
return useObserver(() => (
|
|
<div className="h-screen w-screen p-4">
|
|
<label className="swap">
|
|
<input
|
|
type="checkbox"
|
|
onChange={(e) => setIsSizeChangeSize(e.target.checked)}
|
|
/>
|
|
<div className="swap-on">编辑</div>
|
|
<div className="swap-off">锁定</div>
|
|
</label>
|
|
<label className="swap">
|
|
<input
|
|
type="checkbox"
|
|
onChange={(e) => setIsDraggable(e.target.checked)}
|
|
/>
|
|
<div className="swap-on">拖拽</div>
|
|
<div className="swap-off">锁定</div>
|
|
</label>
|
|
<DraggablePanel draggable={isDraggable}>
|
|
{ComponentsStore.components.map((item) => (
|
|
<Draggable
|
|
key={item.id}
|
|
id={item.id}
|
|
x={item.x}
|
|
y={item.y}
|
|
width={item.width}
|
|
height={item.height}
|
|
component={() => <Logo />}
|
|
/>
|
|
))}
|
|
</DraggablePanel>
|
|
</div>
|
|
));
|
|
}
|