活动魔方配置及辅助区域,辅助线配置

main
一杯沧海 12 months ago
parent d4deed140d
commit 965417aab2
  1. 2
      src/engineer/components/ConfigCurrentView.vue
  2. 9
      src/engineer/utils/dynamic.ts
  3. 30
      src/modules/activity-cube.ts
  4. 25
      src/modules/auxiliary-empty.ts
  5. 32
      src/modules/auxiliary-line.ts
  6. 45
      src/modules/diy-title.ts
  7. 95
      src/modules/index.ts
  8. 53
      src/modules/product-column.ts

@ -41,8 +41,10 @@ const label = computed(()=>{
<legend>{{ label }}设置</legend>
<template v-if="styles" v-for="([key, value]) in styles" :key="`${ctx.activeViewId}@${key}`">
<ColorConfig v-if="key === 'color'" :field="value.slice(2)" label="背景颜色" />
<ColorConfig v-if="key === 'textColor'" :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="字号设置" />
<NumberStyle v-if="key === 'height'" :field="value.slice(2)" label="高度设置" />
<!-- <div v-else>{{ key }}:{{ value }}</div>-->
</template>
</fieldset>

@ -1,9 +1,16 @@
import type { DynamicValue } from "../types"
import type { EngineContext } from "../context"
const isNumber = (num: number):boolean => {
return !isNaN(num)
}
export function dynamic<T>(ctx: EngineContext, blockId: string, value: DynamicValue<T>): T {
if (typeof value === 'string' && value.startsWith('@@')) {
return ctx.value(blockId, value) as T
const val = ctx.value(blockId,value)
if(isNumber(val as number)){
return parseFloat(val as string) as T
}
return ctx.value(blockId, value) as T
}
return value as T
}

@ -0,0 +1,30 @@
import type { Module } from '../engineer'
import { createUniqueId } from '../engineer/utils'
const module: Module = {
vid: createUniqueId(),
mid: createUniqueId(),
title: '活动魔方',
configs: [],
init:{
theme:{
color: '#fff',
innerColor: 'pink'
}
},
theme:{
color: '@@theme.color',
padding: 5,
radius: '@@theme.radius'
},
children: {
theme:{
color: '@@theme.innerColor',
radius: '@@theme.radius',
height: 20
},
children:[]
}
}
export default module

@ -0,0 +1,25 @@
import type { Module } from '../engineer'
import { createUniqueId } from '../engineer/utils'
const module:Module = {
mid: createUniqueId(),
vid: createUniqueId(),
title: '辅助空白',
configs:[
],
init:{
theme:{
height: 10,
color: 'white'
}
},
theme:{
height: '@@theme.height',
color: '@@theme.color'
},
children:{
}
}
export default module

@ -0,0 +1,32 @@
import type { Module } from '../engineer'
import { createUniqueId } from '../engineer/utils'
const module: Module = {
vid: createUniqueId(),
mid: createUniqueId(),
title: '辅助线',
configs: [],
init:{
theme:{
innerColor: '#dedede',
height:10,
color: 'white'
}
},
theme:{
height: '@@theme.height',
flexible: true,
mainAlign:'center',
crossAlign: 'center',
textColor: '@@theme.innerColor',
color: '@@theme.color'
},
children:{
theme:{
width: 345,
height: 0.8,
color: '@@theme.innerColor'
}
}
}
export default module

@ -0,0 +1,45 @@
import { createUniqueId } from '../engineer/utils'
import { Module } from '../engineer'
const module: Module = {
title: '自定义标题',
vid: createUniqueId(),
mid: createUniqueId(),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
configs: [
{
type: 'text',
field: 'Title',
label: '标题',
help: '自定义标题', // 自动生成:"请输入${label}"
},
],
init: {
Title: '猜你喜欢',
theme:{
color: '#fff',
textColor: '#333'
}
},
theme: {
padding: {
vertical: 15,
horizontal: 15,
},
color: '@@theme.color',
textColor: '@@theme.textColor',
fontSize: 18,
fontWeight: 900,
},
children: {
type: 'text',
key: 'Title'
}
}
export default module

@ -5,6 +5,11 @@ import { createUniqueId } from '../engineer/utils'
import { Category } from '../engineer'
import categoryBar from './category-bar.ts'
import searchCube from './search-cube.ts'
import productColumn from './product-column.ts'
import diyTitle from './diy-title.ts'
import auxiliaryEmpty from './auxiliary-empty.ts'
import auxiliaryLine from './auxiliary-line.ts'
import activityCube from './activity-cube.ts'
export default {
icon: 'trash',
@ -13,99 +18,35 @@ export default {
swiper,
productGroup,
categoryBar,
productColumn,
diyTitle,
searchCube,
imageCube,
auxiliaryEmpty,
auxiliaryLine,
activityCube,
{
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: '自定义标题',
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: 'white',
textColor: '#333'
},
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',
color: '@@theme.color',
gap: 15,
fontSize:14,
fontWeight: 400,
padding:10,
textColor: '@@theme.textColor'
},
children:[
{children:'产品分类',theme:{fontWeight:600}},
@ -115,7 +56,5 @@ export default {
{children:'产品分类'},
],
}
],
} as Category

@ -0,0 +1,53 @@
import { createUniqueId } from '../engineer/utils'
import { Module } from '../engineer'
const module: Module = {
title: '两列产品卡片',
vid: createUniqueId(),
mid: createUniqueId(),
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
configs: [],
init: {
theme:{
color: 'pink',
innerRadius: 12
}
},
theme: {
color: '@@theme.color',
padding: {
top: 12.5,
left: 12.5,
right: 12.5
},
gap: 10,
},
children: [
{
vid: createUniqueId(),
theme: {
width: 170,
height: 200,
color: 'white',
radius: '@@theme.innerRadius',
clip: 'hidden'
},
children: '产品'
},
{
vid: createUniqueId(),
theme: {
width: 170,
height: 200,
color: 'white',
radius: '@@theme.innerRadius',
clip: 'hidden'
},
children: '产品'
}
]
}
export default module
Loading…
Cancel
Save