property-data-source.vp.tsx

/** @jsx h */
// AUTO-GENERATED by export-examples-tsx —— 由同名 .vpproj.json 导出的 VP-TSX 配对视图（已回编译等值验证）。
// 修改请改 JSON 后重跑导出脚本，或改本文件后用 compile.mts 重编 JSON——保持两者一致。
import { defineProject, h } from '../scripts/vptsx/runtime'

export default defineProject({
  name: "属性数据源示例",
  connections: [
    {
      "uid": "__vp_prop_w_src",
      "name": "属性数据源",
      "type": "prop-source",
      "connectorType": "prop-source",
      "tables": [
        {
          "uid": "w_src::[\"text\"]",
          "name": "主推文案",
          "fields": [
            {
              "uid": "value",
              "alias": "value",
              "type": "string"
            }
          ]
        }
      ]
    }
  ],
  connectionData: {
    "__vp_prop_w_src": [
      {
        "tableId": "w_src::[\"text\"]",
        "fields": [
          {
            "uid": "value",
            "alias": "value",
            "type": "string"
          }
        ],
        "rows": [
          {
            "value": "本月主推：新能源汽车"
          }
        ]
      }
    ]
  },
  screen: (
    <screen
      uid={"screen_main"}
      name={"主页面"}
      fullscreen-mode={"fill-uniform"} fill-auto-expand={true}
      size={[1920,1080]}
      background-color={"#0c0d0e"}
      stateOverrides={{}}
    >
      <basic-text
        uid={"w_title"}
        position={[140,70]}
        size={[1640,90]}
        text={"属性数据源：组件 A 把它的「文本」属性「生成属性数据源」→ B 文本 / C 表格订阅该属性的 value 字段。改 A 的文本，B/C 同步。"}
        text-font={{"size":28,"color":"#ffffff"}}
        text-position={"left"}
        stateOverrides={{}}
      />
      <basic-text
        uid={"w_src"}
        name={"组件A(属性数据源)"}
        position={[140,220]}
        size={[560,160]}
        text={"本月主推：新能源汽车"}
        text-font={{"size":30,"color":"#36d1a6"}}
        text-position={"center"}
        border={true}
        prop-source-entries={[{"name":"[\"text\"]","alias":"主推文案","cUID":"w_src","connectionUID":"__vp_prop_w_src"}]}
        stateOverrides={{}}
      />
      <basic-text
        uid={"w_echo"}
        name={"组件B(订阅属性)"}
        position={[760,220]}
        size={[560,160]}
        text={"(等待 A 的属性…)"}
        text-font={{"size":30,"color":"#ffd666"}}
        text-position={"center"}
        border={true}
        value-field={[["__vp_prop_w_src","w_src::[\"text\"]","value"]]}
        stateOverrides={{}}
      />
      <basic-table
        uid={"w_table"}
        name={"组件C(属性即数据表)"}
        position={[140,430]}
        size={[1180,280]}
        row-count={5}
        table-data-fields={[["__vp_prop_w_src","w_src::[\"text\"]","value"]]}
        stateOverrides={{}}
      />
    </screen>
  ),
})