wip

components/ComponentPaletteDrawer.tsx

@@ -1,21 +1,32 @@
 "use client";
 import "@/app/globals.css";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ComponentsStore from "@/stores/componentStore";
-import { componentsLibrary } from "./Draggable/Draggable";
-import { useDynamicWidgets } from "@/hooks/useDynamicWidgets";
+import { useWidgets } from "@/hooks/useWidgets";
 
 export default function ComponentPaletteDrawer() {
   const checkboxRef = useRef<HTMLInputElement>(null);
-  const [componentsId, setComponentsId] = useState("logo");
+  const [widgetsId, setwidgetsId] = useState("logo");
   const [data, setData] = useState("");
-  const {widgets} = useDynamicWidgets();
+  const {widgets, widgetsLibrary} = useWidgets();
+
+  useEffect(() => {
+    try {
+      const widget = widgets.find(item => item.id === widgetsId);
+      const defaultConfig = widget?.defaultConfig({})
+      const stringData = JSON.stringify(defaultConfig, undefined, 4);
+      setData(stringData);
+    } catch (error) {
+      
+    }
+  }, [widgetsId]);
 
   const onSubmit = (e: SubmitEvent) => {
     e.preventDefault();
-    ComponentsStore.addComponent(componentsId, data && JSON.parse(data));
+    ComponentsStore.addComponent(widgetsId, data && JSON.parse(data));
     checkboxRef.current?.click();
   };
+
   return (
     <div className="drawer drawer-end">
       <input
@@ -64,20 +75,15 @@ export default function ComponentPaletteDrawer() {
 
             <div className="resize-y border overflow-hidden max-w-full h-64 ">
               {
-                componentsId && componentsLibrary[componentsId](data)
-              }
+9              }
             </div>
 
-            {
-              JSON.stringify(widgets)
-            }
-
             <form onSubmit={onSubmit} className="w-full">
               <fieldset className="fieldset w-full">
                 <legend className="fieldset-legend">小部件</legend>
                 <select
-                value={componentsId}
-                  onChange={(e) => setComponentsId(e.target.value)}
+                  value={widgetsId}
+                  onChange={(e) => setwidgetsId(e.target.value)}
                   className="select w-full"
                 >
                   <option disabled={true}>请选择小部件</option>
@@ -93,6 +99,7 @@ export default function ComponentPaletteDrawer() {
               <fieldset className="fieldset w-full">
                 <legend className="fieldset-legend">配置信息</legend>
                 <textarea
+                  value={data}
                   onChange={(e) => setData(e.target.value)}
                   className="textarea h-24 w-full"
                   placeholder="请输入 JSON 格式的配置信息"

components/Draggable/Draggable.tsx

@@ -6,16 +6,17 @@ import { useDraggable } from "@dnd-kit/core";
 import { useEffect, useRef, useState } from "react";
 import { nearestMultiple } from "./utils";
 import PreviewStore from "@/stores/previewStore";
-import Logo from "../../widgets/Logo";
-import Text from "../../widgets/Text";
+import { useWidgets } from "@/hooks/useWidgets";
 
 export default function Draggable(props: DraggablePropsType) {
   const targetRef = useRef<HTMLDivElement>(null);
   const timerRef = useRef<NodeJS.Timeout>(null);
   const [size, setSize] = useState({ width: 16, height: 16 });
-  const { id, componentsId, data, x, y, width:_width, height:_height  } = props;
+  const { id, widgetsId, data, x, y, width:_width, height:_height  } = props;
   const [width, setWidth] = useState(_width);
   const [height, setHeight] = useState(_height);
+  const {widgets, widgetsLibrary} = useWidgets();
+  
 
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
     id,
@@ -97,22 +98,17 @@ export default function Draggable(props: DraggablePropsType) {
           />
         </svg>
       </button>
-      {componentsLibrary[componentsId] && componentsLibrary[componentsId](data ?? {})}
+      {widgetsLibrary[widgetsId] && widgetsLibrary[widgetsId](data ?? {})}
     </div>
   );
 }
 
 export type DraggablePropsType = {
   id: string;
-  componentsId: string;
+  widgetsId: string;
   data?: Record<string, unknown>;
   x: number;
   y: number;
   width: number;
   height: number;
 };
-
-export const componentsLibrary = {
-  'logo': () => <Logo />,
-  'text': (data: DraggablePropsType["data"]) => <Text data={{ content: 'default',...data }} />,
-}

components/DraggablePanel.tsx

@@ -43,7 +43,7 @@ export default function DraggablePanel(props: DraggablePanelType) {
         PreviewStore.clearPreview();
         ComponentStore.changeComponent({
           id: event?.active?.data?.current?.id,
-          componentsId: event?.active?.data?.current?.componentsId,
+          widgetsId: event?.active?.data?.current?.widgetsId,
           x,
           y,
           width: nearestMultiple(width),