Merge pull request #11376 from allenve/feat-shape

feat: 图形组件支持配置宽高、颜色
baidu · Dec 16, 2024 · e2b800d · e2b800d
2 parents 0b39e35 + 812589f
commit e2b800d
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 25 deletions.
diff --git a/docs/zh-CN/components/shape.md b/docs/zh-CN/components/shape.md
@@ -49,19 +49,21 @@ icon:
         type: 'shape',
         className: 'm-2',
         shapeType: 'triangle',
-        size: 100
+        width: 200,
+        height: 100
       },
       {
         type: 'shape',
         className: 'm-2',
         shapeType: 'square',
-        size: 100
+        height: 100
       },
       {
         type: 'shape',
         className: 'm-2',
         shapeType: 'pentagon',
-        size: 100
+        width: 100,
+        height: 100
       }
     ]
 }
@@ -95,6 +97,29 @@ icon:
 }
 ```
 
+## 配置颜色
+
+```schema
+{
+    type: "page",
+    body: [
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'triangle',
+        color: '#2468f2',
+        radius: 4
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'heart',
+        color: '#f23d3d'
+      }
+    ]
+}
+```
+
 ## 更多图形
 
 ```schema
@@ -105,75 +130,87 @@ icon:
       type: 'shape',
       className: 'm-2',
       shapeType: 'triangle',
-      size: 50
+      width: 50,
+      height: 50
     },
     {
       type: 'shape',
       className: 'm-2',
       shapeType: 'square',
-      size: 50
+      width: 50,
+      height: 50
     },
     {
       type: 'shape',
       className: 'm-2',
       shapeType: 'convex-arc-rectangle',
-      size: 50
+      width: 50,
+      height: 50
     },
     {
       type: 'shape',
       className: 'm-2',
       shapeType: 'convex-arc-rectangle',
-      size: 50,
+      width: 50,
+      height: 50,
       radius: 4
     },
     {
       type: 'shape',
       className: 'm-2',
       shapeType: 'concave-arc-rectangle',
-      size: 50,
+      width: 50,
+      height: 50,
       radius: 4
     },
     {
       type: 'shape',
       className: 'm-2',
       shapeType: 'double-arc-rectangle',
-      size: 50,
+      width: 50,
+      height: 50,
       radius: 4
     },
     {
       type: 'shape',
       className: 'm-2',
-      size: 50,
+      width: 50,
+      height: 50,
       shapeType: 'pentagon'
     },
     {
       type: 'shape',
       className: 'm-2',
-      size: 50,
+      width: 50,
+      height: 50,
       shapeType: 'hexagon'
     },
     {
       type: 'shape',
       className: 'm-2',
-      size: 50,
+      width: 50,
+      height: 50,
       shapeType: 'star'
     },
     {
       type: 'shape',
       className: 'm-2',
-      size: 50,
+      width: 50,
+      height: 50,
       shapeType: 'hexagon-star'
     },
     {
       type: 'shape',
       className: 'm-2',
-      size: 50,
+      width: 50,
+      height: 50,
       shapeType: 'heart'
     },
     {
       type: 'shape',
       className: 'm-2',
-      size: 50,
+      width: 50,
+      height: 50,
       shapeType: 'circle'
     }
   ]
@@ -187,7 +224,8 @@ icon:
 | type      | `string`     | `'shape'` | 指定为图形渲染器    |
 | shapeType | `IShapeType` | `'-'`     | 图形类型            |
 | className | `string`     |           | 自定义 CSS 样式类名 |
-| size      | `number`     | `200`     | 图形大小            |
+| width     | `number`     | `200`     | 图形宽度            |
+| height    | `number`     | `200`     | 图形大小            |
 | radius    | `number`     | `0`       | 圆角大小（1-10）    |
 
 ### IShapeType 类型

diff --git a/packages/amis-ui/scss/components/_shape.scss b/packages/amis-ui/scss/components/_shape.scss
@@ -6,7 +6,13 @@
  */
 
 .#{$ns}Shape {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 200px;
+  height: 200px;
+  &-svg {
+    position: absolute;
+  }
 }
diff --git a/packages/amis-ui/src/components/Shape.tsx b/packages/amis-ui/src/components/Shape.tsx
@@ -25,7 +25,9 @@ export type IShapeType =
 export interface IShapeProps extends ThemeProps {
   shapeType: IShapeType;
   radius: number;
-  size?: number;
+  width?: number;
+  height?: number;
+  color?: string;
 }
 
 class SvgPathGenerator {
@@ -378,15 +380,38 @@ class SvgPathGenerator {
 }
 
 const Shape: React.FC<IShapeProps> = props => {
-  const {classnames: cx, className, shapeType, radius, size = 200} = props;
+  const BASE_SIZE = 200;
+  const {
+    classnames: cx,
+    className,
+    shapeType,
+    radius,
+    color,
+    width = BASE_SIZE,
+    height = BASE_SIZE
+  } = props;
   const radiusValue = Math.floor(Math.max(0, Math.min(10, radius))) || 0;
-  const generator = new SvgPathGenerator(200);
+  const generator = new SvgPathGenerator(BASE_SIZE);
   const genFun = generator.getGenerage(shapeType);
   const paths = genFun(radiusValue * 10);
+  const style = {
+    width: width + 'px',
+    height: height + 'px'
+  };
+  const scaleStyle = {
+    transform: `scale(${width / BASE_SIZE}, ${height / BASE_SIZE})`
+  };
 
   return (
-    <div className={cx('Shape', className)}>
-      <svg width={size} height={size} fill="currentColor" viewBox="0 0 200 200">
+    <div className={cx('Shape', className)} style={style}>
+      <svg
+        className={cx('Shape-svg')}
+        width={BASE_SIZE}
+        height={BASE_SIZE}
+        style={scaleStyle}
+        fill={color ? color : 'currentColor'}
+        viewBox={`0 0 ${BASE_SIZE} ${BASE_SIZE}`}
+      >
         {paths.map((path, index) => (
           <path key={index} d={path} />
         ))}

diff --git a/packages/amis/src/renderers/Shape.tsx b/packages/amis/src/renderers/Shape.tsx
@@ -19,13 +19,21 @@ export interface IShapeSchema extends BaseSchema {
   shapeType: IShapeType;
 
   /**
-   * 图形大小
+   * 图形宽度
    */
-  size?: number;
+  width?: number;
+  /**
+   * 图形宽度
+   */
+  height?: number;
   /**
    * 圆角大小 1~10
    */
   radius: number;
+  /**
+   * 颜色
+   */
+  color?: string;
 }
 
 interface IShapeRenderProps
@@ -37,13 +45,15 @@ interface IShapeRenderProps
 })
 export class ShapeRenderer extends React.Component<IShapeRenderProps> {
   render() {
-    const {className, shapeType, radius, size} = this.props;
+    const {className, shapeType, radius, width, height, color} = this.props;
 
     return (
       <Shape
         className={cx(className)}
         shapeType={shapeType}
-        size={size}
+        width={width}
+        height={height}
+        color={color}
         radius={radius}
       />
     );