添加图形

src/assets/data/graphics.ts

@@ -2,7 +2,152 @@ import { graphicsConfigItem } from '@/core/componentTemplate/graphics/Carrier/co
 /**
  * @description 通用图形
  */
-export const universal = [graphicsConfigItem('universal_1', '长方形', { w: 150, h: 150 })];
+export const universal = [
+  graphicsConfigItem(
+    'universal_square',
+    '正方形',
+    {
+      category: 'universal',
+      name: 'square',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_diamond',
+    '菱形',
+    {
+      category: 'universal',
+      name: 'diamond',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_quadrilateral',
+    '四边形',
+    {
+      category: 'universal',
+      name: 'quadrilateral',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_circle',
+    '圆形',
+    {
+      category: 'universal',
+      name: 'circle',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_rectangle',
+    '长方形',
+    {
+      category: 'universal',
+      name: 'rectangle',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_ellipse',
+    '椭圆形',
+    {
+      category: 'universal',
+      name: 'ellipse',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_hexagon',
+    '六边形',
+    {
+      category: 'universal',
+      name: 'hexagon',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_heptagon',
+    '七边形',
+    {
+      category: 'universal',
+      name: 'heptagon',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_octagon',
+    '八角形',
+    {
+      category: 'universal',
+      name: 'octagon',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_pentagon',
+    '五角形',
+    {
+      category: 'universal',
+      name: 'pentagon',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_trapezoid',
+    '梯形',
+    {
+      category: 'universal',
+      name: 'trapezoid',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_triangle',
+    '三角形',
+    {
+      category: 'universal',
+      name: 'triangle',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_cylinder',
+    '圆柱',
+    {
+      category: 'universal',
+      name: 'cylinder',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_prism',
+    '棱柱',
+    {
+      category: 'universal',
+      name: 'prism',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_cube',
+    '立方体',
+    {
+      category: 'universal',
+      name: 'cube',
+    },
+    { w: 70, h: 70 },
+  ),
+  graphicsConfigItem(
+    'universal_pyramid',
+    '锥形',
+    {
+      category: 'universal',
+      name: 'pyramid',
+    },
+    { w: 70, h: 70 },
+  ),
+];
 
 export default [
   {

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

@@ -1,12 +1,15 @@
 import { commonAttr, defaultProps, commonStyle } from '@/core/config/common';
 /**
- *@param key 唯一值
+ *
+ @param key 唯一值
  @param name 名称
- * @param props 控件的属性
+ @param svg svg的一些相关的信息
+ @param props 控件的属性
  */
 export const graphicsConfigItem = (
   key: string,
   name: string,
+  svg: svgInfoType,
   props: Partial<mustExistProps & uncertainProps>,
 ): templateDataType => {
   const { w, h } = props;
@@ -22,6 +25,7 @@ export const graphicsConfigItem = (
       ...props,
     },
     icon: 'https://cdn.gudsen.com/2021/09/30/af90bac80a9447f18156e251ecbc1dff.png',
+    svg,
     style: {
       ...commonStyle,
       width: w,

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

@@ -1,7 +1,14 @@
-import React, { memo } from 'react';
-
-const Index = memo((props) => {
-  return <div>Index</div>;
+import React, { memo, useMemo, FC } from 'react';
+const Index: FC<templateDataType> = memo(function Index(props) {
+  const { propValue, svg } = props;
+  const symbolId = useMemo(() => '#icon-graphics-' + `${svg?.category}-${svg?.name}`, [svg]);
+  return (
+    <>
+      <svg aria-hidden="true" width={propValue.w} height={propValue.h}>
+        <use xlinkHref={symbolId} />
+      </svg>
+    </>
+  );
 });
 
 export default Index;

src/types/common.d.ts

@@ -43,3 +43,7 @@ interface getAllConfigListType {
   title: string;
   componentList: templateDataType[];
 }
+interface svgInfoType<T = string> {
+  category: T;
+  name: T;
+}

src/types/globalType.d.ts

@@ -110,6 +110,10 @@ declare global {
      * @description 是否锁定组件
      */
     isLock?: boolean;
+    /**
+     * @description svg的相关信息
+     */
+    svg?: null | svgInfoType;
     [par: string]: any;
   }
   /**