@brushes/schema-to-view 1.0.0

package/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@brushes/schema-to-view",
+  "version": "1.0.0",
+  "description": "根据 UI 截图/设计稿动态生成低代码平台 JSON schema。当用户提供 UI 图片要求生成页面、将设计稿转为低代码页面、根据截图创建页面 JSON、图片转 Schema 时使用此 skill。触发条件：UI 截图 + 低代码、设计稿转代码、图片生成页面、schema 生成",
+  "keywords": ["@brushes/schema-to-view"]
+}

package/skills/REFERENCE.md

@@ -0,0 +1,487 @@
+# Schema-to-View 组件目录 & 示例
+
+## 组件全量目录（从真实 pageModel 提取）
+
+### ContainerWrap — 根容器
+```json
+{
+  "type": {"resolvedName": "ContainerWrap"},
+  "isCanvas": true,
+  "props": {
+    "width": "100",
+    "height": 0,
+    "background": "#00000000",
+    "className": "root-container",
+    "data-cy": "root-container"
+  },
+  "displayName": "ContainerWrap",
+  "custom": {},
+  "hidden": false,
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### OutContainer — 外容器
+```json
+{
+  "type": {"resolvedName": "OutContainer"},
+  "isCanvas": true,
+  "props": {
+    "params": [],
+    "width": "1400",
+    "height": "auto",
+    "backgroundImage": "",
+    "background": "rgba(255,255,255,0)",
+    "flexDirection": "column"
+  },
+  "displayName": "外容器",
+  "custom": {},
+  "hidden": false,
+  "parent": "ROOT",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### Container — 容器（Flexbox）
+```json
+{
+  "type": {"resolvedName": "Container"},
+  "isCanvas": true,
+  "props": {
+    "width": "100%",
+    "height": "auto",
+    "background": "rgba(255,255,255,0)",
+    "backgroundImage": "",
+    "flexDirection": "row",
+    "justifyContent": "flex-start",
+    "alignItems": "flex-start",
+    "margin": {},
+    "padding": {},
+    "positionValue": {},
+    "boxShadow": "",
+    "color": "",
+    "borderRadius": 0
+  },
+  "displayName": "容器",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### Text — 文本（完整示例：商品名称）
+```json
+{
+  "type": {"resolvedName": "Text"},
+  "isCanvas": false,
+  "props": {
+    "module": "moduleStore",
+    "storeKey": "_skuInfo",
+    "fontWeight": 700,
+    "fontSize": 14,
+    "num": 1,
+    "color": "#444",
+    "text": "默认文本",
+    "textAlign": "left",
+    "padding": {},
+    "margin": {"marginTop": 5, "marginBottom": 10},
+    "code": "goodsName",
+    "width": 190
+  },
+  "displayName": "文本",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+Text props 完整列表：`text`, `fontSize`, `color`, `fontWeight`, `num`(行数截断), `textAlign`, `width`, `height`, `lineHeight`, `minWidth`, `module`(`"moduleStore"`|`"rootStore"`), `storeKey`, `code`(lodash get 路径), `transformData`(`"time"`|`"format"`|`"dataType"`), `format`(日期格式如`"YYYY-MM-DD HH:mm:ss"`), `localScheme: [{label, value}]`, `className`, `padding`, `margin`, `contain`
+
+### ImageComponent — 图片
+```json
+{
+  "type": {"resolvedName": "ImageComponent"},
+  "isCanvas": false,
+  "props": {
+    "width": "100%",
+    "height": 250,
+    "storeKey": "_skuInfo",
+    "image": {"imgUrl": ""},
+    "code": "dataPic",
+    "borderRadius": 6
+  },
+  "displayName": "图片",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+额外 props: `objectFit`
+
+### DividerComponent — 分割线
+```json
+{
+  "type": {"resolvedName": "DividerComponent"},
+  "isCanvas": false,
+  "props": {
+    "dashed": false,
+    "plain": false,
+    "borderWidth": 1,
+    "orientationMargin": 0,
+    "orientation": "center",
+    "type": "horizontal",
+    "margin": {"marginBottom": 0, "marginLeft": 0, "marginRight": 0, "marginTop": 0},
+    "borderColor": "#f1f1f1"
+  },
+  "displayName": "线条",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### BreadcrumbComponent — 面包屑
+```json
+{
+  "type": {"resolvedName": "BreadcrumbComponent"},
+  "isCanvas": false,
+  "props": {"color": "#444", "fontSize": 12, "fontWeight": 400},
+  "displayName": "面包屑",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### GoodCategoryComponent — 商品分类
+```json
+{
+  "type": {"resolvedName": "GoodCategoryComponent"},
+  "isCanvas": false,
+  "props": {
+    "label": "All Fixtures",
+    "color": "#444",
+    "fontSize": 12,
+    "fontWeight": 400,
+    "goodsClassName": "goodsClassName",
+    "goodsClassCode": "goodsClassCode",
+    "api": "/web/rs/rsGoodsClass/queryGoodsClassTreeForBusStr.json",
+    "lastCode": "classtreeCode"
+  },
+  "displayName": "商品分类",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### SortComponent — 排序
+```json
+{
+  "type": {"resolvedName": "SortComponent"},
+  "isCanvas": false,
+  "props": {
+    "color": "#444",
+    "fontSize": 12,
+    "fontWeight": 400,
+    "config": [
+      {"label": "Default", "value": ""},
+      {"label": "Newest", "value": "skuHdate"},
+      {"label": "Best Sellers", "value": "pricesetNprice"}
+    ]
+  },
+  "displayName": "商品排序",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### ApiComponent — API 列表
+```json
+{
+  "type": {"resolvedName": "ApiComponent"},
+  "isCanvas": false,
+  "props": {
+    "componentType": "list",
+    "gap": 10,
+    "num": 5,
+    "cacheParams": false,
+    "isSearch": true,
+    "pageSize": 15,
+    "defaultValue": "{}",
+    "dataPath": "list",
+    "description": "No products found",
+    "margin": {"marginTop": 15, "marginBottom": 5, "marginLeft": 0, "marginRight": 0},
+    "pagination": true,
+    "api": "web/es/searchengine/find.json",
+    "rows": 24,
+    "params": [
+      {"key": "goodsClassParentcode", "value": ""},
+      {"key": "classtreeCode"},
+      {"key": "searchParam"},
+      {"key": "goodsType", "value": "00,40,07,12"},
+      {"key": "bizType", "value": "sku"},
+      {"key": "goodsOrigin", "value": "0,8,6,11,26"},
+      {"key": "order"}
+    ]
+  },
+  "displayName": "API组件",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {"card-basic": "<template-container-id>"}
+}
+```
+
+### CardComponent — 卡片（含点击跳转）
+```json
+{
+  "type": {"resolvedName": "CardComponent"},
+  "isCanvas": false,
+  "props": {
+    "borderRadius": 6,
+    "borderColor": "#f4f4f4",
+    "padding": {"paddingLeft": 4, "paddingRight": 4, "paddingTop": 4, "paddingBottom": 4},
+    "$_actions": "...source code...",
+    "$$_actions": "...compiled code..."
+  },
+  "displayName": "商品卡片",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {"card-top": "<card-content-container-id>"}
+}
+```
+
+### CardLRComponent — 左右卡片
+```json
+{
+  "type": {"resolvedName": "CardLRComponent"},
+  "isCanvas": false,
+  "props": {
+    "borderRadius": 6,
+    "borderColor": "rgba(0,0,0,0)",
+    "padding": {"paddingLeft": 4, "paddingRight": 4, "paddingTop": 4, "paddingBottom": 4}
+  },
+  "displayName": "左右卡片",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### GoodNumberComponent — 数量选择
+```json
+{
+  "type": {"resolvedName": "GoodNumberComponent"},
+  "isCanvas": false,
+  "props": {
+    "width": 80,
+    "storeKey": "_skuInfo",
+    "stepKey": "goodsTopnum",
+    "min": "goodsMinnum",
+    "max": "goodsSupplynum",
+    "saveStoreKey": "goodNum"
+  },
+  "displayName": "商品数量",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### AddCartComponent — 加入购物车
+```json
+{
+  "type": {"resolvedName": "AddCartComponent"},
+  "isCanvas": false,
+  "props": {
+    "type": "default",
+    "text": "加入购物车",
+    "car": {},
+    "margin": {"marginLeft": 10}
+  },
+  "displayName": "加入购物车",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### BuyComponent — 立即购买
+```json
+{
+  "type": {"resolvedName": "BuyComponent"},
+  "isCanvas": false,
+  "props": {
+    "type": "default",
+    "text": "立即购买",
+    "car": {},
+    "goGoodsType": true,
+    "margin": {"marginLeft": 10}
+  },
+  "displayName": "立即购买",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### ButtonWrap — 按钮外轮廓（渐变色按钮）
+```json
+{
+  "type": {"resolvedName": "ButtonWrap"},
+  "isCanvas": false,
+  "props": {
+    "letterSpacing": 1,
+    "fontWeight": 400,
+    "startColor": "#fa4c4c",
+    "color": "#fff",
+    "endColor": "#dc7200",
+    "padding": {"paddingTop": 2, "paddingBottom": 2, "paddingLeft": 2, "paddingRight": 2}
+  },
+  "displayName": "按钮外轮廓",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {"container-linear": "<inner-container-id>"}
+}
+```
+
+### IsShowContainer — 条件显示
+```json
+{
+  "type": {"resolvedName": "IsShowContainer"},
+  "isCanvas": true,
+  "props": {
+    "margin": {},
+    "isRevert": true,
+    "padding": {"paddingTop": 5, "paddingBottom": 5},
+    "routerIsShowValue": "",
+    "moduleIsShow": "goodsType",
+    "moduleShowValue": "07,12,26",
+    "storeKey": "_skuInfo"
+  },
+  "displayName": "条件容器",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### NumberComponent — 数字
+```json
+{
+  "type": {"resolvedName": "NumberComponent"},
+  "isCanvas": false,
+  "props": {"precision": 2},
+  "displayName": "数字组件",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### NavigatorComponent — 导航
+```json
+{
+  "type": {"resolvedName": "NavigatorComponent"},
+  "isCanvas": false,
+  "props": {
+    "menu": [{"title": "默认导航"}],
+    "isNeedLine": true,
+    "className": "nav"
+  },
+  "displayName": "导航",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+### BannerComponent — 轮播图
+```json
+{
+  "type": {"resolvedName": "BannerComponent"},
+  "isCanvas": false,
+  "props": {
+    "borderRadius": 0,
+    "autoplay": {"dotDuration": true},
+    "menu": [{"imgUrl": "https://..."}]
+  },
+  "displayName": "轮播图",
+  "custom": {},
+  "hidden": false,
+  "parent": "",
+  "nodes": [],
+  "linkedNodes": {}
+}
+```
+
+## linkedNodes 规则
+
+以下组件使用 linkedNodes 声明命名插槽：
+
+| 组件 | linkedNode key | 说明 |
+|------|---------------|------|
+| `ApiComponent` | `"card-basic"` | 列表项模板容器 |
+| `CardComponent` | `"card-top"` | 卡片内容区 |
+| `ButtonWrap` | `"container-linear"` | 按钮内部容器 |
+
+linkedNode 本身是一个完整节点，需要：
+- 在字典中作为独立 key 存在
+- `parent` 指向引用它的组件 ID
+- 可以有自己的 `nodes`（子节点）
+
+## 典型数据字段 code 值
+
+常用于 `Text` 和 `ImageComponent`：
+
+| code | 含义 |
+|------|------|
+| `goodsName` | 商品名称 |
+| `goodsShowno` | 商品编码 |
+| `goodsType` | 商品类型 |
+| `pricesetNprice` | 销售价格 |
+| `dataPic` | 商品图片 |
+| `skuName` | 规格名称 |
+| `skuCode` | SKU 编码 |
+| `skuNo` | SKU 号 |
+| `goodsTopnum` | 起购数量 |
+| `goodsMinnum` | 最小数量 |
+| `goodsSupplynum` | 供应数量 |
+| `firstAvailableDate` | 最早可交付日期 |
+| `partsnameWeightunit` | 重量单位 |

package/skills/SKILL.md

@@ -0,0 +1,322 @@
+---
+name: schema-to-view
+description: >
+  根据 UI 截图/设计稿动态生成低代码平台 JSON schema。当用户提供 UI 图片要求生成页面、
+  将设计稿转为低代码页面、根据截图创建页面 JSON、图片转 Schema 时使用此 skill。
+  触发条件：UI 截图 + 低代码、设计稿转代码、图片生成页面、schema 生成。
+argument-hint: "[UI截图路径]"
+allowed-tools: Bash(ls mkdir) Read Write Edit Glob Grep mcp__image-vision-mcp__* mcp__zai-mcp-server__*
+paths: "pageModels/**,apps/editor/**,packages/component-ui/**"
+---
+
+# Schema-to-View：UI 截图 → 低代码 JSON Schema
+
+将 UI 设计稿/截图转换为 web-lowcode 平台可用的 JSON schema 文件。
+
+## 执行流程
+
+### 第一步：分析 UI 截图
+
+使用 MCP 视觉工具分析用户提供的 UI 图片：
+
+```
+mcp__zai-mcp-server__analyze_image 或 mcp__image-vision-mcp__image_understanding
+```
+
+分析要点：
+- 页面整体布局（行列结构、侧边栏、内容区）
+- 识别每个区域中的 UI 元素类型（文本、图片、按钮、卡片、列表等）
+- 元素之间的层级关系
+- 颜色、字号、间距等样式细节
+
+### 第二步：映射到组件
+
+将识别出的 UI 元素映射为低代码平台组件。可用组件及分类：
+
+#### 布局容器
+| resolvedName | 用途 | 关键 props |
+|---|---|---|
+| `ContainerWrap` | 根容器（必须有，节点 ID 固定为 `ROOT`） | `width`, `height`, `background`, `className`, `data-cy` |
+| `OutContainer` | 页面外容器（ROOT 唯一子节点） | `params`, `width`(默认1400), `height`, `background`, `flexDirection` |
+| `Container` | 弹性布局容器 | `width`, `height`, `flexDirection`, `justifyContent`, `alignItems`, `background`, `padding`, `margin`, `borderRadius`, `boxShadow` |
+| `IsShowContainer` | 条件显示容器 | `isRevert`, `storeKey`, `moduleIsShow`, `moduleShowValue`, `routerIsShowValue` |
+
+#### 基础组件 (basic)
+| resolvedName | 用途 | 关键 props |
+|---|---|---|
+| `Text` | 文本（支持数据绑定+转换） | `text`, `module("moduleStore"/"rootStore")`, `storeKey("_skuInfo")`, `code`(数据字段路径), `fontSize`, `color`, `fontWeight`, `num`(行数), `textAlign`, `transformData`(`"time"`/`"format"`/`"dataType"`), `format`(日期格式), `localScheme`(码表) |
+| `ImageComponent` | 图片（支持数据绑定） | `width`, `height`, `image: { imgUrl: "" }`, `code`(如`"dataPic"`), `storeKey`, `borderRadius`, `objectFit` |
+| `DividerComponent` | 分割线 | `borderWidth`, `borderColor`, `dashed`, `type("horizontal"/"vertical")`, `margin` |
+| `LinkComponent` | 超链接 | `image: { imgUrl, link }`, `text`, `fontSize` |
+| `FormComponent` | 表单外层容器 | `formName`, `api`, `saveText`, `disabled`, `padding` |
+| `ApiComponent` | API 数据列表 | `api`, `componentType("list")`, `dataPath("list")`, `pageSize`, `num`, `pagination`, `params`, `margin`, `description`(空状态文本), `linkedNodes: { "card-basic": "<template-node-id>" }` |
+| `Button` | 按钮 | 通过 Operate 和 Materials 引用 |
+
+#### 业务组件 (service)
+| resolvedName | 用途 | 关键 props |
+|---|---|---|
+| `NavigatorComponent` | 导航栏 | `menu: [{ title }]`, `isNeedLine`, `className` |
+| `CardLRComponent` | 左右卡片布局 | `borderRadius`, `borderColor`, `padding` |
+| `BreadcrumbComponent` | 面包屑 | `color`, `fontSize`, `fontWeight` |
+| `GoodCategoryComponent` | 商品分类树 | `api`, `label`, `color`, `fontSize`, `goodsClassName`, `goodsClassCode`, `lastCode` |
+| `SortComponent` | 排序选择器 | `config: [{ label, value }]`, `color`, `fontSize`, `fontWeight` |
+| `SearchComponent` | 搜索组件 | 搜索相关 props |
+| `CommonListComponent` | 详情页列表 | `dataPath`, `storeKey`, `description`, `defaultKey`, `padding` |
+| `CommmonItem` | 单行条目 | `draggable`, `list`, `speed`, `margin`, `padding` |
+| `NumberComponent` | 数字组件 | `precision` |
+| `ButtonWrap` | 按钮外轮廓 | `letterSpacing`, `fontWeight`, `startColor`, `endColor`, `color`, `padding`, `linkedNodes: { "container-linear": "<id>" }` |
+| `GoodNumberComponent` | 数量选择器 | `width`, `storeKey`, `stepKey`, `min`, `max`, `saveStoreKey` |
+| `MapComponent` | 地图 | 地图相关 props |
+| `Amount` | 金额展示 | 金额相关 props |
+
+#### 操作组件 (operate)
+| resolvedName | 用途 | 关键 props |
+|---|---|---|
+| `LogoinComponent` | 登录 | `isNeedRegister`, `protocol`, `type` |
+| `DynamicFormComponent` | 动态表单 | `fieldConfig: []` |
+| `AddCartComponent` | 加入购物车 | `type("default")`, `text`, `car: {}`, `margin` |
+| `BuyComponent` | 立即购买 | `type("default")`, `text`, `car: {}`, `goGoodsType`, `margin` |
+| `SaveComponent` | 保存操作 | 保存相关 props |
+| `LogoutComponent` | 退出登录 | 退出相关 props |
+
+#### 复合组件 (components/Materials)
+| resolvedName | 用途 | 关键 props |
+|---|---|---|
+| `CardComponent` | 卡片 | `borderRadius`, `borderColor`, `background`, `boxShadow`, `padding`, `linkedNodes: { "card-top": "<id>" }`, `$_actions`/`$$_actions`(点击跳转) |
+| `BannerComponent` | 轮播图 | `borderRadius`, `autoplay`, `menu: [{ imgUrl }]` |
+| `TabComponent` | 标签页 | `columns: [{ label, key }]`, `fontSize`, `tabPosition` |
+| `AutoTabComponent` | 动态标签页 | `columns: [{ label, key, code }]`, `storeKey`, `keyName`, `fontSize`, `tabPosition` |
+| `RichTextComponent` | 富文本 | `columns` |
+| `DrawerComponent` | 抽屉 | `width`, `destroyOnHidden`, `code`, `placement` |
+| `FormJsxComponent` | 表单 JSX | `formName`, `openKey`, `api`, `activeModule`, `saveText`, `type` |
+
+### 第三步：生成 JSON Schema
+
+#### Schema 结构规则
+
+JSON schema 是一个 **扁平字典** `Record<NodeId, SerializedNode>`，唯一特殊节点是 `"ROOT"`。
+
+#### 单个节点结构
+```json
+{
+  "type": { "resolvedName": "组件名" },
+  "isCanvas": true/false,        // 能否包含子节点
+  "props": { /* 组件属性 */ },
+  "displayName": "中文显示名",
+  "custom": {},
+  "hidden": false,
+  "parent": "父节点ID",           // ROOT 节点的 parent 为 "ROOT"
+  "nodes": ["子节点ID数组"],       // 没子节点就是 []
+  "linkedNodes": {}              // 命名插槽，普通节点为 {}
+}
+```
+
+#### namedNode ID 生成规则
+
+- 格式：8-10 位大小写字母数字混合
+- 示例：`"FKp8Qm3vNx"`, `"FCd9Wr8dGf"`, `"sN6ZG4fCJK"`
+- 每个 ID 在整个 JSON 中唯一
+- 可任意生成，但要确保 `parent` 和 `nodes` 引用的 ID 都存在
+
+#### 构建步骤
+
+1. **创建 ROOT 节点**（固定模板）：
+```json
+"ROOT": {
+  "type": { "resolvedName": "ContainerWrap" },
+  "isCanvas": true,
+  "props": {
+    "width": "100",
+    "height": 0,
+    "background": "#00000000",
+    "className": "root-container",
+    "data-cy": "root-container"
+  },
+  "displayName": "ContainerWrap",
+  "custom": {},
+  "hidden": false,
+  "nodes": ["<outContainerId>"],
+  "linkedNodes": {}
+}
+```
+
+2. **创建 OutContainer**（ROOT 的直接子节点）：
+```json
+"<outContainerId>": {
+  "type": { "resolvedName": "OutContainer" },
+  "isCanvas": true,
+  "props": {
+    "params": [],
+    "width": "1400",
+    "height": "auto",
+    "backgroundImage": "",
+    "background": "rgba(255,255,255,0)",
+    "flexDirection": "column"
+  },
+  "displayName": "外容器",
+  "custom": {},
+  "parent": "ROOT",
+  "hidden": false,
+  "nodes": ["<top-level-children>..."],
+  "linkedNodes": {}
+}
+```
+
+3. **构建布局树**：根据 UI 分析结果，用 Container 组件构建行列布局
+
+4. **放入内容组件**：在合适的 Container 中放入 Text、Image、Button 等
+
+5. **处理数据列表**：如果有列表，使用 ApiComponent + linkedNodes 模式
+
+6. **验证完整性**：确保所有 `parent`、`nodes`、`linkedNodes` 引用的 ID 都存在
+
+### 第四步：输出 JSON 文件
+
+将生成的 JSON 写入 `pageModels/` 目录（单行，无格式化）：
+```
+Write: pageModels/{name}.json
+```
+
+## 典型页面模板
+
+### 商品列表页（最常用）
+
+```
+ROOT → OutContainer
+  ├── Container(row, 100%)            ← 顶栏/面包屑
+  │   └── Container(column)
+  │       ├── BreadcrumbComponent
+  │       └── Text                      ← 页面标题
+  ├── Container(row, 100%)            ← 分类侧栏 + 内容区
+  │   ├── Container(100px, sidebar)   ← 侧栏
+  │   │   └── Text                     ← "Category"
+  │   └── Container(1300px, content)  ← 内容区
+  │       └── GoodCategoryComponent
+  ├── DividerComponent                ← 分割线
+  ├── Container(row, 100%)            ← 排序栏
+  │   ├── Container(100px, sidebar)
+  │   │   └── Text                     ← "Sort By"
+  │   └── Container(1300px)
+  │       └── SortComponent
+  └── Container(column)               ← 商品列表区
+      └── ApiComponent                 ← API 数据
+          └── [linkedNode: card-basic]
+              └── Container
+                  └── CardComponent
+                      └── [linkedNode: card-top]
+                          └── Container(column)
+                              ├── ImageComponent ← 商品图
+                              └── Container(column, 内容区)
+                                  ├── Text(goodsName)    ← 商品名
+                                  ├── Container(row, 价格行)
+                                  │   ├── Text(pricesetNprice)
+                                  │   └── Text(收藏)
+                                  └── Text(goodsShowno)   ← 商品编码
+```
+
+### 商品详情页
+
+```
+ROOT → OutContainer
+  ├── DividerComponent
+  └── Container(column)
+      └── ApiComponent
+          └── [card-basic] → Container
+              └── CardComponent
+                  └── [card-top] → Container(column)
+                      ├── ImageComponent          ← 商品大图
+                      └── Container(column)
+                          ├── Text(goodsName)     ← 商品名
+                          ├── Container(row)      ← 规格行
+                          │   ├── Text("SKU编码：")
+                          │   └── Text(goodsShowno)
+                          ├── Container(row)      ← 价格行
+                          │   ├── Text("￥")
+                          │   ├── Text(pricesetNprice)
+                          │   └── Text(单位)
+                          └── Container(row, space-between) ← 操作行
+                              ├── GoodNumberComponent       ← 数量
+                              └── Container(column)
+                                  ├── IsShowContainer → AddCartComponent
+                                  └── IsShowContainer → ButtonWrap
+                                      └── [container-linear]
+                                          └── Container → BuyComponent
+```
+
+## 组件 Props 完整参考
+
+### 通用 css 属性（多数组件都支持）
+```json
+{
+  "margin": { "marginTop": 5, "marginBottom": 5, "marginLeft": 0, "marginRight": 0 },
+  "padding": { "paddingTop": 5, "paddingBottom": 5, "paddingLeft": 5, "paddingRight": 5 }
+}
+```
+
+### 文本组件数据绑定三要素
+```json
+{
+  "module": "moduleStore",     // 数据来源级别
+  "storeKey": "_skuInfo",     // store 中的 key
+  "code": "goodsName"         // 数据字段路径（用 lodash.get 取值）
+}
+```
+
+### ApiComponent 列表模式
+```json
+{
+  "componentType": "list",
+  "api": "web/es/searchengine/find.json",
+  "dataPath": "list",
+  "gap": 10,
+  "num": 5,
+  "pageSize": 15,
+  "pagination": true,
+  "params": [
+    { "key": "searchParam" },
+    { "key": "order" }
+  ],
+  "description": "暂无数据",
+  "margin": { "marginTop": 15, "marginBottom": 5, "marginLeft": 0, "marginRight": 0 }
+}
+```
+
+### CardComponent 点击跳转
+```json
+{
+  "$_actions": "import { useModuleContext } from \"@brushes/component-core\";\nimport { useNavigateImpl } from \"@brushes/component-tool\";\n\nfunction useDiyHook() {\n  const skuInfo = useModuleContext(s=> s.moduleStore._skuInfo)\n  const { navigator } = useNavigateImpl();\n  return () => {\n    navigator(`/goodDetail?skuCode=${skuInfo.skuCode}&skuNo=${skuInfo.skuNo}`);\n  }\n}\nexport default useDiyHook;",
+  "$$_actions": "\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\nvar _componentcore = require('@brushes/component-core');\nvar _componenttool = require('@brushes/component-tool');\nfunction useDiyHook() {\n  const skuInfo = _componentcore.useModuleContext.call(void 0, s=> s.moduleStore._skuInfo)\n  const { navigator } = _componenttool.useNavigateImpl.call(void 0, );\n  return () => {\n    navigator(`/goodDetail?skuCode=${skuInfo.skuCode}&skuNo=${skuInfo.skuNo}`);\n  }\n}\nexports. default = useDiyHook;"
+}
+```
+
+### Container 完整 props
+```json
+{
+  "width": "100%",
+  "height": "auto",
+  "background": "rgba(255,255,255,0)",
+  "backgroundImage": "",
+  "flexDirection": "row",           // row | column
+  "justifyContent": "space-between", // flex-start | center | space-between | flex-end
+  "alignItems": "center",
+  "margin": {},
+  "padding": {},
+  "positionValue": {},
+  "boxShadow": "",
+  "color": "",
+  "borderRadius": 0
+}
+```
+
+## 注意事项
+
+1. `ROOT` 节点 ID 必须是 `"ROOT"`，类型固定 `ContainerWrap`
+2. `ROOT.nodes[0]` 必须是 `OutContainer`
+3. 所有 `parent` 引用的 ID 必须是字典中存在的 key
+4. 所有 `nodes` 数组中的 ID 必须是字典中存在的 key
+5. `linkedNodes` 中的引用节点其 `parent` 要指向引用它的节点
+6. 每个节点的 `isCanvas` 设对：Container 类为 `true`，内容组件为 `false`
+7. JSON 输出为单行（compact），不要格式化
+8. 文本组件绑定数据必须同时设置 `module`, `storeKey`, `code`
+9. 生成后写入 `pageModels/{name}.json`
+10. Container (卡片外层) 比如4列网格布局 (width: 25%  ❌)  不管一行多少个  (width: 100% ✅)