From fd53170e59179f51c16f6908d8f817c6f77e96a1 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 6 Jul 2023 14:25:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor,form):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE=E8=A1=A8=E5=8D=95formState?=
 =?UTF-8?q?=E6=89=A9=E5=B1=95=E5=87=BD=E6=95=B0prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue             |  5 ++++-
 packages/editor/src/editorProps.ts         |  6 +++++-
 packages/editor/src/layouts/PropsPanel.vue | 11 ++++++++---
 packages/form/src/Form.vue                 | 10 +++++++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index c684e14a..decd75f4 100644
--- a/packages/editor/src/Editor.vue
+++ b/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>
diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
index f195b192..ad2b1662 100644
--- a/packages/editor/src/editorProps.ts
+++ b/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>>>,
+  },
 };
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 29674b6d..a9ff42e9 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/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>
diff --git a/packages/form/src/Form.vue b/packages/form/src/Form.vue
index 021e1aa9..268ceae5 100644
--- a/packages/form/src/Form.vue
+++ b/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);