dynamic-data-item.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": "conn_dyn",
      "name": "动态样式数据",
      "type": "json",
      "connectorType": "json",
      "config": {
        "copyToRoot": true,
        "fileName": ""
      },
      "tables": [
        {
          "uid": "tbl_dyn",
          "name": "动态样式数据",
          "fields": [
            {
              "uid": "指标",
              "alias": "指标",
              "type": "string"
            },
            {
              "uid": "不透明度",
              "alias": "不透明度",
              "type": "number"
            }
          ]
        }
      ]
    }
  ],
  connectionData: {
    "conn_dyn": [
      {
        "tableId": "tbl_dyn",
        "tableName": "动态样式数据",
        "fields": [
          {
            "uid": "指标",
            "alias": "指标",
            "type": "string"
          },
          {
            "uid": "不透明度",
            "alias": "不透明度",
            "type": "number"
          }
        ],
        "rows": [
          {
            "指标": "文本透明度",
            "不透明度": 35
          }
        ]
      }
    ]
  },
  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={[1400,60]}
        text={"动态数据项：把样式项「不透明度」绑定到数据字段，由数据驱动样式"}
        text-font={{"size":28,"color":"#ffffff"}}
        text-position={"left"}
        stateOverrides={{}}
      />
      <basic-text
        uid={"w_dyn"}
        name={"不透明度受数据驱动"}
        position={[140,220]}
        size={[800,140]}
        text={"我的不透明度来自数据（35）"}
        text-font={{"size":56,"color":"#36cfc9"}}
        text-position={"center"}
        background-color={"#11324a"}
        dynamic-prop-entries={[{"name":"[\"opacity\"]","alias":"不透明度"}]}
        dynamic-prop-fields={{"[\"opacity\"]":{"dynamic-prop-field":[["conn_dyn","tbl_dyn","不透明度"]]}}}
        stateOverrides={{}}
      />
      <basic-table
        uid={"w_table"}
        name={"动态数据源"}
        position={[140,400]}
        size={[800,220]}
        row-count={3}
        table-data-fields={[["conn_dyn","tbl_dyn","指标"],["conn_dyn","tbl_dyn","不透明度"]]}
        stateOverrides={{}}
      />
    </screen>
  ),
})