feat: 图形组件

baidu · Dec 13, 2024 · 0e77dcc · 0e77dcc
1 parent 3363c12
commit 0e77dcc
Show file tree

Hide file tree

Showing 10 changed files with 551 additions and 0 deletions.
diff --git a/docs/zh-CN/components/shape.md b/docs/zh-CN/components/shape.md
@@ -0,0 +1,179 @@
+---
+title: Shape 形状
+description:
+type: 0
+group: ⚙ 组件
+menuName: Tabs
+icon:
+---
+
+用于展示形状
+
+## 基本用法
+
+```schema
+{
+    type: "page",
+    body: [
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'triangle'
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'square'
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'pentagon'
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'star'
+      }
+    ]
+}
+```
+
+## 配置大小
+
+```schema
+{
+    type: "page",
+    body: [
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'triangle',
+        size: 100
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'square',
+        size: 100
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'pentagon',
+        size: 100
+      }
+    ]
+}
+```
+
+## 配置圆角
+
+```schema
+{
+    type: "page",
+    body: [
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'triangle',
+        radius: 4
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'square',
+        radius: 4
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'pentagon',
+        radius: 4
+      }
+    ]
+}
+```
+
+## 更多图形
+
+```schema
+{
+  type: "page",
+  body: [
+    {
+      type: 'shape',
+      className: 'm-2',
+      shapeType: 'triangle',
+      size: 50
+    },
+    {
+      type: 'shape',
+      className: 'm-2',
+      shapeType: 'square',
+      size: 50
+    },
+    {
+      type: 'shape',
+      className: 'm-2',
+      shapeType: 'convex-arc-rectangle',
+      size: 50
+    },
+    {
+      type: 'shape',
+      className: 'm-2',
+      shapeType: 'convex-arc-rectangle',
+      size: 50,
+      radius: 4
+    },
+    {
+      type: 'shape',
+      className: 'm-2',
+      shapeType: 'concave-arc-rectangle',
+      size: 50,
+      radius: 4
+    },
+    {
+      type: 'shape',
+      className: 'm-2',
+      shapeType: 'double-arc-rectangle',
+      size: 50,
+      radius: 4
+    },
+    {
+      type: 'shape',
+      className: 'm-2',
+      size: 50,
+      shapeType: 'pentagon'
+    },
+    {
+      type: 'shape',
+      className: 'm-2',
+      size: 50,
+      shapeType: 'hexagon'
+    },
+    {
+      type: 'shape',
+      className: 'm-2',
+      size: 50,
+      shapeType: 'star'
+    },
+    {
+      type: 'shape',
+      className: 'm-2',
+      size: 50,
+      shapeType: 'heart'
+    }
+  ]
+}
+```
+
+## 属性表
+
+| 属性名    | 类型                                                                                                                                                                                                                                                       | 默认值    | 说明                |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
+| type      | `'string'`                                                                                                                                                                                                                                                 | `'shape'` | 指定为图形渲染器    |
+| shapeType | `'square'` 正方形 <br> `'triangle'` 三角形 <br> `'convex-arc-rectangle'` 上凸矩形 <br> `'concave-arc-rectangle'` 上凹矩形 <br> `'double-arc-rectangle'` 双凸矩形 <br> `'pentagon'` 五边形 <br> `'hexagon'` 六边形 <br> `'star'` 五角星 <br> `'heart'` 心形 | `'-'`     | 图形类型            |
+| className | `string`                                                                                                                                                                                                                                                   |           | 自定义 CSS 样式类名 |
+| size      | `number`                                                                                                                                                                                                                                                   | `200`     | 图形大小            |
+| radius    | `number`                                                                                                                                                                                                                                                   | `0`       | 圆角大小（1-10）    |
diff --git a/examples/components/Components.tsx b/examples/components/Components.tsx
@@ -1114,6 +1114,13 @@ export const components = [
         component: React.lazy(() =>
           import('../../docs/zh-CN/components/timeline.md').then(wrapDoc)
         )
+      },
+      {
+        label: 'Shape 形状',
+        path: '/zh-CN/components/shape',
+        component: React.lazy(() =>
+          import('../../docs/zh-CN/components/shape.md').then(wrapDoc)
+        )
       }
     ]
   },

diff --git a/packages/amis-ui/scss/components/_shape.scss b/packages/amis-ui/scss/components/_shape.scss
@@ -0,0 +1,12 @@
+/**
+ * @file _shape.scss 
+ *
+ * @author allenve([email protected])
+ * @created: 2024/12/12
+ */
+
+.#{$ns}Shape {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/packages/amis-ui/scss/themes/_common.scss b/packages/amis-ui/scss/themes/_common.scss
@@ -81,6 +81,7 @@
 @import '../components/steps';
 @import '../components/portlet';
 @import '../components/grid-nav';
+@import '../components/shape';
 
 @import '../components/form/fieldset';
 @import '../components/form/group';