feat(editor,form): 添加属性配置表单formState扩展函数prop

packages/editor/src/Editor.vue

@@ -61,7 +61,10 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <PropsPanel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
+        <PropsPanel
+          :extend-state="extendFormState"
+          @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
+        >
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>

packages/editor/src/editorProps.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 
 import type { EventOption } from '@tmagic/core';
-import type { FormConfig } from '@tmagic/form';
+import type { FormConfig, FormState } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
@@ -137,4 +137,8 @@ export default {
   disabledDragStart: {
     type: Boolean,
   },
+
+  extendFormState: {
+    type: Function as PropType<(state: FormState) => Record<string, any> | Promise<Record<string, any>>>,
+  },
 };

packages/editor/src/layouts/PropsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-props-panel" v-if="nodes.length === 1">
+  <div class="m-editor-props-panel" v-show="nodes.length === 1">
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
@@ -8,6 +8,7 @@
       :size="propsPanelSize"
       :init-values="values"
       :config="curFormConfig"
+      :extend-state="extendState"
       @change="submit"
     ></MForm>
   </div>
@@ -17,7 +18,7 @@
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import type { FormValue } from '@tmagic/form';
+import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
@@ -26,6 +27,10 @@ defineOptions({
   name: 'MEditorPropsPanel',
 });
 
+defineProps<{
+  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}>();
+
 const emit = defineEmits(['mounted']);
 
 const internalInstance = getCurrentInstance();
@@ -78,5 +83,5 @@ const submit = async () => {
   }
 };
 
-defineExpose({ submit });
+defineExpose({ configForm, submit });
 </script>

packages/form/src/Form.vue

@@ -62,6 +62,7 @@ const props = withDefaults(
     labelPosition?: string;
     keyProp?: string;
     popperClass?: string;
+    extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     config: () => [],
@@ -114,7 +115,7 @@ const formState: FormState = reactive<FormState>({
   },
 });
 
-watchEffect(() => {
+watchEffect(async () => {
   formState.initValues = props.initValues;
   formState.lastValues = props.lastValues;
   formState.isCompare = props.isCompare;
@@ -122,6 +123,13 @@ watchEffect(() => {
   formState.keyProp = props.keyProp;
   formState.popperClass = props.popperClass;
   formState.parentValues = props.parentValues;
+
+  if (typeof props.extendState === 'function') {
+    const state = (await props.extendState(formState)) || {};
+    Object.entries(state).forEach(([key, value]) => {
+      formState[key] = value;
+    });
+  }
 });
 
 provide('mForm', formState);