feat：UI specification adjustment

packages/builtinComponent/index.js

@@ -1,4 +1,6 @@
 export { default as CanvasCol } from './src/components/CanvasCol.vue'
 export { default as CanvasRow } from './src/components/CanvasRow.vue'
 export { default as CanvasRowColContainer } from './src/components/CanvasRowColContainer.vue'
+export { default as CanvasFlexBox } from './src/components/CanvasFlexBox.vue'
+export { default as CanvasSection } from './src/components/CanvasSection.vue'
 export { default as meta } from './src/meta'

packages/builtinComponent/src/components/CanvasFlexBox.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="canvas-flex-box">
+    <slot> </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps } from 'vue'
+import { getStyleValue } from './helper'
+
+const props = defineProps({
+  flexDirection: {
+    type: String,
+    default: 'row'
+  },
+  gap: {
+    type: [String, Number],
+    default: '8px'
+  },
+  padding: {
+    type: [String, Number],
+    default: '8px'
+  },
+  alignItems: {
+    type: String,
+    default: 'center'
+  },
+  justifyContent: {
+    type: String,
+    default: 'flex-start'
+  }
+})
+
+const styles = computed(() => ({
+  flexDirection: props.flexDirection,
+  gap: getStyleValue(props.gap),
+  padding: getStyleValue(props.padding),
+  alignItems: props.alignItems,
+  justifyContent: props.justifyContent
+}))
+</script>
+<style lang="less" scoped>
+.canvas-flex-box {
+  display: flex;
+  flex: 1 1 0px;
+  flex-direction: v-bind('styles.flexDirection');
+  gap: v-bind('styles.gap');
+  padding: v-bind('styles.padding');
+  align-items: v-bind('styles.alignItems');
+  justify-content: v-bind('styles.justifyContent');
+  :deep(.canvas-container) {
+    width: 100%;
+  }
+}
+</style>

packages/builtinComponent/src/components/CanvasSection.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="canvas-section">
+    <slot> </slot>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.canvas-section {
+  width: 100%;
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  justify-content: center;
+}
+</style>

packages/builtinComponent/src/meta/CanvasFlexBox.json

