wip

components/Draggable/Draggable.tsx

@@ -0,0 +1,104 @@
+"use client";
+import "@/app/globals.css";
+import { useDraggable } from "@dnd-kit/core";
+import { ReactElement, useEffect, useRef, useState } from "react";
+import { nearestMultiple } from "./utils";
+
+export default function Draggable(props: DraggablePropsType) {
+  const targetRef = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 16, height: 16 });
+  const { id, component, data, x, y, width, height } = props;
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id,
+  });
+
+  const style = transform
+    ? {
+        top: y,
+        left: x,
+        width: width,
+        height: height,
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        opacity: 0.6,
+      }
+    : {
+        top: y,
+        left: x,
+        width: width,
+        height: height,
+      };
+  useEffect(() => {
+    const element = targetRef.current;
+    if (!element) return;
+
+    // 创建 ResizeObserver 实例
+    let timer: any;
+    const observer = new ResizeObserver(
+      _.throttle((entries: any) => {
+        for (const entry of entries) {
+          const { width, height } = entry.contentRect;
+          setSize({
+            width: nearestMultiple(width),
+            height: nearestMultiple(height),
+          });
+          if (timer) {
+            clearTimeout(timer);
+          }
+          // setIsResize(true);
+          timer = setTimeout(() => {
+            entry.target.style.width = nearestMultiple(width) + "px";
+            entry.target.style.height = nearestMultiple(height) + "px";
+            // syncSize(entry.contentRect, containerRef.current);
+            // setIsResize(false);
+          }, 150);
+        }
+      }, 30),
+    );
+
+    // 开始观察元素
+    observer.observe(element);
+
+    // 组件卸载时断开连接
+    return () => {
+      observer.disconnect();
+    };
+  }, []); // 空依赖数组确保只运行一次
+
+  const className = transform ? "shadow-xl absolute w-min min-w-[128px] min-h-[128px]" : "absolute w-min resize overflow-hidden min-w-[128px] min-h-[128px]";
+
+  return (
+    <div className={className} ref={setNodeRef} style={style} {...attributes}>
+      <button
+        className="btn absolute top-1 right-1 z-50 btn-square btn-soft"
+        {...listeners}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.75 9h16.5m-16.5 6.75h16.5"
+          />
+        </svg>
+      </button>
+      {component && component(data??{})}
+    </div>
+  );
+}
+
+export type DraggablePropsType = {
+  id: string;
+  component: (data: Record<string, unknown>) => ReactElement;
+  data?: Record<string, unknown>;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};

components/Draggable/Droppable.tsx

@@ -0,0 +1,14 @@
+"use client";
+import "@/app/globals.css";
+
+export default function Droppable() {
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-gray-300 text-5xl font-bold text-gray-900">
+      <span className="whitespace-nowrap md:whitespace-normal">NEXUSHUB</span>
+    </div>
+  );
+}
+
+export type DroppablePropsType = {
+  
+}

components/Draggable/Preview.tsx

@@ -0,0 +1,35 @@
+"use client";
+import "@/app/globals.css";
+import { CSSProperties, useEffect, useState } from "react";
+
+export default function Preview(props: PreviewPropsType) {
+  const {x, y, width, height} = props;
+  const [style, setStyle] = useState<CSSProperties>({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    setStyle({
+      top: x,
+      left: y,
+      width: width,
+      height: height,
+    });
+  }, [height, props, width, x, y])
+  return (
+    <div
+      className="absolute border-2 border-emerald-500 bg-gradient-to-br from-emerald-100/30 to-cyan-100/30 backdrop-blur-[2px] rounded-lg shadow-lg shadow-emerald-200/50 animate-pulse"
+      style={style}
+    ></div>
+  );
+}
+
+export type PreviewPropsType = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};

components/Draggable/utils/index.ts

@@ -0,0 +1,9 @@
+/**
+ * 计算最接近的 x 的倍数
+ * @param n 输入的数字
+ * @param [x=16] 推荐使用偶数
+ * @returns 最近的 x 的倍数
+ */
+export function nearestMultiple(n: number, x: number = 16): number {
+  return Math.floor((n + x/2) / x) * x;
+}

