|
|
|
|
@ -1,130 +1,110 @@ |
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
<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', |
|
|
|
|
}, |
|
|
|
|
const blocks = ref<Block[]>([{ |
|
|
|
|
vid: hash(`${++nextId}`), |
|
|
|
|
mid: '', |
|
|
|
|
theme: { |
|
|
|
|
radius: 24, |
|
|
|
|
color: 'yellow', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
vid: hash(`${++nextId}`), |
|
|
|
|
mid: '', |
|
|
|
|
theme: { |
|
|
|
|
color: 'pink', |
|
|
|
|
margin: 12, |
|
|
|
|
flexible: true, |
|
|
|
|
}, |
|
|
|
|
children: { |
|
|
|
|
type: 'image', |
|
|
|
|
key: 'imageKey', |
|
|
|
|
link: 'linkKey', |
|
|
|
|
radius: 24, |
|
|
|
|
}, |
|
|
|
|
children: { |
|
|
|
|
type: 'text', |
|
|
|
|
key: 'textName', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
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: { |
|
|
|
|
color: 'pink', |
|
|
|
|
margin: 12, |
|
|
|
|
flexible: true, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
vid: hash(`${++nextId}`), |
|
|
|
|
mid: '', |
|
|
|
|
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: { |
|
|
|
|
radius: 24, |
|
|
|
|
color: 'teal', |
|
|
|
|
flexible: true, |
|
|
|
|
gap: 12, |
|
|
|
|
crossAlign: 'center', |
|
|
|
|
}, |
|
|
|
|
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, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
children: [{ |
|
|
|
|
theme: { |
|
|
|
|
padding: 12, |
|
|
|
|
margin: 12, |
|
|
|
|
grow: 1, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
...Array.from(Array.from({ length: 3 })).map<Block>((_, i) => ({ |
|
|
|
|
vid: hash(`${++nextId}`), |
|
|
|
|
mid: '', |
|
|
|
|
children: [ |
|
|
|
|
{ |
|
|
|
|
children: { |
|
|
|
|
vid: hash(`${++nextId}`), |
|
|
|
|
theme: { |
|
|
|
|
fontSize: 22, |
|
|
|
|
fontSize: 32, |
|
|
|
|
}, |
|
|
|
|
children: `测试${i}`, |
|
|
|
|
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 => ({ |
|
|
|
|
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) => ({ |
|
|
|
|
modules: Array.from(Array.from({length: 102})).map<Module>((_, i) => ({ |
|
|
|
|
vid: hash(`${++nextId}`), |
|
|
|
|
mid: hash(`${++nextId}`), |
|
|
|
|
title: `${c.text}${i + 1}`, |
|
|
|
|
@ -132,139 +112,107 @@ const categories = ref([ |
|
|
|
|
referenceCount: 0, |
|
|
|
|
image: undefined, |
|
|
|
|
configs: [], |
|
|
|
|
children: [ |
|
|
|
|
{ |
|
|
|
|
vid: hash(`${++nextId}`), |
|
|
|
|
theme: { |
|
|
|
|
height: 68, |
|
|
|
|
width: 375, |
|
|
|
|
border: { color: '#eee' }, |
|
|
|
|
}, |
|
|
|
|
children: [ |
|
|
|
|
String(`${c.text}${i + 1}`), |
|
|
|
|
], |
|
|
|
|
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: [ |
|
|
|
|
{ |
|
|
|
|
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}`), |
|
|
|
|
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', |
|
|
|
|
width: '100%', |
|
|
|
|
height: '100%', |
|
|
|
|
color: 'white', |
|
|
|
|
radius: 12.0, |
|
|
|
|
textAlign: 'center', |
|
|
|
|
}, |
|
|
|
|
children: [ |
|
|
|
|
{ |
|
|
|
|
vid: hash(`${++nextId}`), |
|
|
|
|
theme: { |
|
|
|
|
width: '100%', |
|
|
|
|
height: '100%', |
|
|
|
|
color: 'white', |
|
|
|
|
radius: 12.0, |
|
|
|
|
textAlign: 'center', |
|
|
|
|
}, |
|
|
|
|
children: '内容', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
children: '内容', |
|
|
|
|
}], |
|
|
|
|
}], |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const data = ref<Record<string, Record<string, unknown>>>({ |
|
|
|
|
@ -284,8 +232,8 @@ const data = ref<Record<string, Record<string, unknown>>>({ |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<DddBuilder |
|
|
|
|
:categories="categories" |
|
|
|
|
:blocks="blocks" |
|
|
|
|
:categories="categories" |
|
|
|
|
:sequence="nextId" |
|
|
|
|
:sources="data" |
|
|
|
|
/> |
|
|
|
|
|
zestack
1 year ago
