From c87c1eac071ffdd083d46570072cad52cb10f149 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Fri, 6 Jun 2025 19:00:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=B7=BB=E5=8A=A0=20TransformE?=
 =?UTF-8?q?ditor=20=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96=20DataFor?=
 =?UTF-8?q?m=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 TransformEditor 组件，用于编辑物体的变换属性（位置、旋转、缩放）
- 在 PropertyPanel 中集成 TransformEditor，实现对 tf 属性的编辑
- 优化 DataForm 项的样式，增加无标签项的样式处理
- 调整 PropertyPanel 的样式，优化属性编辑界面布局
---
 src/components/data-form/DataForm.vue              |   7 +
 src/editor/propEditors/TransformEditor.vue         | 216 +++++++++++++++++++++
 src/editor/widgets/property/PropertyPanel.vue      |   9 +-
 .../widgets/property/PropertyPanelConstant.ts      |  14 +-
 4 files changed, 238 insertions(+), 8 deletions(-)
 create mode 100644 src/editor/propEditors/TransformEditor.vue

diff --git a/src/components/data-form/DataForm.vue b/src/components/data-form/DataForm.vue
index 96d01b3..88f05d5 100644
--- a/src/components/data-form/DataForm.vue
+++ b/src/components/data-form/DataForm.vue
@@ -410,8 +410,10 @@ export type {
                         'data-form-item',
                         `data-form-item-flex-${Math.min(dataFormItem.widthCount, state.columnCount)}`,
                         {
+                            'data-form-item-no-label': !dataFormItem.formItemProps.label,
                             'multiple-width-count': Math.min(dataFormItem.widthCount, state.columnCount) > 1,
                             'data-form-item-has-ext-input': dataFormItem.extInputs && dataFormItem.extInputs.length > 0,
+
                         },
                     ]"
                 >
@@ -483,6 +485,11 @@ export type {
     flex-shrink: 0;
 }
 
+.data-form-item-no-label :deep(> .el-form-item__content),
+.data-form-item-ext-input :deep(> .el-form-item__content){
+    margin-left: 0 !important;
+}
+
 .data-form-item.data-form-item-flex-1 {
     flex: 1 1 0;
 }
