data-driven-design/src/App.vue

<script lang="ts" setup>
import { ref } from 'vue'
import type { Block, Module } from './engineer'
import DddBuilder, { hash } from './engineer'

let nextId = Date.now()

const blocks = ref<Block[]>([{
  vid: hash(`${++nextId}`),
  mid: '',
  theme: {
    radius: 24,
    color: 'yellow',
  },
  children: {
    type: 'text',
    key: 'textName',
  },
}, {
  vid: hash(`${++nextId}`),
  mid: '',
  theme: {
    color: 'pink',
    margin: 12,
    flexible: true,
  },
  children: {
    type: 'image',
    key: 'imageKey',
    link: 'linkKey',
    radius: 24,
  },
}, {
  vid: hash(`${++nextId}`),
  mid: '',
  theme: {
    color: '#fafbfc',
    margin: 12,
    padding: 24,
    mainAlign: 'center',
    crossAlign: 'center',
    flexible: true,
  },
  children: {
    type: 'audio',
    key: 'audioKey',
    title: 'title',
  },
}, {
  vid: hash(`${++nextId}`),
  mid: '',
  theme: {
    radius: 24,
    color: 'teal',
  },
  children: [{
    theme: {
      flexible: true,
      gap: 12,
      crossAlign: 'center',
    },
    children: [{
      theme: {
        padding: 12,
        margin: 12,
        grow: 1,
      },
      children: {
        vid: hash(`${++nextId}`),
        theme: {
          fontSize: 32,
        },
        children: 'left',
      },
    }, {
      vid: hash(`${++nextId}`),
      theme: {
        width: 'auto',
        padding: {
          vertical: 4,
          horizontal: 12,
        },
        color: 'pink',
        radius: 16,
      },
      children: 'right222',
    }, {
      theme: {
        width: 48,
      },
    }],
  }],
}, ...Array.from(Array.from({length: 3})).map<Block>((_, i) => ({
  vid: hash(`${++nextId}`),
  mid: '',
  children: [{
    vid: hash(`${++nextId}`),
    theme: {
      fontSize: 22,
    },
    children: `测试${i}`,
  }],
}))])

const categories = ref([{icon: 'trash', text: '媒体'}, {icon: 'trash', text: '图表'}, {icon: 'trash', text: '商品'}, {icon: 'trash', text: '功能'}, {icon: 'trash', text: '素材'}].map(c => ({
  ...c,
  modules: Array.from(Array.from({length: 102})).map<Module>((_, i) => ({
    vid: hash(`${++nextId}`),
    mid: hash(`${++nextId}`),
    title: `${c.text}${i + 1}`,
    maxReferenceCount: -1,
    referenceCount: 0,
    image: undefined,
    configs: [],
    children: [{
      vid: hash(`${++nextId}`),
      theme: {
        height: 68,
        width: 375,
        border: {color: '#eee'},
      },
      children: [String(`${c.text}${i + 1}`)],
    }],
  })),
})))

categories.value.unshift({
  icon: 'trash',
  text: '基础',
  modules: [{
    vid: hash(`${++nextId}`),
    mid: hash(`${++nextId}`),
    title: '轮播图',
    maxReferenceCount: -1,
    referenceCount: 0,
    image: undefined,
    configs: [{
      type: 'list',
      field: 'items',
      label: '',
      help: '最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片顺序',
      addable: true,
      configs: [{
        type: 'image',
        field: 'image',
        // 表示内联数据
        inlines: [{
          type: 'text',
          field: 'title',
          label: '标题',
          help: '选填，不超过 4 个字',
        }, {
          type: 'text',
          field: 'link',
          label: '链接',
          // help: '请输入链接', // 自动生成："请输入${label}"
        }],
        label: '图片',
        required: true,
      }],
    }, {
      type: 'object',
      field: 'indicator',
      label: '指示器',
      configs: [{
        type: 'mark',
        field: 'style',
        label: '指示器样式',
        values: [{label: '圆形', value: 'circle'}, {label: '直线', value: 'line'}, {label: '数字', value: 'number'}],
      }, {
        type: 'mark',
        field: 'position',
        label: '指示器位置',
        values: [{label: '居左', value: 'left'}, {label: '居中', value: 'center'}, {label: '居右', value: 'right'}],
      }, {
        type: 'color',
        field: 'color',
        label: '指示器颜色',
      }],
    }, {
      type: 'object',
      field: 'background',
      label: '背景',
      configs: [{
        type: 'bool',
        field: 'enabled',
        label: '是否显示背景色',
      }, {
        type: 'background',
        field: 'value',
        // 背景的不同实现方式，可以在里面添加 image 选项来支持图片
        // 这里只能支持颜色和渐变，
        features: ['color', 'gradient'],
        label: '背景',
      }],
    }],
    theme: {
      height: 200,
      padding: {
        horizontal: 12.0,
      },
      color: 'cyan',
    },
    children: [{
      vid: hash(`${++nextId}`),
      theme: {
        width: '100%',
        height: '100%',
        color: 'white',
        radius: 12.0,
        textAlign: 'center',
      },
      children: '内容',
    }],
  },
  {
    vid: hash(`${++nextId}`),
    mid: hash(`${++nextId}`),
    title: '测试',
    maxReferenceCount: -1,
    referenceCount: 0,
    image: undefined,
    configs: [
      {
        type: 'list',
        field: 'arr',
        label: '列表',
        configs: [
          {
            type: 'text',
            field: 'title',
            label: '文字'
          },
        ]
      },
      {
        type: 'text',
        label: '内容',
        field: 'content',
      }
    ],
    children: {
      theme: {
        border: {
          width: 2,
          style: 'dashed',
          color: 'red'
        },
        margin: 24,
        padding: 12,
      },
      children: {
        type: 'text',
        key: 'content'
      }
    }
  }
],
})

const data = ref<Record<string, Record<string, unknown>>>({
  [blocks.value[0].vid]: {
    textName: '测试 2222',
  },
  [blocks.value[1].vid]: {
    imageKey: 'https://www.w3schools.com/css/paris.jpg',
    linkKey: 'https://docs.taro.zone/canIUse/',
  },
  [blocks.value[2].vid]: {
    audioKey: 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
    title: '啊哈哈',
  },
})
</script>

<template>
  <DddBuilder
    :blocks="blocks"
    :categories="categories"
    :sequence="nextId"
    :sources="data"
  />
</template>

<style scoped>

</style>