diff --git a/src/App.vue b/src/App.vue index d1809b3..69cd4e6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -212,7 +212,50 @@ categories.value.unshift({ }, children: '内容', }], - }], + }, + { + vid: hash(`${++nextId}`), + mid: hash(`${++nextId}`), + title: '测试', + maxReferenceCount: -1, + referenceCount: 0, + image: undefined, + configs: [ + { + type: 'list', + field: 'arr', + label: '列表', + configs: [ + { + type: 'text', + field: 'title', + label: '文字' + }, + ] + }, + { + type: 'text', + label: '内容', + field: 'content', + } + ], + children: { + theme: { + border: { + width: 2, + style: 'dashed', + color: 'red' + }, + margin: 24, + padding: 12, + }, + children: { + type: 'text', + key: 'content' + } + } + } +], }) const data = ref>>({ diff --git a/src/engineer/components/Configurator.vue b/src/engineer/components/Configurator.vue index 5686675..b58b491 100644 --- a/src/engineer/components/Configurator.vue +++ b/src/engineer/components/Configurator.vue @@ -2,6 +2,7 @@ import { ref, watch } from 'vue' import type { ConfiguratorType } from '../context' import { useContext, useModule } from '../context' +import { RenderConfig } from '../configs/render' defineOptions({ name: 'DddConfigurator', @@ -175,6 +176,18 @@ watch(() => ctx.configurator, (v) => {
+
{{ module }}
diff --git a/src/engineer/context.ts b/src/engineer/context.ts index 5d08302..ec5466f 100644 --- a/src/engineer/context.ts +++ b/src/engineer/context.ts @@ -1,7 +1,7 @@ -import type { ComputedRef, InjectionKey, UnwrapNestedRefs } from 'vue' -import { computed, inject, provide } from 'vue' +import type { WritableComputedRef, InjectionKey, UnwrapNestedRefs } from 'vue' +import { computed, inject, isReactive, isRef, provide } from 'vue' import type { Block, Category, Module, Page } from './types' -import { valueOf } from './utils' +import { setValue, valueOf } from './utils' /** 画布配置 */ export interface CanvasConfig { @@ -129,17 +129,30 @@ export function useScale() { } } -export function useSource(source: string | undefined, fallback?: T): ComputedRef { +export function useSource(source: string | undefined, fallback?: T): WritableComputedRef { const ctx = useContext() const blockId = useBlockId() - return computed(() => { - if (!blockId) { - throw new Error('without block') - } - if (!source) { - return fallback + return computed({ + get(): T | undefined { + // if (!blockId) { + // throw new Error('without block') + // } + const id = blockId || ctx.activeBlockId + if (!source || !id) { + return fallback + } + return valueOf(ctx.sources[id], source) ?? fallback + }, + set(value: T | undefined) { + const id = blockId || ctx.activeBlockId + // console.log({id, source, value}) + if (source && id) { + if (!ctx.sources[id]) { + ctx.sources[id] = {} + } + setValue(ctx.sources[id], source, value) + } } - return valueOf(ctx.sources[blockId], source) ?? fallback }) } diff --git a/src/engineer/types.ts b/src/engineer/types.ts index 6b53d5d..72e2a6a 100644 --- a/src/engineer/types.ts +++ b/src/engineer/types.ts @@ -418,7 +418,7 @@ export interface BaseConfig { export interface ListConfig extends BaseConfig { type: 'list' - addable: boolean + addable?: boolean min?: number max?: number configs: ModuleConfig[]