components/DraggableOld.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useDraggable } from "@dnd-kit/core";
+
+export function Draggable(props) {
+  const { id } = props;
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id,
+    });
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        opacity: 0.6,
+      }
+    : undefined;
+  const className = transform ? "z-30 shadow-xl relative w-min " : "z-10 relative w-min";
+
+  return (
+    <div className={className} ref={setNodeRef} style={style} {...attributes}>
+      <button
+        className="btn absolute top-1 right-1 z-20 btn-square btn-soft"
+        {...listeners}
+        onMouseDown={(e) => e.stopPropagation()} // 阻止事件冒泡
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.75 9h16.5m-16.5 6.75h16.5"
+          />
+        </svg>
+      </button>
+      {props.children}
+    </div>
+  );
+}

components/DraggablePanel.tsx

@@ -1,25 +1,26 @@
 "use client";
-import { ReactElement } from 'react';
-import classnames from 'classnames';
+import classnames from "classnames";
+import { DndContext } from "@dnd-kit/core";
+import { Droppable } from "./Droppable";
 
 export default function DraggablePanel(props: DraggablePanelType) {
-  const { draggable, wdith = 'full', height = 'full', children } = props;
+  const { draggable, wdith = "full", height = "full", children } = props;
 
   const draggablePanelClass = classnames(
-  'p-8 grid gap-[16px]', 
-  `h-${height} w-${wdith}`,  
-  {
-    'h-full': height === 'full' || height === '100%',
-    'w-full': wdith === 'full' || wdith === '100%',
-    'base-200': draggable,     // 当 active 为 true 时添加
-    'base-100': !draggable, // 当 disabled 为 true 时添加
-  });
+    `relative h-${height} w-${wdith}`,
+    {
+      "h-full": height === "full" || height === "100%",
+      "w-full": wdith === "full" || wdith === "100%",
+      "base-200": draggable, // 当 active 为 true 时添加
+      "base-100": !draggable, // 当 disabled 为 true 时添加
+    },
+  );
   return (
-    <div className={draggablePanelClass}>
-      {
-        children
-      }
-    </div>
+    <DndContext >
+      <Droppable>
+        <div className={draggablePanelClass}>{children}</div>
+      </Droppable>
+    </DndContext>
   );
 }
 
@@ -29,4 +30,4 @@ export type DraggablePanelType = {
   height?: number | string;
   children: any;
   // grid: boolean;
-}
+};

components/DraggableWidget.tsx

@@ -1,14 +1,14 @@
 "use client";
-import { CSSProperties, ReactElement, useEffect, useRef, useState } from "react";
-import classnames from 'classnames';
-import _ from 'lodash';
-
+import { ReactElement, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import _ from "lodash";
+import { Draggable } from "./Draggable";
 
 export default function DraggableWidget(props: DraggableWidgetType) {
-  const { children, x, y, w, h } = props;
+  const { id, draggable, children, x, y, w, h } = props;
   const targetRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  
+
   const [size, setSize] = useState({ width: 16, height: 16 });
   const [isResize, setIsResize] = useState(false);
 
@@ -17,38 +17,39 @@ export default function DraggableWidget(props: DraggableWidgetType) {
     if (!element) return;
 
     // 创建 ResizeObserver 实例
-    let timer:any;
-    const observer = new ResizeObserver(_.throttle((entries: any) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        setSize({
-          width: nearestMultipleOf16(width),
-          height: nearestMultipleOf16(height)
-        });
-        if (timer) {
-          clearTimeout(timer);
+    let timer: any;
+    const observer = new ResizeObserver(
+      _.throttle((entries: any) => {
+        for (const entry of entries) {
+          const { width, height } = entry.contentRect;
+          setSize({
+            width: nearestMultipleOf16(width),
+            height: nearestMultipleOf16(height),
+          });
+          if (timer) {
+            clearTimeout(timer);
+          }
+          setIsResize(true);
+          timer = setTimeout(() => {
+            entry.target.style.width = nearestMultipleOf16(width) + "px";
+            entry.target.style.height = nearestMultipleOf16(height) + "px";
+            // syncSize(entry.contentRect, containerRef.current);
+            setIsResize(false);
+          }, 150);
         }
-        setIsResize(true);
-        timer = setTimeout(() => {
-          entry.target.style.width = nearestMultipleOf16(width) + 'px';
-          entry.target.style.height = nearestMultipleOf16(height) + 'px';
-          // syncSize(entry.contentRect, containerRef.current);
-          setIsResize(false);
-        }, 150)
-      }
-    }, 30));
-
+      }, 30),
+    );
 
     const syncSize = (contentRect, containerNode) => {
       const { x, y, height, width } = contentRect;
       const area = {
-        rowStart: x/16 + 1,
-        columnStart: y/16 + 1,
-        rowEnd: width/16+x/16 + 1,
-        columnEnd: height/16+y/16 + 1
-      }
+        rowStart: x / 16 + 1,
+        columnStart: y / 16 + 1,
+        rowEnd: width / 16 + x / 16 + 1,
+        columnEnd: height / 16 + y / 16 + 1,
+      };
       containerNode.style.gridArea = `${area.rowStart} / ${area.columnStart} / ${area.rowEnd} / ${area.columnEnd}`;
-    }
+    };
 
     // 开始观察元素
     observer.observe(element);
