104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import DraggablePanel from "@/components/DraggablePanel";
|
|
import Logo from "@/widgets/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";
|
|
import ComponentPaletteDrawer from "@/components/ComponentPaletteDrawer";
|
|
|
|
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>
|
|
<ComponentPaletteDrawer />
|
|
<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}
|
|
widgetsId={item.widgetsId}
|
|
/>
|
|
))}
|
|
</DraggablePanel>
|
|
</div>
|
|
));
|
|
}
|