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;
+}