eeymoo/nexus-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
eeymoo
2025-03-21 17:48:08 +08:00
parent 9cd93e60df
commit 7a4578c16d
10 changed files with 299 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
app/page.tsx
View File

@@ -7,63 +7,64 @@ 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 />
},
]);
}, [])
// 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">
@@ -83,6 +84,7 @@ export default function Home() {
<div className="swap-on">拖拽</div>
<div className="swap-off">锁定</div>
</label>
<ComponentPaletteDrawer />
<DraggablePanel draggable={isDraggable}>
{ComponentsStore.components.map((item) => (
<Draggable