配置列表内容

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<Record<string, Record<string, unknown>>>({

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) => {
       </fieldset>
     </div>
     <div v-show="currentTab === 'block'" class="ddd-configurator-content">
+      <template v-if="module?.configs?.length">
+        <template v-for="(cfg, idx) in module.configs" :key="idx">
+          <RenderConfig
+            :type="cfg.type"
+            :props="cfg"
+          />
+        </template>
+        <div>
+          {{ ctx.activeBlockId }}
+          <pre><code>{{ ctx.sources }}</code></pre>
+        </div>
+      </template>
       <div>
         <pre><code>{{ module }}</code></pre>
       </div>

src/engineer/context.ts

@@ -1,7 +1,7 @@
-import type { ComputedRef, InjectionKey, UnwrapNestedRefs } from 'vue'
+import type { WritableComputedRef, InjectionKey, UnwrapNestedRefs } from 'vue'
-import { computed, inject, provide } 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<T = unknown>(source: string | undefined, fallback?: T): ComputedRef<T | undefined> {
+export function useSource<T = unknown>(source: string | undefined, fallback?: T): WritableComputedRef<T | undefined> {
   const ctx = useContext()
   const blockId = useBlockId()
 
-  return computed<T | undefined>(() => {
+  return computed<T | undefined>({
-    if (!blockId) {
+    get(): T | undefined {
-      throw new Error('without block')
+      // if (!blockId) {
-    }
+      //   throw new Error('without block')
-    if (!source) {
+      // }
-      return fallback
+      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
   })
 }

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[]