@@ -0,0 +1,221 @@
+{
+  "component": {
+    "icon": "Box",
+    "name": {
+      "zh_CN": "弹性容器"
+    },
+    "component": "CanvasFlexBox",
+    "schema": {
+      "slots": {},
+      "properties": [
+        {
+          "label": {
+            "zh_CN": "基础信息"
+          },
+          "description": {
+            "zh_CN": "基础信息"
+          },
+          "collapse": {
+            "number": 6,
+            "text": {
+              "zh_CN": "显示更多"
+            }
+          },
+          "content": [
+            {
+              "property": "flexDirection",
+              "type": "String",
+              "defaultValue": "row",
+              "bindState": true,
+              "label": {
+                "text": {
+                  "zh_CN": "排列方向"
+                }
+              },
+              "cols": 12,
+              "rules": [],
+              "widget": {
+                "component": "SelectConfigurator",
+                "props": {
+                  "options": [
+                    {
+                      "label": "水平,起点在左端",
+                      "value": "row"
+                    },
+                    {
+                      "label": "水平,起点在右端",
+                      "value": "row-reverse"
+                    },
+                    {
+                      "label": "垂直,起点在上沿",
+                      "value": "column"
+                    },
+                    {
+                      "label": "垂直,起点在下沿",
+                      "value": "column-reverse"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "property": "gap",
+              "defaultValue": "8px",
+              "label": {
+                "text": {
+                  "zh_CN": "间距"
+                }
+              },
+              "widget": {
+                "component": "InputConfigurator"
+              },
+              "description": {
+                "zh_CN": "控制容器内水平和垂直的间距"
+              },
+              "labelPosition": "left"
+            },
+            {
+              "property": "padding",
+              "defaultValue": "8px",
+              "label": {
+                "text": {
+                  "zh_CN": "内边距"
+                }
+              },
+              "widget": {
+                "component": "InputConfigurator"
+              },
+              "labelPosition": "left"
+            },
+            {
+              "property": "justifyContent",
+              "type": "String",
+              "defaultValue": "flex-start",
+              "bindState": true,
+              "label": {
+                "text": {
+                  "zh_CN": "水平对齐方式"
+                }
+              },
+              "cols": 12,
+              "rules": [],
+              "widget": {
+                "component": "SelectConfigurator",
+                "props": {
+                  "options": [
+                    {
+                      "label": "左对齐",
+                      "value": "flex-start"
+                    },
+                    {
+                      "label": "右对齐",
+                      "value": "flex-end"
+                    },
+                    {
+                      "label": "居中",
+                      "value": "center"
+                    },
+                    {
+                      "label": "两端对齐,子元素间隔相等",
+                      "value": "space-between"
+                    },
+                    {
+                      "label": "子元素两侧间隔相等",
+                      "value": "space-around"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "property": "alignItems",
+              "type": "String",
+              "defaultValue": "center",
+              "bindState": true,
+              "label": {
+                "text": {
+                  "zh_CN": "垂直对齐方式"
+                }
+              },
+              "cols": 12,
+              "rules": [],
+              "widget": {
+                "component": "SelectConfigurator",
+                "props": {
+                  "options": [
+                    {
+                      "label": "交叉轴的中点对齐",
+                      "value": "center"
+                    },
+                    {
+                      "label": "交叉轴的起点对齐",
+                      "value": "flex-start"
+                    },
+                    {
+                      "label": "交叉轴的终点对齐",
+                      "value": "flex-end"
+                    },
+                    {
+                      "label": "以子元素第一行文字的基线对齐",
+                      "value": "baseline"
+                    },
+                    {
+                      "label": "占满容器高度",
+                      "value": "stretch"
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "events": {
+        "onClick": {
+          "label": {
+            "zh_CN": "点击事件"
+          },
+          "description": {
+            "zh_CN": "点击时触发的回调函数"
+          },
+          "type": "event",
+          "functionInfo": {
+            "params": [],
+            "returns": {}
+          },
+          "defaultValue": ""
+        }
+      },
+      "shortcuts": {
+        "properties": []
+      },
+      "contentMenu": {
+        "actions": []
+      }
+    },
+    "configure": {
+      "loop": true,
+      "isContainer": true,
+      "nestingRule": {
+        "childWhitelist": [],
+        "descendantBlacklist": []
+      }
+    }
+  },
+  "snippet": {
+    "name": {
+      "zh_CN": "弹性容器"
+    },
+    "screenshot": "",
+    "snippetName": "CanvasFlexBox",
+    "icon": "Box",
+    "schema": {
+      "componentName": "CanvasFlexBox",
+      "props": {
+        "flexDirection": "row",
+        "gap": "8px",
+        "padding": "8px"
+      }
+    }
+  }
+}

packages/builtinComponent/src/meta/CanvasRowColContainer.json

@@ -68,21 +68,21 @@
     "schema": {
       "componentName": "CanvasRowColContainer",
       "props": {
-        "rowGap": "20px"
+        "rowGap": "16px"
       },
       "children": [
         {
           "componentName": "CanvasRow",
           "props": {
-            "rowGap": "20px",
-            "colGap": "20px"
+            "rowGap": "16px",
+            "colGap": "16px"
           },
           "children": [
             {
               "componentName": "CanvasCol",
               "props": {
-                "rowGap": "20px",
-                "colGap": "20px",
+                "rowGap": "16px",
+                "colGap": "16px",
                 "grow": true,
                 "shrink": true,
                 "widthType": "auto"

packages/builtinComponent/src/meta/CanvasSection.json

@@ -0,0 +1,71 @@
+{
+  "component": {
+    "icon": "Box",
+    "name": {
+      "zh_CN": "全宽居中布局"
+    },
+    "component": "CanvasSection",
+    "schema": {
+      "slots": {},
+      "properties": [
+        {
+          "label": {
+            "zh_CN": "基础信息"
+          },
+          "description": {
+            "zh_CN": "基础信息"
+          },
+          "collapse": {
+            "number": 6,
+            "text": {
+              "zh_CN": "显示更多"
+            }
+          },
+          "content": []
+        }
+      ],
+      "events": {
+        "onClick": {
+          "label": {
+            "zh_CN": "点击事件"
+          },
+          "description": {
+            "zh_CN": "点击时触发的回调函数"
+          },
+          "type": "event",
+          "functionInfo": {
+            "params": [],
+            "returns": {}
+          },
+          "defaultValue": ""
+        }
+      },
+      "shortcuts": {
+        "properties": []
+      },
+      "contentMenu": {
+        "actions": []
+      }
+    },
+    "configure": {
+      "loop": true,
+      "isContainer": true,
+      "nestingRule": {
+        "childWhitelist": [],
+        "descendantBlacklist": []
+      }
+    }
+  },
+  "snippet": {
+    "name": {
+      "zh_CN": "全宽居中布局"
+    },
+    "screenshot": "",
+    "snippetName": "CanvasSection",
+    "icon": "Box",
+    "schema": {
+      "componentName": "CanvasSection",
+      "props": {}
+    }
+  }
+}