Playground 可视化配置面板

可视化的配置管理面板，支持动态生成表单、表格、标签页等界面元素，适用于后台管理系统、低代码平台等场景。

基础用法

通过 data 属性传入配置数据，快速构建可配置的管理界面。

<template>
  <div class="playground-demo">
    <pa-playground :data="playgroundConfig" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const playgroundConfig = ref({
  id: "demo-playground",
  name: "示例配置面板",
  description: "一个基础的可视化配置面板示例",
  adminX: 349.8549201997348,
  adminY: 243.42883886104323,
  adminScale: 0.8300843858898644,
  pagesConfigs: [
    {
      pageId: "page-1",
      name: "基础配置",
      x: -100.24033635872281,
      y: -91.39560079765903,
      itemConfigs: [
        {
          itemId: "form-1",
          width: 520,
          height: 100,
          type: "form",
          structure: [
            {
              label: { "zh-CN": "项目名称", "en-US": "Project Name" },
              prop: "projectName",
              type: "input",
              rules: [{ required: true }]
            },
            { label: { "zh-CN": "项目描述", "en-US": "Description" }, prop: "description", type: "input" },
            {
              label: { "zh-CN": "项目状态", "en-US": "Status" },
              prop: "status",
              type: "select",
              exOptions: [
                { label: "进行中", value: "active" },
                { label: "已完成", value: "completed" },
                { label: "已暂停", value: "paused" }
              ]
            },
            {
              label: { "zh-CN": "优先级", "en-US": "Priority" },
              prop: "priority",
              type: "radio",
              exOptions: [
                { label: "高", value: "high" },
                { label: "中", value: "medium" },
                { label: "低", value: "low" }
              ]
            },
            { label: { "zh-CN": "启用通知", "en-US": "Enable Notification" }, prop: "enableNotification", type: "switch" }
          ],
          actionButtons: [],
          exOptions: {},
          sourceTable: "projects"
        }
      ]
    },
    {
      pageId: "page-2",
      name: "高级设置",
      x: -255.0154652772236,
      y: 130.39990764718888,
      itemConfigs: [
        {
          itemId: "form-2",
          width: 520,
          height: 100,
          type: "form",
          structure: [
            { label: { "zh-CN": "创建时间", "en-US": "Create Time" }, prop: "createTime", type: "date-picker" },
            { label: { "zh-CN": "截止日期", "en-US": "Deadline" }, prop: "deadline", type: "date-time-picker" },
            { label: { "zh-CN": "预算", "en-US": "Budget" }, prop: "budget", type: "number", min: 0, precision: 2, unit: "元" }
          ],
          actionButtons: [],
          exOptions: {},
          sourceTable: "projects"
        }
      ]
    }
  ],
  interfaceConfigs: [
    { id: "save-project", name: "保存项目", apiUrl: "/api/projects/save", apiType: "post", dataStructure: "project" },
    {
      id: "get-project",
      name: "获取项目",
      apiUrl: "/api/projects/:id",
      apiType: "get",
      dataStructure: "project",
      requestParameters: ["id"]
    }
  ],
  dataStructures: [
    {
      id: "project",
      description: "项目数据结构",
      indexKey: "id",
      config: [
        { id: "1", prop: "id", description: "项目ID", label: { "zh-CN": "ID", "en-US": "ID" } },
        { id: "2", prop: "projectName", description: "项目名称", label: { "zh-CN": "项目名称", "en-US": "Project Name" } },
        { id: "3", prop: "description", description: "项目描述", label: { "zh-CN": "项目描述", "en-US": "Description" } },
        { id: "4", prop: "status", description: "项目状态", label: { "zh-CN": "状态", "en-US": "Status" } }
      ]
    }
  ],
  exOptions: []
});
</script>

<style scoped>
.playground-demo {
  width: 100%;
  height: 500px;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  overflow: hidden;
}
</style>

显示代码

SaPlaygroundProps

属性名	描述	类型	默认值
id	组件唯一标识	string	—
class	自定义类名	string	—
style	自定义样式	Record<string, string>	—
data	配置数据	SaPlaygroundType	{}
requestFunction	请求函数	any	—
actionFunction	操作函数数组	Array<SaOptionType.Select & SaPlaygroundActionFunctionType>	—
authorizationFunction	授权函数数组	Array<SaStructureType.TableV2>	—
visibleBefore	可见性判断函数	(data: any) => boolean	—
actionBefore	操作前判断函数	(data: any) => boolean	—