styles 样式配置

样式可视化配置插件，支持布局、间距、背景、尺寸、排版、边框等样式属性的图形化编辑，同时提供 CSS 代码编辑能力。

样式配置方式

样式面板提供三种配置方式：

方式	说明	存储位置
可视化面板	折叠面板分组配置，选择/输入即可	props.style
行内样式编辑	CSS 代码编辑器，直接编写 CSS 规则	props.style
页面样式类	页面级 CSS 类定义，可定义复用样式	css（页面级）

可视化面板分组

分组	说明	涵盖的 CSS 属性
布局定位	显示模式、Flex/Grid 布局、定位方式	display、flex-direction、justify-content、align-items、flex-wrap、position、top/right/bottom/left、z-index、float
内外边距	padding 和 margin 四方向设置	padding、padding-top/right/bottom/left、margin、margin-top/right/bottom/left
背景颜色	背景色、背景图、渐变	background-color、background-image、background-position、background-size、background-repeat、background-attachment、background-clip
宽高尺寸	宽高、最小/最大尺寸、溢出	width、height、min-width/max-width、min-height/max-height、overflow、object-fit
文本字体	字号、行高、颜色、对齐、粗细	font-size、line-height、color、text-align、font-style、font-weight、font-family、text-decoration
圆角边框	边框样式、宽度、颜色、圆角	border-style/width/color、border-radius、四方向/四角独立设置

样式存储结构

行内样式

行内样式存储在节点 props.style 中，值为 CSS 字符串：

{
  "id": "abc12345",
  "component": "View",
  "props": {
    "style": "display: flex; justify-content: center; padding: 16px; background-color: #f5f5f5; border-radius: 8px;"
  }
}

也支持绑定变量（JSExpression）：

{
  "props": {
    "style": {
      "type": "JSExpression",
      "value": "this.state.dynamicStyle"
    }
  }
}

类名绑定

通过 props.class 绑定 CSS 类名，多个类名用空格分隔：

{
  "props": {
    "class": "container flex-center"
  }
}

页面样式类

页面级 CSS 定义存储在页面 Schema 的 css 字段：

{
  "id": "page_001",
  "component": "Page",
  "css": ".container { display: flex; padding: 16px; } .flex-center { justify-content: center; align-items: center; }",
  "children": []
}