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

Compare commits

base: hupeh:d4deed140d44fd94f1a8c8f9e97ca42549a2de94
Branches Tags
hupeh:main
..
compare: hupeh:6f5f4d3023f3ca7bce2f9c47e1d5c1a5058a64a8
Branches Tags
hupeh:main

No commits in common. 'd4deed140d44fd94f1a8c8f9e97ca42549a2de94' and '6f5f4d3023f3ca7bce2f9c47e1d5c1a5058a64a8' have entirely different histories.
d4deed140d ... 6f5f4d3023

14 changed files with 578 additions and 1006 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats
  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

565
src/App.vue
Unescape View File

@ -1,8 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import { Block, Module } from './engineer' import type { 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()
@ -108,10 +107,7 @@ const blocks = ref<Block[]>([
]) ])
const categories = ref([{ icon: 'trash', text: '媒体' }, { icon: 'trash', text: '图表' }, { const categories = ref([{ icon: 'trash', text: '媒体' }, { icon: 'trash', text: '图表' }, { icon: 'trash', text: '商品' }, { icon: 'trash', text: '功能' }, { icon: 'trash', text: '素材' }].map(c => ({
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}`),
@ -133,9 +129,562 @@ const categories = ref([{ icon: 'trash', text: '媒体' }, { icon: 'trash', text
})), })),
}))) })))
categories.value.unshift(modules) 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'
},
},
],
},
{
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]: {
@ -154,7 +703,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>

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

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

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

@ -14,7 +14,6 @@ const props = defineProps<{
help?: string help?: string
required?: boolean required?: boolean
configs: ModuleConfig[] configs: ModuleConfig[]
addable?: boolean
}>() }>()
// const ctx = useContext() // const ctx = useContext()
@ -54,7 +53,7 @@ const minus = () => {
</div> </div>
</div> </div>
<div v-if="props.addable"> <div>
<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 > <div style="display: flex;justify-content: space-between">
<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' | 'flex' display?: 'block' | 'inline-block'
whiteSpace?: 'nowrap' | 'pre' whiteSpace?: 'nowrap' | 'pre'
} }
@ -236,6 +236,7 @@ export interface Spatial {
} }
/** /**
* 盒子策略 * 盒子策略
* *
@ -293,7 +294,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 {
/** /**
* 是否强制开启弹性布局 * 是否强制开启弹性布局
* *
@ -418,10 +419,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,9 +15,3 @@ 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 * from "./dynamic"; export {dynamic} from "./dynamic.ts";

7
src/engineer/utils/unit.ts
Unescape View File

@ -3,6 +3,13 @@ export function unit(n: number | undefined | string) {
return undefined return undefined
} }
if (typeof n !== 'number') { 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
} }
return `${n}px` return `${n}px`

106
src/modules/category-bar.ts
Unescape View File

@ -1,106 +0,0 @@
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

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

@ -1,232 +0,0 @@
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

121
src/modules/index.ts
Unescape View File

@ -1,121 +0,0 @@
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

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

@ -1,235 +0,0 @@
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

87
src/modules/search-cube.ts
Unescape View File

@ -1,87 +0,0 @@
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

194
src/modules/swiper.ts
Unescape View File

@ -1,194 +0,0 @@
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
Write Preview
Loading…
Cancel
Save