refactor(property): 优化属性面板并支持实时编辑

- 修改 DataForm 组件的 valuesChange 事件为 dataChange
- 在 PropertyPanel 中添加实时编辑功能，通过 viewport 更新状态
- 优化 PropertyPanel 的数据处理和组件渲染
- 调整 PropertyPanelConstant 中的默认属性值

src/components/data-form/DataForm.vue

@@ -22,7 +22,7 @@ const emit = defineEmits<{
     /** 表单字段变化 */
     // fieldsChange: [changedFields: Array<FieldData>, allFields: Array<FieldData>];
     /** 表单值变化 */
-    valuesChange: [changedValues: any, values: any];
+    dataChange: [newData: any];
 }>();
 
 // 定义组件插槽
@@ -73,7 +73,11 @@ if (Typeof.isObj(props.columnCount)) {
 // 加载数据
 if (props.autoLoadData && props.dataApi) reload().finally();
 // 监听data
-watch(() => state.data, newData => dataChange(state.dataFormItems, newData), { immediate: true, deep: true });
+watch(() => state.data, newData => {
+    const firstDataChange = data.firstDataChange;
+    dataChange(state.dataFormItems, newData);
+    if (!firstDataChange) emit("dataChange", newData);
+}, { immediate: true, deep: true });
 // 监听loading
 watch(() => state.loading, loading => emit("loadingChange", loading));
 // 设置ctxData(表单上下文数据)

src/editor/widgets/property/PropertyPanel.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import lodash from "lodash";
 import { computed, reactive } from "vue";
 import { ElCollapse, ElCollapseItem } from "element-plus";
 import DataForm from "@/components/data-form/DataForm.vue";
 import type { PropertyFlattenSetter, PropertySetterGroup } from "@/core/base/PropertyTypes.ts";
 import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts";
 import { defDataFormProps } from "@/editor/widgets/property/PropertyPanelConstant.ts";
+import Viewport, { type ViewportState } from "@/core/engine/Viewport.ts";
 
 defineOptions({
     name: 'PropertyPanel',
@@ -14,6 +16,10 @@ defineOptions({
 interface PropertyPanelProps {
     /** 待编辑数据 */
     data?: any;
+    /** Viewport */
+    viewport: Viewport;
+    /** ViewportState */
+    viewportState: ViewportState;
     /** 默认的DataFormProps */
     defDataFormProps?: DataFormProps;
     /** 最上面平铺的设置器 */
@@ -27,11 +33,15 @@ const props = withDefaults(defineProps<PropertyPanelProps>(), {});
 
 // 定义 State 类型
 interface PropertyPanelState {
+    /** 待编辑数据 */
+    data?: any;
+    /** 已展开的分组 */
     expandGroups: Array<string>;
 }
 
 // state 属性
 const state = reactive<PropertyPanelState>({
+    data: lodash.cloneDeep(props.data),
     expandGroups: [],
 });
 
@@ -62,6 +72,15 @@ function getCollapseItemId(group: PropertySetterGroup, idx: number) {
     return `_${idx}_${group.title}`;
 }
 
+function onDataChange(newData: any) {
+    const viewport = props.viewport;
+    if (!viewport) return;
+    viewport.stateManager.beginStateUpdate();
+    lodash.merge(props.data, newData);
+    console.log("onDataChange", props.data === newData);
+    viewport.stateManager.endStateUpdate();
+}
+
 interface PropertyPanelExpose {
     state: PropertyPanelState;
     data: PropertyPanelData;
@@ -86,8 +105,9 @@ export type {
             v-if="props.flatten"
             class="property-panel-form"
             v-bind="flattenFormProps"
-            :data="props.data"
+            :data="state.data"
             :formFields="props.flatten.fields"
+            @dataChange="onDataChange"
         />
         <ElCollapse v-if="props.groups" v-model="state.expandGroups">
             <ElCollapseItem
@@ -99,8 +119,9 @@ export type {
                     v-if="group"
                     class="property-panel-form"
                     v-bind="getDefFormProps(group)"
-                    :data="props.data"
+                    :data="state.data"
                     :formFields="props.flatten.fields"
+                    @dataChange="onDataChange"
                 />
             </ElCollapseItem>
         </ElCollapse>
@@ -108,5 +129,7 @@ export type {
 </template>
 
 <style scoped>
-
+.property-panel {
+    padding: 8px 12px 16px 0;
+}
 </style>

src/editor/widgets/property/PropertyPanelConstant.ts

@@ -4,7 +4,7 @@ import type { PropertyFieldSetter } from "@/core/base/PropertyTypes.ts";
 const defDataFormProps: DataFormProps = {
     columnCount: 1,
     layout: "onlyLabelFixed",
-    labelWidth: "100px",
+    labelWidth: "60px",
     size: "small",
 };
 
@@ -20,7 +20,7 @@ const basicFieldsSetter: Array<PropertyFieldSetter> = [
         inputProps: {},
     },
     {
-        dataPath: 'visible', label: '可见', input: 'Checkbox',
+        dataPath: 'v', label: '可见', input: 'Checkbox',
         inputProps: {},
     },
     {

src/editor/widgets/property/PropertyView.vue

@@ -61,6 +61,8 @@ export default {
             return {
                 key: data.id,
                 data: data,
+                viewport: this.viewport,
+                viewportState: state,
                 flatten: selectedObjectSetter.flatten,
                 groups: selectedObjectSetter.groups,
             };