wip

2025-03-22 17:15:35 +00:00
parent 0e11c4153d
commit 8a54bb29fb
11 changed files with 204 additions and 32 deletions
--- a/hooks/useWidgets.tsx
+++ b/hooks/useWidgets.tsx
@@ -0,0 +1,110 @@
+"use client";
+import { useState, useCallback, useEffect, ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+import { DraggablePropsType } from '@/components/Draggable/Draggable';
+import * as Logo from '@/widgets/Logo/index';
+import * as Text from '@/widgets/Text/index';
+import * as Image from '@/widgets/Image/index';
+export interface WidgetModule {
+  id: string;
+  name: string;
+  version: string;
+  defaultConfig: (data: Record<string, unknown>) => Record<string, unknown>
+}
+
+export type widgetsLibraryType = Record<string, (data?:DraggablePropsType['data']) => ReactNode>;
+
+const widgetPaths = [
+    '@/widgets/Logo/index',
+    '@/widgets/Text/index',
+    '@/widgets/Image/index',
+];
+
+export const useWidgets = (): {
+  widgets: WidgetModule[];
+  widgetsLibrary: widgetsLibraryType;
+  refreshWidgets: () => Promise<void>;
+} => {
+  const [widgets, setWidgets] = useState<WidgetModule[]>([
+    {
+      id: 'logo',
+      name: 'Logo',
+      version: '1.0.0',
+      defaultConfig: Logo.defaultConfig
+    },
+    {
+      id: 'text',
+      name: '文本',
+      version: '1.0.0',
+      defaultConfig: Text.defaultConfig
+    },
+    {
+      id: 'image',
+      name: '图片',
+      version: '1.0.0',
+      defaultConfig: Image.defaultConfig
+
+    },
+  ]);
+  const [widgetsLibrary, setWidgetsLibrary] = useState<widgetsLibraryType>({
+    'logo': (data) => {
+      const { default:Component, defaultConfig } = Logo;
+      
+      return <Component {...defaultConfig(data)} />
+    },
+    'text': (data) => {
+      const { default:Component, defaultConfig } = Text;
+      return <Component data={defaultConfig(data)} />
+    },
+    'image': (data) => {
+      const { default:Component, defaultConfig } = Image;
+      return <Component data={defaultConfig(data)} />
+    }
+  });
+
+  const loadWidgets = useCallback(async () => {
+    try {
+      // Webpack 的 require.context 匹配 widgets 目录
+      console.log(window);
+      // const modules = await Promise.all(
+      //   widgetPaths.map(async (key) => {
+      //     console.log(key);
+      //     debugger
+      //     const meta = await require(key);
+          
+
+      //     // 创建动态组件（单独导入确保 Tree Shaking）
+      //     // const Component = dynamic(
+      //     //   () => import(key),
+      //     //   { ssr: false }
+      //     // );
+
+      //     return {
+      //       id: meta.id,
+      //       name: meta.name,
+      //       version: meta.version,
+      //       // component: Component
+      //     };
+      //   })
+      // );
+      // console.log(modules);
+
+      // setWidgets(modules);
+    } catch (error) {
+      console.error('Failed to load widgets:', error);
+      setWidgets([]);
+    }
+  }, []);
+
+  // 初始化加载
+  // useEffect(() => {
+  //   loadWidgets();
+  // }, [loadWidgets]);
+
+  // 暴露刷新方法
+  const refreshWidgets = useCallback(async () => {
+    await loadWidgets();
+  }, [loadWidgets]);
+
+  return { widgets, widgetsLibrary, refreshWidgets };
+};