Compare commits

..

2 Commits

  1. 565
      src/App.vue
  2. 7
      src/engineer/components/ConfigCurrentView.vue
  3. 3
      src/engineer/configs/ListConfig.vue
  4. 2
      src/engineer/configs/TextConfig.vue
  5. 17
      src/engineer/types.ts
  6. 6
      src/engineer/utils/hash.ts
  7. 2
      src/engineer/utils/index.ts
  8. 7
      src/engineer/utils/unit.ts
  9. 106
      src/modules/category-bar.ts
  10. 232
      src/modules/image-cube.ts
  11. 121
      src/modules/index.ts
  12. 235
      src/modules/prduct-group.ts
  13. 87
      src/modules/search-cube.ts
  14. 194
      src/modules/swiper.ts

@ -1,7 +1,8 @@
<script lang="ts" setup>
import { ref } from 'vue'
import type { Block, Module } from './engineer'
import { Block, Module } from './engineer'
import DddBuilder, { hash } from './engineer'
import modules from './modules'
let nextId = Date.now()
@ -107,7 +108,10 @@ const blocks = ref<Block[]>([
])
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) => ({
vid: hash(`${++nextId}`),
@ -129,562 +133,9 @@ const categories = ref([{ icon: 'trash', text: '媒体' }, { icon: 'trash', text
})),
})))
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',
label: '图片',
required: true,
//
inlines: [{
type: 'text',
field: 'title',
label: '标题',
help: '选填,不超过 4 个字',
}, {
type: 'text',
field: 'link',
label: '链接',
help: '请输入链接', // "${label}"
}],
}],
},
{
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: 'start' },
{ label: '居中', value: 'center' },
{ label: '居右', value: 'end' },
],
},
{
type: 'color',
field: 'color',
label: '指示器颜色',
}],
},
{
type: 'object',
field: 'background',
label: '背景',
configs: [{
type: 'boolean',
field: 'enabled',
label: '是否显示背景色',
}, {
type: 'background',
field: 'value',
// image
//
features: ['color', 'gradient'],
label: '背景',
}],
}
],
init: {
items: [
{
image: '',
title: '123',
link: '123',
}
],
indicator: {
style: '#circle',
color: 'green',
position: 'start',
},
background: {
enabled: true,
value: "#ffffff",
},
theme: {
color: 'white',
radius: 24
}
},
templates: {
'#circle': {
theme: {
gap: 20,
},
children: {
type: 'each',
key: 'items',
handle: {
theme: {
width: 20,
height: 20,
radius: 10,
color: '@@indicator.color',
},
}
}
},
'#line': {
theme: {
gap: 20,
},
children: {
type: 'each',
key: 'items',
handle: {
theme: {
width: 40,
height: 20,
color: '@@indicator.color',
},
}
}
},
"#number": {
theme: {
color: 'rgba(0,0,0,0.4)',
textColor: '#fff'
},
children: '1/len(items)'
}
},
theme: {
position: 'relative',
height: 200,
padding: {
horizontal: 12.0,
vertical: 12,
},
color: 'cyan',
},
children: [
{
vid: hash(`${++nextId}`),
theme: {
width: '100%',
height: '100%',
color: '@@theme.color',
radius: "@@theme.radius",
textAlign: 'center',
},
children: '设置轮播图',
},
{
theme: {
position: 'absolute',
flexible: true,
mainAlign: '@@indicator.position',
bottom: 20,
left: 20,
right: 20,
height: 20,
color: 'red',
},
children: {
type: 'template',
key: 'indicator.style'
}
}],
},
{
title: '产品组',
vid: hash(`${++nextId}`),
mid: hash(`${++nextId}`),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
configs: [
{
type: 'object',
field: 'titleAndDesc',
label: '产品标题及说明',
configs: [
{
type: 'text',
label: '产品标题',
field: 'mainTitle'
},
{
type: 'text',
label: '说明',
field: 'content',
},
{
type: 'text',
label: '提示',
field: 'more',
},
]
},
{
help: '帮助',
addable: true,
type: 'list',
field: 'groups',
label: '产品组列表',
configs: [
{
type: 'image',
label: '产品图片',
field: 'productPhoto',
//
inlines: [{
type: 'text',
field: 'link',
label: '链接',
help: '请输入链接', // "${label}"
},
{
type: 'text',
label: '自定义标题',
field: 'productTitle',
},
{
type: 'text',
label: '自定义说明',
field: 'productDesc',
},
]
},
]
},
],
init: {
titleAndDesc: {
mainTitle: '标题123',
content: '说明123',
more: '查看更多',
},
groups: [
{
productTitle: '111',
}
],
theme: {
color: 'blue',
},
children:{
theme: {
radius: 12
},
}
},
theme: {
height: 200,
padding: 12,
color: '@@theme.color',
},
children: {
vid: hash(`${++nextId}`),
theme: {
width: '100%',
height: '100%',
color: 'white',
clip: 'hidden',
radius: '@@children.theme.radius',
textAlign: 'center',
},
children: [
{
theme: {
flexible: true,
gap: 12,
crossAlign: 'center',
},
children: [
{
theme: {
padding: {
horizontal: 5
},
},
children: [
{
theme: {
flexible: true,
gap: 5,
crossAlign: 'center',
},
children: [
{
theme: {
fontSize: 16,
},
children: {
type: 'text',
key: 'titleAndDesc.mainTitle'
},
},
{
theme: {
fontSize: 16,
},
children: {
type: 'text',
key: 'titleAndDesc.content'
},
}
]
},
]
},
{
theme: {
grow: 1,
}
},
{
vid: hash(`${++nextId}`),
theme: {
width: 'auto',
margin: {
horizontal: 5,
},
fontSize: 12,
padding: {
vertical: 1,
horizontal: 5,
},
color: '@@children.children.children.children.children.2.color',
textColor: '#fff',
radius: 16,
},
children: {
type: 'text',
key: 'titleAndDesc.more'
},
},
categories.value.unshift(modules)
],
},
{
vid: hash(`${++nextId}`),
theme: {
width: "94%",
height: "70%",
color: 'pink',
radius: 12.0,
margin: {
top: '1%',
left: '3%',
right: '3%',
bottom: '2%',
},
padding: {
horizontal: 3,
},
gap: 3,
clip: 'autoX',
},
children:
{
type: 'each',
key: 'groups',
handle: {
theme: {
width: '100px',
height: '100%',
radius: 10,
color: '#fff',
},
}
},
// [{
// theme: {
// width: '35%',
// height: '100%',
// mainAlign: "center",
// color: '#fff',
// crossAlign: "center"
//
// },
// children: { }
// },
// ]
},
]
}
},
{
title: '产品分类',
vid: hash(`${++nextId}`),
mid: hash(`${++nextId}`),
maxReferenceCount: -1,
referenceCount:0,
image:undefined,
configs:[
{
help: '帮助',
addable: true,
type: 'list',
field: 'items',
label: '产品分类列表',
configs: [
{
type: 'image',
label: '分类图片',
field: 'itemImage',
//
inlines: [{
type: 'text',
field: 'link',
label: '链接',
help: '请输入链接', // "${label}"
},
{
type: 'text',
label: '自定义标题',
field: 'title',
},
]
},
]
},
],
init:{
theme: {
color: '#fff',
},
items:[
{
title: '标题',
link: 'link'
}
]
},
theme:{
padding: 12,
color: '@@theme.color',
},
children:{
theme:{
width: '100%',
clip: 'autoX',
whiteSpace: 'nowrap',
},
children:{
type: 'each',
key: 'items',
handle: {
theme:{
width: '60px',
height: '60px',
display: 'inline-block',
radius: 40,
color: 'pink',
textColor: '#fff',
margin: {
right: 10
},
},
children:'图片',
}
},
}
},
{
title: '两列产品卡片',
vid: hash(`${++nextId}`),
mid: hash(`${++nextId}`),
maxReferenceCount: -1,
referenceCount:0,
image:undefined,
configs:[],
init:{},
theme:{
color: 'pink',
padding:{
top: 12.5,
left:12.5,
right: 12.5
},
gap:10,
},
children:[
{
theme:{
width: 170,
height:200,
color: 'white'
},
children: '产品'
},
{
theme:{
width: 170,
height:200,
color: 'white'
},
children: '产品'
}
]
},
{
title: '自定义标题',
vid: hash( `${++nextId}`),
mid: hash( `${++nextId}`),
maxReferenceCount: -1,
referenceCount:0,
image: undefined,
configs:[
{
type: 'text',
field: 'Title',
label: '标题',
help: '自定义标题', // "${label}"
},
],
init: {
Title:'猜你喜欢',
},
theme:{
padding:{
vertical: 15,
horizontal: 15,
},
color: '#fff',
textColor: '#333',
fontSize: '@@theme.fontSize',
fontWeight: 900,
},
children:{
type: 'text',
key: 'Title'
}
}
],
})
const data = ref<Record<string, Record<string, unknown>>>({
// [blocks.value[0].vid]: {
@ -703,7 +154,7 @@ const data = ref<Record<string, Record<string, unknown>>>({
</script>
<template>
<DddBuilder :blocks="blocks" :categories="categories" :sequence="nextId" :sources="data" />
<DddBuilder :blocks="blocks" :categories="categories" :sequence="nextId" :sources="data"/>
</template>
<style lang="less" scoped></style>

@ -32,14 +32,17 @@ const label = computed(()=>{
</script>
<template>
{{ ctx.activeViewId }}
{{ ctx.activeBlockId }}<br>
{{ ctx.activeViewId }}<br>
{{styles}}
<hr/>
<fieldset>
<legend>{{ label }}设置</legend>
<template v-for="([key, value]) in styles" :key="key">
<template v-if="styles" v-for="([key, value]) in styles" :key="`${ctx.activeViewId}@${key}`">
<ColorConfig v-if="key === 'color'" :field="value.slice(2)" label="背景颜色" />
<NumberStyle v-if="key === 'radius'" :field="value.slice(2)" label="圆角设置" />
<NumberStyle v-if="key === 'fontSize'" :field="value.slice(2)" label="字号设置" />
<!-- <div v-else>{{ key }}:{{ value }}</div>-->
</template>
</fieldset>

@ -14,6 +14,7 @@ const props = defineProps<{
help?: string
required?: boolean
configs: ModuleConfig[]
addable?: boolean
}>()
// const ctx = useContext()
@ -53,7 +54,7 @@ const minus = () => {
</div>
</div>
<div>
<div v-if="props.addable">
<button @click="add">+增加</button>
<button v-if="list!.length >= 2 " @click="minus">-减少</button>
</div>

@ -17,7 +17,7 @@ const data = useSource<string>(props.field)
</script>
<template>
<div style="display: flex;justify-content: space-between">
<div >
<label>
<span>{{ label }}</span>
<span v-if="required">*</span>

@ -142,7 +142,7 @@ export type TextAlign =
*/
export type Axis = 'x' | 'y'
export type Attach<Data,Append> = {
export type Attach<Data, Append> = {
[p in keyof Data]: Data[p] | Append
}
@ -157,7 +157,7 @@ export interface Textual {
/** 字体大小 */
fontSize?: number
/** 字体粗细 */
fontWeight?: 400|500|600|700|800|900
fontWeight?: 400 | 500 | 600 | 700 | 800 | 900
/** 文本方向 */
textAlign?: TextAlign
/** 行高,行高比较特殊,需要转换单位 */
@ -217,7 +217,7 @@ export interface Decoration {
*
*/
export interface BoxBlock {
display?: 'block' | 'inline-block'
display?: 'block' | 'inline-block' | 'flex'
whiteSpace?: 'nowrap' | 'pre'
}
@ -236,7 +236,6 @@ export interface Spatial {
}
/**
*
*
@ -294,7 +293,7 @@ export type ClipBehavior =
*
*
*/
export interface Theme extends Textual, Flexible,BoxBlock, Boxed, Decoration, Spatial, Flexible, Stacked {
export interface Theme extends Textual, Flexible, BoxBlock, Boxed, Decoration, Spatial, Flexible, Stacked {
/**
*
*
@ -419,10 +418,10 @@ export interface View {
// theme?: Theme | Widget
theme?: DynamicTheme
title?: string
/**
*
*/
source?: string
// /**
// * 关联数据源
// */
// source?: string
/** 子视图 */
children?: ViewChildren
}

@ -15,3 +15,9 @@ export function hash(str: string): string {
// Convert to 8 digit hex string
return (`0000000${(hval >>> 0).toString(16)}`).slice(-8)
}
let nextId = Date.now()
export function createUniqueId() {
return hash(`${++nextId}`)
}

@ -13,4 +13,4 @@ export * from './shadow'
export * from './size'
export * from './stack'
export * from './unit'
export {dynamic} from "./dynamic.ts";
export * from "./dynamic";

@ -3,13 +3,6 @@ export function unit(n: number | undefined | string) {
return undefined
}
if (typeof n !== 'number') {
if(n.split('@@')[1]){
if(Number.isInteger(n.split('@@')[1])){
return `${n.split('@@')[1]}px`
}
return n.split('@@')[1]
}
return n
}
return `${n}px`

@ -0,0 +1,106 @@
import { Module } from '../engineer'
import { createUniqueId } from '../engineer/utils'
const module:Module = {
title: '导航条',
vid: createUniqueId(),
mid: createUniqueId(),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
configs: [
{
help: '帮助',
addable: true,
type: 'list',
field: 'items',
label: '导航条',
configs: [
{
type: 'image',
label: '分类图片',
field: 'itemImage',
// 表示内联数据
inlines: [{
type: 'text',
field: 'link',
label: '链接',
help: '请输入链接', // 自动生成:"请输入${label}"
},
{
type: 'text',
label: '自定义标题',
field: 'title',
},
]
},
]
},
],
init: {
theme: {
color: '#fff',
},
items: [
{
title: '标题',
link: 'link'
}
]
},
theme: {
padding: 12,
color: '@@theme.color',
},
children: {
theme: {
width: '100%',
clip: 'autoX',
whiteSpace: 'nowrap',
flexible: true,
crossAlign:'start'
},
children: {
type: 'each',
key: 'items',
handle: {
theme: {
width: 60,
height: 80,
display: 'inline-block',
margin: {
right: 10
},
},
children:[
{
theme:{
width:60,
height:60,
radius: 30,
color: 'pink',
clip: 'hidden'
},
children:'图片'
},
{
theme:{
width:60,
height:20,
textAlign:'center',
fontSize: 12,
whiteSpace: 'nowrap',
clip: 'hidden'
},
children:{
type: 'text',
key:'.title'
}
}
],
}
},
}
}
export default module

@ -0,0 +1,232 @@
import { createUniqueId } from '../engineer/utils'
import type { Module } from '../engineer'
const module: Module = {
title: '图片魔方',
vid: createUniqueId(),
mid: createUniqueId(),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
init: {
setting:{
style: '#two'
},
items:[
{image:''},
{image:''},
{image:''},
{image:''},
]
},
templates:{
'#one':{
theme: {
color: 'white',
padding: 5,
width: '100%',
height: 375,
flexible: true,
mainAlign: 'center',
crossAlign: 'center',
},
children: {
type: 'text',
key: 'items.0.link'
}
},
'#two':{
theme: {
color: 'white',
padding: 5,
width: '100%',
height: 200,
flexible: true,
mainAlign: 'between',
crossAlign: 'center',
},
children: [{
theme:{width:'49%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',},
children: { type: 'text', key: 'items.0.link' }
},{
children: {
type: 'text',
key: 'items.1.link'
},
theme:{width:'49%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',}
}]
},
'#four':{
theme: {
color: 'white',
padding: 5,
width: '100%',
height: 375,
flexible: true,
mainAlign: 'between',
crossAlign: 'center',
},
children: [{
theme:{width:'49%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',height:'100%'},
children: { type: 'text', key: 'items.0.link' }
},{
children: [
{
theme:{width:'100%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',height:'49%'},
children: { type: 'text', key: 'items.1.link' }
},
{
theme:{width:'100%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',height:'49%'},
children: { type: 'text', key: 'items.2.link' }
},
],
theme:{width:'49%',flexible:true,
mainAlign: 'between',axis:"y",
height:'100%'}
}]
},
'#three':{
theme: {
color: 'white',
padding: 5,
width: '100%',
height: 200,
flexible: true,
mainAlign: 'between',
crossAlign: 'center',
},
children: [{
theme:{width:'32%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',height:'100%'},
children: { type: 'text', key: 'items.0.link' }
},
{theme:{width:'32%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',height:'100%'},
children: { type: 'text', key: 'items.1.link' }},
{theme:{width:'32%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',height:'100%'},
children: { type: 'text', key: 'items.2.link' }},
]
},
'#five':{
theme: {
color: 'white',
padding: 5,
width: '100%',
height: 375,
flexible: true,
mainAlign: 'between',
crossAlign: 'center',
},
children: [
{
theme:{width:'49%',flexible:true,
mainAlign: 'between',axis:"y",
height:'100%'},
children: [
{
theme:{width:'100%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',height:'49%'},
children: { type: 'text', key: 'items.1.link' }
},
{
theme:{width:'100%',flexible: true,
mainAlign: 'center',
crossAlign: 'center',height:'49%'},
children: { type: 'text', key: 'items.2.link' }
},
],
},
{
theme: {
width: '49%', flexible: true,
mainAlign: 'between', axis: "y",
height: '100%'
},
children: [
{
theme: {
width: '100%', flexible: true,
mainAlign: 'center',
crossAlign: 'center', height: '49%'
},
children: { type: 'text', key: 'items.1.link' }
},
{
theme: {
width: '100%', flexible: true,
mainAlign: 'center',
crossAlign: 'center', height: '49%'
},
children: { type: 'text', key: 'items.2.link' }
},
],
},
]
},
},
configs:[
{
type: 'object',
field: 'setting',
label: '图片魔方样式选择',
configs: [{
type: 'mark',
field: 'style',
label: '',
values: [
{ label: '口', value: '#one' },
{ label: '口口', value: '#two' },
{ label: '口口口', value: '#three' },
{ label: '口日', value: '#four' },
{ label: '田', value: '#five' },
],
}]
},
{
addable: false,
type: 'list',
field: 'items',
label: '图片',
configs: [
{
type: 'image',
label: '产品图片',
field: 'image',
// 表示内联数据
inlines: [{
type: 'text',
field: 'link',
label: '链接',
help: '请输入链接', // 自动生成:"请输入${label}"
}]
},
]
},
],
theme:{
padding:5,
color:'white',
height: 375
},
children: {
type: 'template',
key: 'setting.style'
},
}
export default module

@ -0,0 +1,121 @@
import productGroup from "./prduct-group"
import imageCube from './image-cube.ts'
import swiper from './swiper.ts'
import { createUniqueId } from '../engineer/utils'
import { Category } from '../engineer'
import categoryBar from './category-bar.ts'
import searchCube from './search-cube.ts'
export default {
icon: 'trash',
text: '基础',
modules: [
swiper,
productGroup,
categoryBar,
{
title: '两列产品卡片',
vid: createUniqueId(),
mid: createUniqueId(),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
configs: [],
init: {},
theme: {
color: 'pink',
padding: {
top: 12.5,
left: 12.5,
right: 12.5
},
gap: 10,
},
children: [
{
theme: {
width: 170,
height: 200,
color: 'white'
},
children: '产品'
},
{
theme: {
width: 170,
height: 200,
color: 'white'
},
children: '产品'
}
]
},
{
title: '自定义标题',
vid: createUniqueId(),
mid: createUniqueId(),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
configs: [
{
type: 'text',
field: 'Title',
label: '标题',
help: '自定义标题', // 自动生成:"请输入${label}"
},
],
init: {
Title: '猜你喜欢',
theme:{
fontSize: 18,
color: '#fff'
}
},
theme: {
padding: {
vertical: 15,
horizontal: 15,
},
color: '@@theme.color',
textColor: '#333',
fontSize: '@@theme.fontSize',
fontWeight: 900,
},
children: {
type: 'text',
key: 'Title'
}
},
searchCube,
imageCube,
{
title: '商品分类',
vid: createUniqueId(),
mid: createUniqueId(),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
init: {},
templates:{},
configs:[],
theme:{
color: 'white',
gap: 15,
fontSize:14,
fontWeight: 400,
padding:10,
},
children:[
{children:'产品分类',theme:{fontWeight:600}},
{children:'产品分类'},
{children:'产品分类'},
{children:'产品分类'},
{children:'产品分类'},
],
}
],
} as Category

@ -0,0 +1,235 @@
import { createUniqueId } from '../engineer/utils'
import type { Module } from '../engineer'
const module: Module = {
title: '产品组',
vid: createUniqueId(),
mid: createUniqueId(),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
configs: [
{
type: 'object',
field: 'titleAndDesc',
label: '产品标题及说明',
configs: [
{
type: 'text',
label: '产品标题',
field: 'mainTitle'
},
{
type: 'text',
label: '说明',
field: 'content',
},
{
type: 'text',
label: '提示',
field: 'more',
},
]
},
{
help: '帮助',
addable: true,
type: 'list',
field: 'groups',
label: '产品组列表',
configs: [
{
type: 'image',
label: '产品图片',
field: 'image',
// 表示内联数据
inlines: [{
type: 'text',
field: 'link',
label: '链接',
help: '请输入链接', // 自动生成:"请输入${label}"
},
{
type: 'text',
label: '自定义标题',
field: 'title',
},
]
},
]
},
],
init: {
titleAndDesc: {
mainTitle: '标题',
content: '子标题',
more: '查看更多',
},
groups: [
{
title: '产品',
}
],
theme: {
color: 'pink',
moreColor: "#5d35b0",
innerColor: 'white',
innerRadius: 12,
productBg: 'pink',
}
},
theme: {
// height: 200,
padding: 10,
color: '@@theme.color',
},
children: {
vid: createUniqueId(),
theme: {
width: '100%',
height: '100%',
color: '@@theme.innerColor',
clip: 'hidden',
radius: '@@theme.innerRadius',
textAlign: 'center',
},
children: [
{
theme: {
flexible: true,
gap: 12,
crossAlign: 'center',
},
children: [
{
theme: {
padding: {
horizontal: 5
},
},
children: [
{
theme: {
flexible: true,
gap: 5,
crossAlign: 'center',
},
children: [
{
theme: {
fontSize: 16,
},
children: {
type: 'text',
key: 'titleAndDesc.mainTitle'
},
},
{
theme: {
fontSize: 16,
},
children: {
type: 'text',
key: 'titleAndDesc.content'
},
}
]
},
]
},
{
theme: {
grow: 1,
}
},
{
vid: createUniqueId(),
theme: {
width: 'auto',
margin: {
horizontal: 5,
},
fontSize: 12,
padding: {
vertical: 1,
horizontal: 5,
},
color: '@@theme.moreColor',
textColor: '#fff',
radius: 16,
},
children: {
type: 'text',
key: 'titleAndDesc.more'
},
},
],
},
{
vid: createUniqueId(),
theme: {
width: "94%",
height: "70%",
color: '@@theme.productBg',
radius: 12.0,
flexible: true,
gap: 12,
margin: {
top: '1%',
left: '3%',
right: '3%',
bottom: '2%',
},
padding: 2,
clip: 'autoX',
textAlign: 'left',
},
children: {
type: 'each',
key: "groups",
handle: {
theme: {
width: 100,
height: '100%',
radius: 10,
color: 'white',
},
children: [
{
theme: {
width: 100,
height: 100,
border: {
color: "@@theme.color",
width: 1,
},
},
children: {
type: 'image',
key: ".image"
},
},
{
theme: {
textColor: "#333333",
fontSize: 15,
textAlign: 'center',
clip: 'hidden',
whiteSpace: 'nowrap'
},
children: {
type: "text",
key: ".title"
},
}
]
},
}
},
]
}
}
export default module

@ -0,0 +1,87 @@
import type { Module } from '../engineer'
import { createUniqueId } from '../engineer/utils'
const module:Module = {
title: '搜索框',
vid: createUniqueId(),
mid: createUniqueId(),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
configs: [
{
type: 'object',
field: 'search',
label: '搜索框',
configs: [
{
required: true,
type: 'text',
label: '搜索框内容',
field: 'innerText'
},
{
type: 'boolean',
field: 'showLogo',
label: '是否展示左侧logo',
}, {
type: 'image',
field: 'logoImg',
label: '左侧logo',
}
]
},
],
init: {
search:{
innerText:'猜你喜欢'
}
},
templates: {
'true': {
theme: {},
children: 'logo'
},
'false': {
theme: {},
children: ''
}
},
theme: {
display: 'flex',
crossAlign: 'center',
padding: {
horizontal: 15,
vertical: 8,
},
color: 'cyan'
},
children: [
{
children: {
type: 'template',
key: 'search.showLogo'
},
},
{
theme: { width: 10 },
},
{
theme: {
width: '60%',
color: 'white',
radius: 30.0,
padding: {
horizontal: 10,
vertical: 5,
},
fontSize: 14,
},
children: {
type: 'text',
key: 'search.innerText'
}
}
]
}
export default module

@ -0,0 +1,194 @@
import type { Module } from '../engineer'
import { createUniqueId } from '../engineer/utils'
const module:Module = {
vid: createUniqueId(),
mid: createUniqueId(),
title: '轮播图',
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
configs: [
{
type: 'list',
field: 'items',
label: '轮播图设置',
help: '最多可添加10张图片,建议宽度750px;鼠标拖拽左侧圆点可调整图片顺序',
addable: true,
configs: [{
type: 'image',
field: 'image',
label: '图片',
required: true,
// 表示内联数据
inlines: [{
type: 'text',
field: 'title',
label: '标题',
help: '选填,不超过 4 个字',
}, {
type: 'text',
field: 'link',
label: '链接',
help: '请输入链接', // 自动生成:"请输入${label}"
}],
}],
},
{
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: 'start' },
{ label: '居中', value: 'center' },
{ label: '居右', value: 'end' },
],
},
{
type: 'color',
field: 'color',
label: '指示器颜色',
}],
},
{
type: 'object',
field: 'background',
label: '背景',
configs: [{
type: 'boolean',
field: 'enabled',
label: '是否显示背景色',
}, {
type: 'background',
field: 'value',
// 背景的不同实现方式,可以在里面添加 image 选项来支持图片
// 这里只能支持颜色和渐变,
features: ['color', 'gradient'],
label: '背景',
}],
}
],
init: {
items: [
{
image: '',
title: '123',
link: '123',
}
],
indicator: {
style: '#circle',
color: 'green',
position: 'start',
},
background: {
enabled: true,
value: "#ffffff",
},
theme: {
color: 'white',
radius: 24
}
},
templates: {
'#circle': {
theme: {
gap: 1,
},
children: {
type: 'each',
key: 'items',
handle: {
theme: {
width: 5,
height: 5,
radius: 2.5,
color: '@@indicator.color',
},
}
}
},
'#line': {
theme: {
gap: 1,
},
children: {
type: 'each',
key: 'items',
handle: {
theme: {
width: 5,
height: 2,
color: '@@indicator.color',
},
}
}
},
"#number": {
theme: {
color: 'rgba(0,0,0,0.4)',
textColor: '#fff',
radius:10,
padding:{
left:10,
right:10
},
flexible:true,
mainAlign:'center',
crossAlign: 'center'
},
children: '1/0'
}
},
theme: {
position: 'relative',
height: 200,
padding: {
horizontal: 12.0,
vertical: 12,
},
color: 'cyan',
},
children: [
{
vid: createUniqueId(),
theme: {
width: '100%',
height: '100%',
color: '@@theme.color',
radius: "@@theme.radius",
textAlign: 'center',
},
children: '设置轮播图',
},
{
theme: {
position: 'absolute',
flexible: true,
mainAlign: '@@indicator.position',
bottom: 20,
left: 30,
right: 30,
height: 20,
},
children: {
type: 'template',
key: 'indicator.style'
}
}],
}
export default module
Loading…
Cancel
Save