一、基础用法
通过 direction 与 children 定义子组件的排列方式，gap 用于控制子元素之间的间距。
Template 示例：
<Box direction="col" gap="12px"> <Text value="内容1" /> <Text value="内容2" /></Box>
效果展示如下：
二、布局属性
| 属性名 | 类型 | 描述 | 默认值 |
| direction | "row" | "col" | 布局方向 | "row" |
| children | ChatKitComponent[] | 子组件列表 | – |
| align | Alignment | 交叉轴对齐方式 | – |
| justify | Justification | 主轴对齐方式 | – |
| wrap | "nowrap" | "wrap" | "wrap-reverse" | 换行方式 | "nowrap" |
| flex | number | string | 弹性伸缩比例 | – |
| gap | number | string | 子元素间距 | – |
| padding | number | string | Spacing | 内边距 | – |
| border | number | Border | Borders | 边框配置 | – |
| background | string | ThemeColor | 背景颜色 | – |
三、尺寸属性
| 属性名 | 类型 | 描述 | 默认值 |
| height | number | string | 高度 | – |
| width | number | string | 宽度 | – |
| size | number | string | 同时设置宽高 | – |
| minHeight | number | string | 最小高度 | – |
| minWidth | number | string | 最小宽度 | – |
| minSize | number | string | 最小尺寸 | – |
| maxHeight | number | string | 最大高度 | – |
| maxWidth | number | string | 最大宽度 | – |
| maxSize | number | string | 最大尺寸 | – |
| aspectRatio | number | string | 宽高比 | – |
| radius | RadiusValue | 圆角 | – |
| margin | number | string | Spacing | 外边距 | – |
四、类型定义
Alignment
用于控制子组件在交叉轴方向上的对齐规则，交叉轴方向由 direction 决定：
·当 direction = "row" 时，交叉轴为纵向。
·当 direction = "col" 时，交叉轴为横向。
可选值如下：
"start" | "center" | "end" | "baseline" | "stretch"
可选值说明如下：
·"start"：子组件在交叉轴起始位置对齐。
·"center"：子组件在交叉轴居中对齐。
·"end"：子组件在交叉轴结束位置对齐。
·"baseline"：子组件按文本基线对齐，常用于包含文本的横向布局。
·"stretch"：子组件在交叉轴方向拉伸，占满可用空间。
Justification
用于控制子组件在主轴方向上的分布和对齐方式，主轴方向由 direction 决定：
·当 direction = "row" 时，主轴为横向。
·当 direction = "col" 时，主轴为纵向。
可选值如下：
"start" | "end" | "center" | "between" | "around" | "evenly"
可选值说明如下：
·"start"：子组件从主轴起始位置依次排列。
·"end"：子组件整体向主轴末端对齐。
·"center"：子组件整体在主轴方向居中。
·"between"：首尾贴边，其余子组件等间距分布。
·"around"：子组件两侧保留等量空间。
·"evenly"：子组件及两侧空隙完全等分。
RadiusValue
用于定义组件的圆角大小，支持语义化预设值与自定义值。
可选值如下：
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | string
可选值说明如下：
·"2xs" ～ "3xl"：由小到大的圆角预设值。
·"full"：完全圆角，常用于圆形或胶囊形元素。
·string：自定义圆角值，如 "4px"、"50%"。
Spacing
用于描述内边距（padding）或间距类属性的配置方式。
支持以下三种形式：
number | string | { x?: number; y?: number; top?: number; right?: number; bottom?: number; left?: number }
说明如下：
·number | string：四个方向使用相同的间距值。
·x / y：分别控制水平方向与垂直方向的间距。
·top / right / bottom / left：分别控制单个方向的间距。
Border
用于配置组件整体边框样式。
支持以下字段：
{ size?: number; color?: string; style?: "solid" | "dashed" | "dotted" }
字段说明如下：
·size：边框宽度。
·color：边框颜色。
·style：边框样式类型。
Borders
用于分别配置组件四个方向的边框样式。
支持以下字段：
{ top?: Border; right?: Border; bottom?: Border; left?: Border }
字段说明如下：
·top：顶部边框配置。
·right：右侧边框配置。
·bottom：底部边框配置。
·left：左侧边框配置。