wip: change local dev

components/DraggablePanel.tsx

@@ -0,0 +1,32 @@
+"use client";
+import { ReactElement } from 'react';
+import classnames from 'classnames';
+
+export default function DraggablePanel(props: DraggablePanelType) {
+  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 时添加
+  });
+  return (
+    <div className={draggablePanelClass}>
+      {
+        children
+      }
+    </div>
+  );
+}
+
+export type DraggablePanelType = {
+  draggable: boolean;
+  wdith?: number | string;
+  height?: number | string;
+  children: any;
+  // grid: boolean;
+}

components/DraggableWidget.tsx

@@ -0,0 +1,109 @@
+"use client";
+import { CSSProperties, ReactElement, useEffect, useRef, useState } from "react";
+import classnames from 'classnames';
+import _ from 'lodash';
+
+
+export default function DraggableWidget(props: DraggableWidgetType) {
+  const { 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);
+
+  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: 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)
+      }
+    }, 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
+      }
+      containerNode.style.gridArea = `${area.rowStart} / ${area.columnStart} / ${area.rowEnd} / ${area.columnEnd}`;
+    }
+
+    // 开始观察元素
+    observer.observe(element);
+
+    // 组件卸载时断开连接
+    return () => {
+      observer.disconnect();
+    };
+  }, []); // 空依赖数组确保只运行一次
+
+
+  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 ', {
+  }
+  );
+
+  const draggableWidgetIndicatorBoxClass = classnames(
+    'absolute top-0 left-0 outline-2 outline-dashed outline-red-500 z-50 pointer-events-none',
+    {
+      'invisible': !isResize
+    }
+  );
+
+  return (
+    <div className="relative" ref={containerRef} style={{ gridArea: `${x} \ ${w+x} \ ${y} \ ${h+y}`}}>
+      <div className={draggableWidgetClass} ref={targetRef}>
+        {
+          children
+        }
+      </div>
+      <div className={draggableWidgetIndicatorBoxClass} style={{
+        width: size.width,
+        height: size.height,
+      }
+      }>{`${size.width}x${size.height}`}</div>
+    </div>
+  );
+}
+
+export type DraggableWidgetType = {
+  draggable: boolean;
+  wdith?: number | string;
+  height?: number | string;
+  children: ReactElement;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/**
+ * 计算最接近的 16 的倍数
+ * @param n 输入的数字
+ * @returns 最近的 16 的倍数
+ */
+function nearestMultipleOf16(n: number): number {
+  return Math.floor((n + 8) / 16) * 16;
+}

components/Logo.tsx

@@ -0,0 +1,9 @@
+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>
+    );
+  }
+