hupeh
/
data-driven-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图片魔方配置

Browse Source
main
一杯沧海 12 months ago
parent 6f5f4d3023
commit 3bedd88768
10 changed files with 942 additions and 571 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 565
      src/App.vue
  2. 6
      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. 232
      src/modules/image-cube.ts
  9. 446
      src/modules/index.ts
  10. 234
      src/modules/prduct-group.ts

565
src/App.vue
Unescape View File

@ -1,7 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import type { Block, Module } from './engineer' import { Block, Module } from './engineer'
import DddBuilder, { hash } from './engineer' import DddBuilder, { hash } from './engineer'
import modules from './modules'
let nextId = Date.now() 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, ...c,
modules: Array.from(Array.from({ length: 102 })).map<Module>((_, i) => ({ modules: Array.from(Array.from({ length: 102 })).map<Module>((_, i) => ({
vid: hash(`${++nextId}`), vid: hash(`${++nextId}`),
@ -129,562 +133,9 @@ const categories = ref([{ icon: 'trash', text: '媒体' }, { icon: 'trash', text
})), })),
}))) })))
categories.value.unshift({ categories.value.unshift(modules)
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'
},
},
],
},
{
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>>>({ const data = ref<Record<string, Record<string, unknown>>>({
// [blocks.value[0].vid]: { // [blocks.value[0].vid]: {
@ -703,7 +154,7 @@ const data = ref<Record<string, Record<string, unknown>>>({
</script> </script>
<template> <template>
<DddBuilder :blocks="blocks" :categories="categories" :sequence="nextId" :sources="data" /> <DddBuilder :blocks="blocks" :categories="categories" :sequence="nextId" :sources="data"/>
</template> </template>
<style lang="less" scoped></style> <style lang="less" scoped></style>

6
src/engineer/components/ConfigCurrentView.vue
Unescape View File

@ -32,12 +32,14 @@ const label = computed(()=>{
</script> </script>
<template> <template>
{{ ctx.activeViewId }} {{ ctx.activeBlockId }}<br>
{{ ctx.activeViewId }}<br>
{{styles}}
<hr/> <hr/>
<fieldset> <fieldset>
<legend>{{ label }}设置</legend> <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="背景颜色" /> <ColorConfig v-if="key === 'color'" :field="value.slice(2)" label="背景颜色" />
<NumberStyle v-if="key === 'radius'" :field="value.slice(2)" label="圆角设置" /> <NumberStyle v-if="key === 'radius'" :field="value.slice(2)" label="圆角设置" />
<!-- <div v-else>{{ key }}:{{ value }}</div>--> <!-- <div v-else>{{ key }}:{{ value }}</div>-->

3
src/engineer/configs/ListConfig.vue
Unescape View File

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

2
src/engineer/configs/TextConfig.vue
Unescape View File

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

17
src/engineer/types.ts
Unescape View File

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

6
src/engineer/utils/hash.ts
Unescape View File

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

2
src/engineer/utils/index.ts
Unescape View File

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

232
src/modules/image-cube.ts
Unescape View File

@ -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

446
src/modules/index.ts
Unescape View File

@ -0,0 +1,446 @@
import productGroup from "./prduct-group"
import imageCube from './image-cube.ts'
import { createUniqueId } from '../engineer/utils'
import { Category } from '../engineer'
export default {
icon: 'trash',
text: '基础',
modules: [
{
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: 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: 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: 20,
right: 20,
height: 20,
color: 'red',
},
children: {
type: 'template',
key: 'indicator.style'
}
}],
},
productGroup,
{
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',
},
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: 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: {
padding: {
vertical: 15,
horizontal: 15,
},
color: '#fff',
textColor: '#333',
fontSize: '@@theme.fontSize',
fontWeight: 900,
},
children: {
type: 'text',
key: 'Title'
}
},
{
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: {},
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: '猜你喜欢'
}
]
},
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

234
src/modules/prduct-group.ts
Unescape View File

@ -0,0 +1,234 @@
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: '标题123',
content: '说明123',
more: '查看更多',
},
groups: [
{
title: '111',
}
],
theme: {
color: 'pink',
moreColor: "#5d35b0",
},
children: {
theme: {
radius: 12
},
}
},
theme: {
// height: 200,
padding: 10,
color: '@@theme.color',
},
children: {
vid: createUniqueId(),
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: 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: 'pink',
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: 'red',
},
children: [
{
theme: {
width: 100,
height: 100,
border: {
color: "black",
width: 2,
},
},
children: {
type: 'image',
key: ".image"
},
},
{
theme: {
textColor: "white",
fontSize: 18
},
children: {
type: "text",
key: ".title"
},
}
]
},
}
},
]
}
}
export default module
Write Preview
Loading…
Cancel
Save