feat: 优化组件加载

packages/editor/src/components/SetterRender/SetterRender.tsx

@@ -35,8 +35,8 @@ const SetterRender = memo(({ attrs, form }: IAttrs) => {
         if (item.type == 'Title') {
           if (item.popover) {
             return (
-              <Popover title={item.popover?.title} content={item.popover.content} placement={item.popover.placement || 'left'}>
-                <h2 className={styles.title} key={key}>
+              <Popover title={item.popover?.title} content={item.popover.content} placement={item.popover.placement || 'left'} key={key}>
+                <h2 className={styles.title}>
                   <span style={{ marginRight: 10 }}>{item.label}</span>
                   <QuestionCircleOutlined />
                 </h2>

packages/editor/src/config/components.ts

@@ -4,13 +4,21 @@
 export interface SysComItem {
   type: string;
   title: string;
+  hidden?: boolean;
   data: Array<{
     icon: string;
     name: string;
     type: string;
+    hidden?: boolean;
   }>;
 }
 const components = [
+  {
+    type: 'Page',
+    title: '页面组件',
+    hidden: true,
+    data: [],
+  },
   {
     type: 'Scene',
     title: '场景组件',
@@ -28,7 +36,7 @@ const components = [
     ],
   },
   {
-    type: 'Layouts',
+    type: 'Container',
     title: '容器组件',
     data: [
       {
@@ -54,7 +62,7 @@ const components = [
     ],
   },
   {
-    type: 'LayoutComp',
+    type: 'Layout',
     title: '布局组件',
     data: [
       {
@@ -80,7 +88,7 @@ const components = [
     ],
   },
   {
-    type: 'Form',
+    type: 'FormItems',
     title: '表单组件',
     data: [
       {
@@ -201,7 +209,7 @@ const components = [
     ],
   },
   {
-    type: 'Echarts',
+    type: 'Echart',
     title: '图表组件',
     data: [
       {
@@ -281,6 +289,12 @@ const components = [
         name: '标签页',
         type: 'Tabs',
       },
+      {
+        icon: '',
+        name: '子标签页',
+        type: 'Tab',
+        hidden: true,
+      },
     ],
   },
   {
@@ -310,7 +324,7 @@ const components = [
     ],
   },
   {
-    type: 'BasicComp',
+    type: 'Basic',
     title: '基础组件',
     data: [
       {
@@ -361,20 +375,14 @@ const components = [
     ],
   },
   {
-    type: 'Map',
+    type: 'Other',
     title: '地图',
     data: [
       {
         icon: '',
         name: 'BMap',
         type: 'BMap',
       },
-    ],
-  },
-  {
-    type: 'MicroApp',
-    title: '微服务',
-    data: [
       {
         icon: '',
         name: 'IFrame',

packages/editor/src/layout/components/ConfigPanel/ConfigPanel.tsx

@@ -2,13 +2,13 @@ import { Suspense, lazy, memo, useEffect, useState } from 'react';
 import { ConfigProvider, Form, Tabs } from 'antd';
 import type { TabsProps } from 'antd';
 import { useDebounceFn } from 'ahooks';
-import * as Components from '@/packages/index';
 import { usePageStore } from '@/stores/pageStore';
 import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import { message } from '@/utils/AntdGlobal';
 import { defaultsDeep } from 'lodash-es';
 import copy from 'copy-to-clipboard';
 import SpinLoading from '@/components/SpinLoading';
+import { getComponent } from '@/packages/index';
 import styles from './index.module.less';
 
 // 属性设置器
@@ -54,15 +54,15 @@ const ConfigPanel = memo(() => {
         });
       } else {
         // 生成组件
-        const item: any = Components[(selectedElement.type + 'Config') as keyof typeof Components];
+        const item: any = getComponent(selectedElement.type + 'Config');
         setComponentConfig(item);
         // defaults是为了继承页面中新增的配置项
         form.setFieldsValue(elementsMap[selectedElement.id]?.config.props);
       }
       form.setFieldValue('id', selectedElement.id);
     } else {
       // 获取页面配置
-      const item: any = Components['PageConfig' as keyof typeof Components];
+      const item: any = getComponent('PageConfig');
       setComponentConfig(item);
       // defaults是为了继承页面中新增的配置项
       form.setFieldsValue({ pageName, ...defaultsDeep({ ...pageProps }, item.config.props) });

packages/editor/src/layout/components/Menu/ComponentPanel.tsx

@@ -16,25 +16,27 @@ const ComponentPanel = () => {
   const [list, setList] = useState<Array<{ key: string; label: string; children: JSX.Element }>>([]);
   useEffect(() => {
     // 系统自带组件
-    const items: Array<{ key: string; label: string; children: React.JSX.Element }> = (keyword ? searchByName(components, keyword) : components).map(
-      (item: SysComItem) => {
+    const items: Array<{ key: string; label: string; children: React.JSX.Element }> = (keyword ? searchByName(components, keyword) : components)
+      .filter((item: SysComItem) => !item.hidden)
+      .map((item: SysComItem) => {
         return {
           key: item.type,
           label: item.title,
           children: (
             <Row gutter={[10, 10]}>
-              {item.data.map((subItem) => {
-                return (
-                  <Col span={12} key={subItem.type}>
-                    <DragMenuItem {...subItem} />
-                  </Col>
-                );
-              })}
+              {item.data
+                .filter((sub) => !sub.hidden)
+                .map((subItem) => {
+                  return (
+                    <Col span={12} key={subItem.type}>
+                      <DragMenuItem {...subItem} />
+                    </Col>
+                  );
+                })}
             </Row>
           ),
         };
-      },
-    );
+      });
     setActiveKeys(items.map((item) => item.key));
     setList(items);
   }, [keyword]);

packages/editor/src/layout/components/Menu/DragMenuItem.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { DragSourceMonitor, useDrag } from 'react-dnd';
 import { IDragTarget } from '@/packages/types/index';
 import { checkComponentType, createId } from '@/utils/util';
-import * as Components from '@/packages/index';
+import { getComponent } from '@/packages/index';
 import { usePageStore } from '@/stores/pageStore';
 import styles from './index.module.less';
 import { message } from '@/utils/AntdGlobal';
@@ -44,15 +44,15 @@ const DragMenuItem = (props: IDragTarget) => {
 
   const handleClick = (item: IDragTarget) => {
     // 生成默认配置
-    const { config, events, methods = [], elements = [] }: any = Components[(item.type + 'Config') as keyof typeof Components] || {};
+    const { config, events, methods = [], elements = [] }: any = getComponent(item.type + 'Config') || {};
     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 = Components[(child.type + 'Config') as keyof typeof Components] || {};
+        const { config, events, methods = [] }: any = getComponent(child.type + 'Config') || {};
         return {
           id: child.id || createId(child.type),
           name: child.name,

packages/editor/src/packages/Basic/index.ts

@@ -1,9 +1,23 @@
-export { Image, ImageConfig } from './Image';
-export { Text, TextConfig } from './Text';
-export { Title, TitleConfig } from './Title';
-export { Link, LinkConfig } from './Link';
-export { Icon, IconConfig } from './Icon';
-export { Avatar, AvatarConfig } from './Avatar';
-export { Statistic, StatisticConfig } from './Statistic';
-export { CountDown, CountDownConfig } from './CountDown';
-export { QRCode, QRCodeConfig } from './QRCode';
+import { lazy } from 'react';
+
+export { default as ImageConfig } from './Image/Schema';
+export { default as TextConfig } from './Text/Schema';
+export { default as TitleConfig } from './Title/Schema';
+export { default as LinkConfig } from './Link/Schema';
+export { default as IconConfig } from './Icon/Schema';
+export { default as AvatarConfig } from './Avatar/Schema';
+export { default as StatisticConfig } from './Statistic/Schema';
+export { default as CountDownConfig } from './CountDown/Schema';
+export { default as QRCodeConfig } from './QRCode/Schema';
+
+const Image = lazy(() => import('./Image/Image'));
+const Text = lazy(() => import('./Text/Text'));
+const Title = lazy(() => import('./Title/Title'));
+const Link = lazy(() => import('./Link/Link'));
+const Icon = lazy(() => import('./Icon/Icon'));
+const Avatar = lazy(() => import('./Avatar/Avatar'));
+const Statistic = lazy(() => import('./Statistic/Statistic'));
+const CountDown = lazy(() => import('./CountDown/CountDown'));
+const QRCode = lazy(() => import('./QRCode/QRCode'));
+
+export { Image, Text, Title, Link, Icon, Avatar, Statistic, CountDown, QRCode };

packages/editor/src/packages/Container/Card/Card.tsx

@@ -1,7 +1,7 @@
 import { ComponentType, IDragTargetItem } from '@/packages/types';
 import { Button, Card } from 'antd';
 import { useDrop } from 'react-dnd';
-import * as Components from '@/packages/index';
+import { getComponent } from '@/packages/index';
 import MarsRender from '@/packages/MarsRender/MarsRender';
 import { usePageStore } from '@/stores/pageStore';
 import { forwardRef, useImperativeHandle, useState } from 'react';
@@ -20,7 +20,7 @@ const MCard = ({ id, type, config, elements, onClick }: ComponentType, ref: any)
     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 = getComponent(item.type + 'Config') || {};
       addChildElements({
         type: item.type,
         name: item.name,

packages/editor/src/packages/Container/Div/Div.tsx

@@ -1,6 +1,6 @@
 import { ComponentType, IDragTargetItem } from '@/packages/types';
 import { useDrop } from 'react-dnd';
-import * as Components from '@/packages/index';
+import { getComponent } from '@/packages/index';
 import MarsRender from '@/packages/MarsRender/MarsRender';
 import { usePageStore } from '@/stores/pageStore';
 import { forwardRef, useImperativeHandle, useState } from 'react';
@@ -24,7 +24,7 @@ const Div = ({ id, type, config, elements }: ComponentType, ref: any) => {
     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 = getComponent(item.type + 'Config') || {};
       addChildElements({
         type: item.type,
         name: item.name,

packages/editor/src/packages/Container/Flex/Flex.tsx

@@ -1,7 +1,7 @@
 import { ComponentType, IDragTargetItem } from '@/packages/types';
 import { Flex } from 'antd';
 import { useDrop } from 'react-dnd';
-import * as Components from '@/packages/index';
+import { getComponent } from '@/packages/index';
 import MarsRender from '@/packages/MarsRender/MarsRender';
 import { usePageStore } from '@/stores/pageStore';
 import { forwardRef, useImperativeHandle, useState } from 'react';
@@ -25,7 +25,7 @@ const MFlex = ({ id, type, config, elements }: ComponentType, ref: any) => {
     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 = getComponent(item.type + 'Config') || {};
       addChildElements({
         type: item.type,
         name: item.name,

packages/editor/src/packages/Container/Form/Form.tsx

@@ -3,7 +3,7 @@ import { Form } from 'antd';
 import { forwardRef, memo, useImperativeHandle, useState } from 'react';
 import { useDrop } from 'react-dnd';
 import { useShallow } from 'zustand/react/shallow';
-import * as Components from '@/packages/index';
+import { getComponent } from '@/packages/index';
 import MarsRender from '@/packages/MarsRender/MarsRender';
 import { usePageStore } from '@/stores/pageStore';
 import { FormContext } from '@/packages/utils/context';
@@ -33,7 +33,7 @@ const MForm = ({ id, type, config, elements, onFinish, onChange }: ComponentType
     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 = getComponent(item.type + 'Config') || {};
       addChildElements({
         type: item.type,
         name: item.name,

packages/editor/src/packages/Container/index.ts

@@ -1,4 +1,13 @@
-export { Flex, FlexConfig } from './Flex';
-export { Form, FormConfig } from './Form';
-export { Card, CardConfig } from './Card';
-export { Div, DivConfig } from './Div';
+import { lazy } from 'react';
+
+export { default as FlexConfig } from './Flex/Schema';
+export { default as FormConfig } from './Form/Schema';
+export { default as CardConfig } from './Card/Schema';
+export { default as DivConfig } from './Div/Schema';
+
+const Flex = lazy(() => import('./Flex/Flex'));
+const Form = lazy(() => import('./Form/Form'));
+const Card = lazy(() => import('./Card/Card'));
+const Div = lazy(() => import('./Div/Div'));
+
+export { Flex, Form, Card, Div };