@@ -59,36 +60,50 @@ export default function DraggableWidget(props: DraggableWidgetType) {
     };
   }, []); // 空依赖数组确保只运行一次
 
-
   const draggableWidgetClass = classnames(
-    'hover:bg-red-200 hover:outline-2 hover:outline-dashed hover:outline-gray-300 hover:opacity-30 resize block rounded-lg w-64 h-64 max-h-[1048px] max-w-[1888px] cursor-pointer overflow-hidden ', {
-  }
+    "block w-full h-full max-h-[1048px] max-w-[1888px] cursor-pointer overflow-hidden",
+    {
+      "hover:bg-red-200 hover:outline-2 hover:outline-dashed hover:outline-gray-300 hover:opacity-30 resize":
+        draggable,
+    },
   );
 
   const draggableWidgetIndicatorBoxClass = classnames(
-    'absolute top-0 left-0 outline-2 outline-dashed outline-red-500 z-50 pointer-events-none',
+    "absolute top-0 left-0 outline-2 outline-dashed outline-red-500 z-50 pointer-events-none",
     {
-      'invisible': !isResize
-    }
+      invisible: !isResize,
+    },
   );
 
   return (
-    <div className="relative" ref={containerRef} style={{ gridArea: `${x} \ ${w+x} \ ${y} \ ${h+y}`}}>
-      <div className={draggableWidgetClass} ref={targetRef}>
-        {
-          children
-        }
+    <Draggable id={id}>
+      <div
+        className="relative w-min"
+        ref={containerRef}
+        style={{ 
+          width: w,
+          height: h,
+          top: y,
+          left: x
+         }}
+      >
+        <div className={draggableWidgetClass} ref={targetRef}>
+          {children}
+        </div>
+        <div
+          className={draggableWidgetIndicatorBoxClass}
+          style={{
+            width: size.width,
+            height: size.height,
+          }}
+        >{`${size.width}x${size.height}`}</div>
       </div>
-      <div className={draggableWidgetIndicatorBoxClass} style={{
-        width: size.width,
-        height: size.height,
-      }
-      }>{`${size.width}x${size.height}`}</div>
-    </div>
+    </Draggable>
   );
 }
 
 export type DraggableWidgetType = {
+  id: string;
   draggable: boolean;
   wdith?: number | string;
   height?: number | string;
@@ -97,7 +112,7 @@ export type DraggableWidgetType = {
   y: number;
   w: number;
   h: number;
-}
+};
 
 /**
  * 计算最接近的 16 的倍数
@@ -106,4 +121,4 @@ export type DraggableWidgetType = {
  */
 function nearestMultipleOf16(n: number): number {
   return Math.floor((n + 8) / 16) * 16;
-}
+}

components/Droppable.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {useDroppable} from '@dnd-kit/core';
+
+export function Droppable(props) {
+  const {isOver, setNodeRef} = useDroppable({
+    id: 'droppable',
+  });
+  const style = {
+    color: isOver ? 'green' : undefined,
+  };
+  
+  
+  return (
+    <div ref={setNodeRef} style={style}>
+      {props.children}
+    </div>
+  );
+}

components/Logo.tsx

@@ -1,9 +0,0 @@
-import "@/app/globals.css";
-export default function Home() {
-    return (
-      <div className="w-full h-full text-5xl font-bold text-gray-900 flex items-center justify-center">
-        NEXUSHUB
-      </div>
-    );
-  }
-  

components/Logo/index.tsx

@@ -0,0 +1,12 @@
+"use client";
+import "@/app/globals.css";
+
+export default function Logo() {
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-gray-300 text-5xl font-bold text-gray-900">
+      <span className="whitespace-nowrap md:whitespace-normal">
+        NEXUSHUB
+      </span>
+    </div>
+  );
+}