feat: 优化组件

JackySoft · Dec 18, 2024 · 3792e66 · 3792e66
1 parent 28b2966
commit 3792e66
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 103 deletions.
diff --git a/packages/editor/src/layout/components/ConfigPanel/ConfigPanel.tsx b/packages/editor/src/layout/components/ConfigPanel/ConfigPanel.tsx
@@ -54,18 +54,22 @@ const ConfigPanel = memo(() => {
         });
       } else {
         // 生成组件
-        const item: any = getComponent(selectedElement.type + 'Config');
-        setComponentConfig(item);
-        // defaults是为了继承页面中新增的配置项
-        form.setFieldsValue(elementsMap[selectedElement.id]?.config.props);
+        getComponent(selectedElement.type + 'Config').then((res: any) => {
+          const item = res.default;
+          setComponentConfig(item);
+          // defaults是为了继承页面中新增的配置项
+          form.setFieldsValue(elementsMap[selectedElement.id]?.config.props);
+        });
       }
       form.setFieldValue('id', selectedElement.id);
     } else {
       // 获取页面配置
-      const item: any = getComponent('PageConfig');
-      setComponentConfig(item);
-      // defaults是为了继承页面中新增的配置项
-      form.setFieldsValue({ pageName, ...defaultsDeep({ ...pageProps }, item.config.props) });
+      getComponent('PageConfig').then((res: any) => {
+        const item = res.default;
+        setComponentConfig(item);
+        // defaults是为了继承页面中新增的配置项
+        form.setFieldsValue({ pageName, ...defaultsDeep({ ...pageProps }, item.config.props) });
+      });
     }
     return () => {
       setComponentConfig(null);

diff --git a/packages/editor/src/layout/components/Menu/DragMenuItem.tsx b/packages/editor/src/layout/components/Menu/DragMenuItem.tsx
@@ -42,17 +42,17 @@ const DragMenuItem = (props: IDragTarget) => {
     [id],
   );
 
-  const handleClick = (item: IDragTarget) => {
+  const handleClick = async (item: IDragTarget) => {
     // 生成默认配置
-    const { config, events, methods = [], elements = [] }: any = getComponent(item.type + 'Config') || {};
+    const { config, events, methods = [], elements = [] } = (await getComponent(item.type + 'Config'))?.default || {};
     const newId = createId(item.type);
     if (!checkComponentType(item.type, selectedElement?.id, selectedElement?.type, elementsMap)) {
       message.info('请把表单项放在Form容器内');
       return;
     }
     const childElement =
-      elements.map((child: IDragTarget & { id: string }) => {
-        const { config, events, methods = [] }: any = getComponent(child.type + 'Config') || {};
+      elements.map(async (child: IDragTarget & { id: string }) => {
+        const { config, events, methods = [] }: any = (await getComponent(child.type + 'Config'))?.default || {};
         return {
           id: child.id || createId(child.type),
           name: child.name,
@@ -63,28 +63,30 @@ const DragMenuItem = (props: IDragTarget) => {
           methods,
         };
       }) || [];
-    if (selectedElement) {
-      addChildElements({
-        type: item.type,
-        name: item.name,
-        elements: childElement,
-        parentId: selectedElement.id,
-        id: newId,
-        config,
-        events,
-        methods,
-      });
-    } else {
-      addElement({
-        type: item.type,
-        name: item.name,
-        id: newId,
-        elements: childElement,
-        config,
-        events,
-        methods,
-      });
-    }
+    Promise.all(childElement).then((res) => {
+      if (selectedElement) {
+        addChildElements({
+          type: item.type,
+          name: item.name,
+          elements: res,
+          parentId: selectedElement.id,
+          id: newId,
+          config,
+          events,
+          methods,
+        });
+      } else {
+        addElement({
+          type: item.type,
+          name: item.name,
+          id: newId,
+          elements: res,
+          config,
+          events,
+          methods,
+        });
+      }
+    });
   };
 
   // 拖拽样式

diff --git a/packages/editor/src/packages/Container/Card/Card.tsx b/packages/editor/src/packages/Container/Card/Card.tsx
@@ -17,10 +17,10 @@ const MCard = ({ id, type, config, elements, onClick }: ComponentType, ref: any)
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/Container/Div/Div.tsx b/packages/editor/src/packages/Container/Div/Div.tsx
@@ -21,10 +21,10 @@ const Div = ({ id, type, config, elements }: ComponentType, ref: any) => {
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/Container/Flex/Flex.tsx b/packages/editor/src/packages/Container/Flex/Flex.tsx
@@ -22,10 +22,10 @@ const MFlex = ({ id, type, config, elements }: ComponentType, ref: any) => {
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/Container/Form/Form.tsx b/packages/editor/src/packages/Container/Form/Form.tsx
@@ -30,10 +30,10 @@ const MForm = ({ id, type, config, elements, onFinish, onChange }: ComponentType
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/FeedBack/Drawer/Drawer.tsx b/packages/editor/src/packages/FeedBack/Drawer/Drawer.tsx
@@ -4,7 +4,7 @@ import { usePageStore } from '@/stores/pageStore';
 import { useDrop } from 'react-dnd';
 import { Button, Drawer, Spin } from 'antd';
 import MarsRender from '@/packages/MarsRender/MarsRender';
-import * as Components from '@/packages/index';
+import { getComponent } from '@/packages/index';
 import * as icons from '@ant-design/icons';
 import { handleActionFlow } from '@/packages/utils/action';
 
@@ -16,9 +16,9 @@ const AntDrawer = forwardRef(({ id, type, config, elements, onClose, onAfterOpen
 
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
-      const { config, events, methods = [] }: any = Components[(item.type + 'Config') as keyof typeof Components] || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/FeedBack/Modal/Modal.tsx b/packages/editor/src/packages/FeedBack/Modal/Modal.tsx
@@ -21,10 +21,10 @@ const AntdModal = forwardRef(({ id, type, config, elements, onLoad, onOk, onCanc
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/FormItems/FormItem/FormItem.tsx b/packages/editor/src/packages/FormItems/FormItem/FormItem.tsx
@@ -39,10 +39,10 @@ const MFormItem = ({ id, type, config, elements }: ComponentType<IConfig>, ref:
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/Functional/Tab/Tab.tsx b/packages/editor/src/packages/Functional/Tab/Tab.tsx
@@ -20,10 +20,10 @@ const MTabs = ({ id, type, config, elements }: ComponentType, ref: any) => {
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/Layout/Col/Col.tsx b/packages/editor/src/packages/Layout/Col/Col.tsx
@@ -22,10 +22,10 @@ const MCol = ({ id, type, config, elements }: ComponentType, ref: any) => {
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/Layout/Row/Row.tsx b/packages/editor/src/packages/Layout/Row/Row.tsx
@@ -22,10 +22,10 @@ const MRow = ({ id, type, config, elements }: ComponentType, ref: any) => {
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/Layout/Space/Space.tsx b/packages/editor/src/packages/Layout/Space/Space.tsx
@@ -22,10 +22,10 @@ const MSpace = ({ id, type, config, elements }: ComponentType, ref: any) => {
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/Scene/MarsTable/MarsTable.tsx b/packages/editor/src/packages/Scene/MarsTable/MarsTable.tsx
@@ -100,10 +100,10 @@ const MarsTable = ({ id, type, config, elements, onCheckedChange }: ComponentTyp
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/Scene/SearchForm/SearchForm.tsx b/packages/editor/src/packages/Scene/SearchForm/SearchForm.tsx
@@ -53,10 +53,10 @@ const SearchForm = ({ id, type, config, elements, onSearch, onChange, onReset }:
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor) {
+    async drop(item: IDragTargetItem, monitor) {
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       addChildElements({
         type: item.type,
         name: item.name,

diff --git a/packages/editor/src/packages/index.tsx b/packages/editor/src/packages/index.tsx
@@ -1,43 +1,26 @@
-// export { Page, PageConfig } from './Page';
-// export * from './Scene';
-// export * from './Container';
-// export * from './FormItems';
-// export * from './Layout';
-// export * from './EChart';
-// export * from './Functional';
-// export * from './Basic';
-// export * from './FeedBack';
-// export { BMap, BMapConfig } from './Other/BMap';
-// export { IFrame, IFrameConfig } from './Other/IFrame';
 import { lazy } from 'react';
 import components from '../config/components';
 import './index.less';
+
 const componentMap: { [key: string]: any } = {};
 
-function initComponent() {
-  // 动态导入并注册组件
-  const registerComponent = async (dir: string, path: string) => {
-    componentMap[path] = lazy(() => import(`./${dir}/${path}/${path}`));
-    console.log(`./${dir}/${path}Config`);
-    import(`./${dir}/${path}/Schema`).then((res) => {
-      componentMap[path + 'Config'] = res.default;
-    });
-  };
-  for (const { type, data = [] } of components) {
-    if (data?.length > 0) {
-      for (const { type: path } of data) {
-        registerComponent(type, path);
-      }
-    } else {
-      registerComponent('.', type);
+// 动态导入并注册组件
+const registerComponent = async (dir: string, path: string) => {
+  componentMap[path] = lazy(() => import(`./${dir}/${path}/${path}`));
+  componentMap[path + 'Config'] = () => import(`./${dir}/${path}/Schema`);
+};
+for (const { type, data = [] } of components) {
+  if (data?.length > 0) {
+    for (const { type: path } of data) {
+      registerComponent(type, path);
     }
+  } else {
+    registerComponent('.', type);
   }
 }
 
-initComponent();
-
-console.log('componentMap', componentMap);
 // 导出一个函数来获取注册的组件
 export const getComponent = (name: string) => {
+  if (typeof componentMap[name] === 'function') return componentMap[name]();
   return componentMap[name] || null;
 };
diff --git a/packages/editor/src/pages/editor/editor.tsx b/packages/editor/src/pages/editor/editor.tsx
@@ -111,14 +111,14 @@ const Editor = () => {
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
-    drop(item: IDragTargetItem, monitor: any) {
+    async drop(item: IDragTargetItem, monitor: any) {
       // 此处必须检测该组件是否已经被放入完成，如果已经放置到其它容器中，直接返回。
       if (monitor.didDrop()) return;
       // 生成默认配置
-      const { config, events, methods = [], elements = [] }: any = getComponent(item.type + 'Config') || {};
+      const { config, events, methods = [], elements = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
       const childElement =
-        elements.map((child: IDragTargetItem) => {
-          const { config, events, methods = [] }: any = getComponent(child.type + 'Config') || {};
+        elements.map(async (child: IDragTargetItem) => {
+          const { config, events, methods = [] }: any = (await getComponent(child.type + 'Config'))?.default || {};
           return {
             id: createId(child.type),
             name: child.name,
@@ -129,14 +129,16 @@ const Editor = () => {
             methods,
           };
         }) || [];
-      addElement({
-        type: item.type,
-        name: item.name,
-        id: item.id,
-        config,
-        events,
-        methods,
-        elements: childElement,
+      Promise.all(childElement).then((res) => {
+        addElement({
+          type: item.type,
+          name: item.name,
+          id: item.id,
+          config,
+          events,
+          methods,
+          elements: res,
+        });
       });
     },
     collect: (monitor) => ({