diff --git a/src/editor/propEditors/TransformEditor.vue b/src/editor/propEditors/TransformEditor.vue
new file mode 100644
index 0000000..9559bb7
--- /dev/null
+++ b/src/editor/propEditors/TransformEditor.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ElInputNumber, useFormItem } from "element-plus";
+import { Typeof } from "@ease-forge/shared";
+import { renderIcon } from "@/utils/webutils.js";
+
+defineOptions({
+    name: 'TransformEditor',
+});
+
+// 组件事件定义
+const emit = defineEmits<{
+    /** 更新内联表格数据 */
+    "update:modelValue": [value: ItemJson["tf"]];
+}>();
+
+// // 定义组件插槽
+// const slots = defineSlots<{
+//     /** 提交区域插槽 */
+//     slots01?: (props?: any) => Array<VueNode>;
+// }>();
+
+// // 组件属性
+// const attrs = useAttrs();
+// // 组件插槽
+// const slots = useSlots();
+// 当前组件对象
+// const instance = getCurrentInstance();
+
+// // 双向绑定的 value 属性
+// const value = defineModel<string>();
+
+// 定义 Props 类型
+interface TransformEditorProps {
+    modelValue: ItemJson["tf"];
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<TransformEditorProps>(), {});
+
+// 定义 State 类型
+interface TransformEditorState {
+}
+
+// state 属性
+const state = reactive<TransformEditorState>({});
+
+// 定义 Data 类型
+interface TransformEditorData {
+}
+
+// 内部数据
+const data: TransformEditorData = {};
+const { formItem } = useFormItem();
+
+
+function updateValue(value: number | undefined, prs: 0 | 1 | 2, xyz: 0 | 1 | 2) {
+    const rawValue: any = props.modelValue;
+    if (!rawValue[prs]) rawValue[prs] = [];
+    if (prs === 1) value = calcRotation(value);
+    rawValue[prs][xyz] = value;
+    emit("update:modelValue", rawValue);
+    console.log("updateValue", rawValue);
+    // formItem?.validate('change', (valid) => console.log(valid));
+}
+
+function getPosition(idx: 0 | 1 | 2) {
+    return props.modelValue?.[0]?.[idx];
+}
+
+function getRotation(idx: 0 | 1 | 2) {
+    const radian = props.modelValue?.[1]?.[idx];
+    if (Typeof.noValue(radian)) return;
+    return Math.round(radian * 180 / Math.PI);
+}
+
+function getScale(idx: 0 | 1 | 2) {
+    return props.modelValue?.[2]?.[idx];
+}
+
+function calcRotation(rotation?: number) {
+    if (Typeof.noValue(rotation)) return;
+    return rotation * Math.PI / 180;
+}
+
+interface TransformEditorExpose {
+    state: TransformEditorState;
+    data: TransformEditorData;
+}
+
+const expose: TransformEditorExpose = {
+    state,
+    data,
+};
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    TransformEditorProps,
+    TransformEditorState,
+}
+</script>
+
+<template>
+    <div class="transform-editor gui-toolbar">
+        <div class="gui-row">
+            <div class="gui-item-name"></div>
+            <div class="gui-item">X</div>
+            <div class="gui-item">Y</div>
+            <div class="gui-item">Z</div>
+        </div>
+        <div class="gui-row">
+            <div class="gui-item-name">
+                <component :is="renderIcon('element Rank')"></component>
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getPosition(0)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 0, 0)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getPosition(1)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 0, 1)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getPosition(2)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 0, 2)"
+                />
+            </div>
+        </div>
+        <div class="gui-row">
+            <div class="gui-item-name">
+                <component :is="renderIcon('element RefreshLeft')"></component>
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getRotation(0)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 1, 0)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getRotation(1)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 1, 1)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getRotation(2)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 1, 2)"
+                />
+            </div>
+        </div>
+        <div class="gui-row">
+            <div class="gui-item-name">
+                <component :is="renderIcon('element ScaleToOriginal')"></component>
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getScale(0)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 2, 0)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getScale(1)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 2, 1)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getScale(2)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 2, 2)"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+div.transform-editor.gui-toolbar {
+    border: none;
+    margin: 0;
+}
+</style>
diff --git a/src/editor/widgets/property/PropertyPanel.vue b/src/editor/widgets/property/PropertyPanel.vue
index 8c02748..2b9b401 100644
--- a/src/editor/widgets/property/PropertyPanel.vue
+++ b/src/editor/widgets/property/PropertyPanel.vue
@@ -75,10 +75,13 @@ function getCollapseItemId(group: PropertySetterGroup, idx: number) {
 function onDataChange(newData: any) {
     const viewport = props.viewport;
     if (!viewport) return;
+    const data = _.find(viewport.stateManager.vdata.items, item => item.id === props.data.id);
     viewport.stateManager.beginStateUpdate();
-    lodash.merge(props.data, newData);
-    console.log("onDataChange", props.data === newData);
+    lodash.merge(data, newData);
+    console.log("onDataChange@1", JSON.stringify(data.tf));
     viewport.stateManager.endStateUpdate();
+    // data = _.find(viewport.stateManager.vdata.items, item => item.id === props.data.id);
+    // console.log("onDataChange#2", JSON.stringify(data.tf));
 }
 
 interface PropertyPanelExpose {
@@ -130,6 +133,6 @@ export type {
 
 <style scoped>
 .property-panel {
-    padding: 8px 12px 16px 0;
+    padding: 8px 12px 16px 4px;
 }
 </style>
diff --git a/src/editor/widgets/property/PropertyPanelConstant.ts b/src/editor/widgets/property/PropertyPanelConstant.ts
index 4f43277..f713f55 100644
--- a/src/editor/widgets/property/PropertyPanelConstant.ts
+++ b/src/editor/widgets/property/PropertyPanelConstant.ts
@@ -1,5 +1,8 @@
+import { markRaw } from "vue";
 import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts";
 import type { PropertyFieldSetter } from "@/core/base/PropertyTypes.ts";
+import { dataFormInputComponents } from "@/components/data-form/DataFormConstant.ts";
+import TransformEditor from "@/editor/propEditors/TransformEditor.vue";
 
 const defDataFormProps: DataFormProps = {
     columnCount: 1,
@@ -8,6 +11,8 @@ const defDataFormProps: DataFormProps = {
     size: "small",
 };
 
+dataFormInputComponents.TransformEditor = markRaw<any>(TransformEditor);
+
 const basicFieldsSetter: Array<PropertyFieldSetter> = [
     {
         dataPath: 'id', label: '唯一ID', input: 'Input',
@@ -39,11 +44,10 @@ const basicFieldsSetter: Array<PropertyFieldSetter> = [
         dataPath: 'dt.color', label: '颜色', input: 'ColorPicker',
         inputProps: {},
     },
-    // {
-    //     dataPath: 'tf', input: 'TransformEditor',
-    //     inputProps: {
-    //     },
-    // },
+    {
+        dataPath: 'tf', input: 'TransformEditor',
+        inputProps: {},
+    },
     // {
     //     dataPath: 'dt', input: 'InOutCenterEditor',
     //     inputProps: {