添加图形模块

src/assets/data/graphics.ts

@@ -0,0 +1,13 @@
+import { graphicsConfigItem } from '@/core/componentTemplate/graphics/Carrier/config';
+/**
+ * @description 通用图形
+ */
+export const universal = [graphicsConfigItem('universal_1', '长方形', { w: 150, h: 150 })];
+
+export default [
+  {
+    category: 'graphics',
+    title: '通用图形',
+    componentList: universal,
+  },
+];

src/core/componentTemplate/config.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState, useMemo } from 'react';
 import { componentConfigList } from '../config/common';
 import pictureGather, { workplace, medical } from '@/assets/data/picture';
+import graphicsData, { universal } from '@/assets/data/graphics';
 /**
  * @description 自动获取componentTemplate文件下的config文件，且取出值
  */
@@ -82,14 +83,15 @@ export const useGetCompentConfigList = () => {
    * @description 得到所有的组件的配置文件值
    */
   const allModuleConfigList = useMemo(
-    () => [...textConfigList, ...baseConfigList, ...workplace, ...medical],
-    [textConfigList, baseConfigList, workplace, medical],
+    () => [...textConfigList, ...baseConfigList, ...workplace, ...medical, ...universal],
+    [textConfigList, baseConfigList, workplace, medical, universal],
   );
   return {
     baseConfigList,
     getAllBaseModuleConfigList,
     textConfigList,
     allModuleConfigList,
     pictureGather,
+    graphicsData,
   };
 };

src/core/componentTemplate/graphics/Carrier/config.ts

@@ -0,0 +1,32 @@
+import { commonAttr, defaultProps, commonStyle } from '@/core/config/common';
+/**
+ *@param key 唯一值
+ @param name 名称
+ * @param props 控件的属性
+ */
+export const graphicsConfigItem = (
+  key: string,
+  name: string,
+  props: Partial<mustExistProps & uncertainProps>,
+): templateDataType => {
+  const { w, h } = props;
+  return {
+    ...commonAttr,
+    id: 'graphics_carrier_' + key,
+    category: 'graphics',
+    type: 'Carrier',
+    component: 'Carrier',
+    label: name,
+    propValue: {
+      ...defaultProps(),
+      ...props,
+    },
+    icon: 'https://cdn.gudsen.com/2021/09/30/af90bac80a9447f18156e251ecbc1dff.png',
+    style: {
+      ...commonStyle,
+      width: w,
+      height: h,
+    },
+    editableEl: [],
+  };
+};

src/core/componentTemplate/graphics/Carrier/index.tsx

@@ -0,0 +1,7 @@
+import React, { memo } from 'react';
+
+const Index = memo((props) => {
+  return <div>Index</div>;
+});
+
+export default Index;

src/layout/SliderComponent.tsx

@@ -29,7 +29,8 @@ const Slider = memo(function Slider() {
     createSelector([(state: storeType) => state.config], ({ zenMode }) => [zenMode] as const),
   );
 
-  const { getAllBaseModuleConfigList, textConfigList, pictureGather } = useGetCompentConfigList();
+  const { getAllBaseModuleConfigList, textConfigList, pictureGather, graphicsData } =
+    useGetCompentConfigList();
 
   const [isShowLeftComponents, setIsShowLeftComponents] = useState<boolean>(true);
 
@@ -64,6 +65,11 @@ const Slider = memo(function Slider() {
         title: '图片',
         componentList: pictureGather,
       },
+      {
+        category: 'graphics',
+        title: '图形',
+        componentList: graphicsData,
+      },
       {
         category: 'base',
         title: '基础',
@@ -87,7 +93,7 @@ const Slider = memo(function Slider() {
               <div className={styles.search}>
                 <Input placeholder="请选择" prefix={<SearchOutlined />} allowClear />
               </div>
-              {['picture', 'base'].includes(item.category) ? (
+              {['picture', 'base', 'graphics'].includes(item.category) ? (
                 <>
                   <SecondaryList
                     data={item.componentList as getAllConfigListType[]}
@@ -110,7 +116,13 @@ const Slider = memo(function Slider() {
         </TabPane>
       </React.Fragment>
     ));
-  }, [getAllBaseModuleConfigList, textConfigList, pictureGather, isShowLeftComponents]);
+  }, [
+    getAllBaseModuleConfigList,
+    textConfigList,
+    pictureGather,
+    graphicsData,
+    isShowLeftComponents,
+  ]);
 
   return (
     <>