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

产品组样式联动，文字引用联动

Browse Source
main
一杯沧海 12 months ago
parent a635eead2a
commit 7666f0a378
7 changed files with 422 additions and 356 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. 103
      src/App.vue
  2. 20
      src/engineer/components/ConfigCurrentView.vue
  3. 20
      src/engineer/context.ts
  4. 18
      src/engineer/styles/NumberStyle.vue
  5. 3
      src/engineer/types.ts
  6. 1
      src/engineer/views/RenderTemplate.vue
  7. 1
      src/engineer/views/TextView.vue

103
src/App.vue
Unescape View File

@ -132,7 +132,8 @@ const categories = ref([{ icon: 'trash', text: '媒体' }, { icon: 'trash', text
categories.value.unshift({
icon: 'trash',
text: '基础',
modules: [{
modules: [
{
vid: hash(`${++nextId}`),
mid: hash(`${++nextId}`),
title: '轮播图',
@ -285,7 +286,8 @@ categories.value.unshift({
},
color: 'cyan',
},
children: [{
children: [
{
vid: hash(`${++nextId}`),
theme: {
width: '100%',
@ -295,7 +297,8 @@ categories.value.unshift({
textAlign: 'center',
},
children: '设置轮播图',
}, {
},
{
theme: {
position: 'absolute',
flexible: true,
@ -306,18 +309,6 @@ categories.value.unshift({
height: 20,
color: 'red',
},
// children: {
// type: 'each',
// key: 'indicator.position',
// handle: {
// theme: {
// width: 20,
// height: 20,
// radius: 10,
// color: 'black',
// }
// },
// }
children: {
type: 'template',
key: 'indicator.style'
@ -325,9 +316,9 @@ categories.value.unshift({
}],
},
{
title: '产品组',
vid: hash(`${++nextId}`),
mid: hash(`${++nextId}`),
title: '产品组',
maxReferenceCount: -1,
referenceCount: 0,
image: undefined,
@ -347,10 +338,15 @@ categories.value.unshift({
label: '说明',
field: 'content',
},
{
type: 'text',
label: '提示',
field: 'more',
},
]
},
{
help: '最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片顺序',
help: '帮助',
addable: true,
type: 'list',
field: 'groups',
@ -385,23 +381,28 @@ categories.value.unshift({
],
init: {
titleAndDesc: {
mainTitle: '标题',
content: '说明',
mainTitle: '标题123',
content: '说明123',
more: '查看更多',
},
groups: [
{
productTitle: '111',
}
],
theme: {
color: 'blue',
},
children:{
theme: {
height: 200,
padding: {
horizontal: 12.0,
radius: 12
},
color: 'pink',
}
},
theme: {
height: 200,
padding: 12,
color: '@@theme.color',
},
children: {
vid: hash(`${++nextId}`),
@ -409,7 +410,8 @@ categories.value.unshift({
width: '100%',
height: '100%',
color: 'white',
radius: 12.0,
clip: 'hidden',
radius: '@@children.theme.radius',
textAlign: 'center',
},
children: [
@ -438,13 +440,19 @@ categories.value.unshift({
theme: {
fontSize: 16,
},
children: '左侧标题',
children: {
type: 'text',
key: 'titleAndDesc.mainTitle'
},
},
{
theme: {
fontSize: 16,
},
children: '左侧说明',
children: {
type: 'text',
key: 'titleAndDesc.content'
},
}
]
},
@ -467,10 +475,14 @@ categories.value.unshift({
vertical: 1,
horizontal: 5,
},
color: 'pink',
color: '@@children.children.children.children.children.2.color',
textColor: '#fff',
radius: 16,
},
children: '查看更多',
children: {
type: 'text',
key: 'titleAndDesc.more'
},
},
],
@ -490,20 +502,35 @@ categories.value.unshift({
},
padding: {
horizontal: 3,
}
},
children: [{
gap: 3,
clip: 'autoX',
},
children:
{
type: 'each',
key: 'groups',
handle: {
theme: {
width: '35%',
width: '100px',
height: '100%',
mainAlign: "center",
radius: 10,
color: '#fff',
crossAlign: "center"
},
children: '产品'
}
},
]
// [{
// theme: {
// width: '35%',
// height: '100%',
// mainAlign: "center",
// color: '#fff',
// crossAlign: "center"
//
// },
// children: { }
// },
// ]
},
]
}

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

@ -3,6 +3,7 @@ import type { View } from '../types';
import { computed } from 'vue';
import { useContext } from '../context';
import ColorConfig from '../configs/ColorConfig.vue';
import NumberStyle from '../styles/NumberStyle.vue'
defineOptions({
name: 'ConfigCurrentView',
@ -17,17 +18,30 @@ const styles = computed(() => {
return undefined
}
return Object.entries(view.value.theme).filter(([, value]) => {
return typeof value === 'string' && value.startsWith('@@theme.')
return typeof value === 'string' && value.startsWith('@@')
}) as Array<[string, string]>
})
const label = computed(()=>{
if(!view.value?.title) {
return undefined
}
return view.value.title
})
</script>
<template>
{{ ctx.activeViewId }}
<hr/>
<fieldset>
<legend>{{ label }}设置</legend>
<template v-for="([key, value]) in styles" :key="key">
<ColorConfig v-if="key === 'color'" :field="value.slice(2)" label="背景颜色" />
<div v-else>{{ key }}:{{ value }}</div>
<NumberStyle v-if="key === 'radius'" :field="value.slice(2)" label="圆角设置" />
<!-- <div v-else>{{ key }}:{{ value }}</div>-->
</template>
<pre><code>{{ view }}</code></pre>
</fieldset>
<!--<pre><code>{{ view }}</code></pre>-->
</template>

20
src/engineer/context.ts
Unescape View File

@ -51,7 +51,7 @@ export interface EngineContextBase {
nextId: number
/** 数据源 */
sources: Record<string, Record<string, unknown>>
/** 到处数据 */
/** 导出数据 */
export: () => Exported
/** 获取动态数据 */
value: <T>(blockId: string, key: string) => T | undefined
@ -74,8 +74,8 @@ export function useContext(): EngineContext {
export const parentViewIdKey: InjectionKey<string> = Symbol.for('ddd:view:parent:id')
export function useParentViewId(): string | undefined {
return inject(parentViewIdKey)
export function useParentViewId(): string {
return must(inject(parentViewIdKey), 'no parentViewId no found')
}
export function provideParentViewId(id: string | undefined): void {
@ -86,7 +86,7 @@ export function provideParentViewId(id: string | undefined): void {
const blockIdKey: InjectionKey<string> = Symbol.for('ddd:block:id')
export function useBlockId(): string {
export const useBlockId = (): string => {
return must(inject(blockIdKey), "no block found")
}
@ -94,8 +94,9 @@ export function provideBlockId(id: string): void {
provide(blockIdKey, id)
}
export const currentViewDOMRectKey: InjectionKey<UnwrapNestedRefs<Partial<DOMRect>>> = Symbol.for('ddd:view:current:domrect')
export const parentViewDOMRectKey: InjectionKey<UnwrapNestedRefs<Partial<DOMRect>>> = Symbol.for('ddd:view:parent:domrect')
type ReactingDomRect = InjectionKey<UnwrapNestedRefs<Partial<DOMRect>>>
export const currentViewDOMRectKey: ReactingDomRect = Symbol.for('ddd:view:current:domrect')
export const parentViewDOMRectKey: ReactingDomRect = Symbol.for('ddd:view:parent:domrect')
export function useCurrentViewDOMRect(): UnwrapNestedRefs<Partial<DOMRect>> {
return must(inject(currentViewDOMRectKey), 'no DOMReact found')
@ -163,7 +164,9 @@ export interface TreeData {
value: any
}
const treeDataKey: InjectionKey<UnwrapNestedRefs<TreeData>|WritableComputedRef<TreeData> | null> = Symbol.for('ddd:view:tree:data')
type RefTreeData = InjectionKey<UnwrapNestedRefs<TreeData>|WritableComputedRef<TreeData>|null>
const treeDataKey: RefTreeData = Symbol.for('ddd:view:tree:data')
export function provideTreeData(data: UnwrapNestedRefs<TreeData> | WritableComputedRef<TreeData> | null) {
provide(treeDataKey, data)
@ -175,7 +178,9 @@ export function useSource<T = unknown>(source: string | undefined, fallback?: T)
const blockId = useBlockId()
return computed<T | undefined>({
get(): T | undefined {
console.log('get',source,'source',blockId || ctx.activeBlockId,'id')
if (!source) {
return fallback
}
@ -193,6 +198,7 @@ export function useSource<T = unknown>(source: string | undefined, fallback?: T)
return valueOf(ctx.sources[id], source) ?? fallback
},
set(value: T | undefined) {
console.log('set',value,'value',source,'source',blockId || ctx.activeBlockId,'id')
if (!source || source.startsWith("$")) {
return
}

18
src/engineer/styles/NumberStyle.vue
Unescape View File

@ -0,0 +1,18 @@
<script lang="ts" setup>
import { useSource } from '../context.ts'
defineOptions({
name: 'DddRadiusStyle'
})
const props = defineProps<{
field: string
help?: string
label?: string
}>()
const tempStr = useSource<string>(props.field)
</script>
<template>
<div style="display: flex;justify-content: space-between">
<label>{{props.label}}</label>
<input type="range" min="1" max="50" v-model="tempStr">
</div>
</template>

3
src/engineer/types.ts
Unescape View File

@ -274,7 +274,7 @@ export type ClipBehavior =
| 'visible'
| 'auto'
| 'autoX' // overflow-x: auto; overflow-y: hidden
| 'autoY' // overflow-x: hidden; overflow-y: auto
| 'autoY' // overflow-y: hidden; overflow-y: auto
/**
* 视图数据
@ -405,6 +405,7 @@ export interface View {
*/
// theme?: Theme | Widget
theme?: DynamicTheme
title?: string
/**
* 关联数据源
*/

1
src/engineer/views/RenderTemplate.vue
Unescape View File

@ -14,6 +14,7 @@ const view = computed(() => {
const key = name.value
return ts && key ? ts[key] : undefined
})
</script>
<template>

1
src/engineer/views/TextView.vue
Unescape View File

@ -1,6 +1,5 @@
<script lang="ts" setup>
import { useSource } from '../context'
defineOptions({
name: 'DddTextView',
inheritAttrs: false,

Write Preview
Loading…
Cancel
Save