refactor(property): 重构属性面板

- 移除 IMeta接口，改为使用 PropertySetter - 新增 PropertyPanel 组件用于渲染属性 - 修改 ModuleManager 中的 meta 为 setter - 更新各模块的元数据文件，使用新的 PropertySetter 结构
6 months ago · 06fdbfe2c1
31 changed files with 544 additions and 441 deletions
--- a/src/core/ModelUtils.ts
+++ b/src/core/ModelUtils.ts
@ -2,9 +2,7 @@ import * as THREE from 'three'
 import type { ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts'
 import { getAllItemTypes, getItemTypeByName } from '@/model/itemType/ItemTypeDefine.ts'
 import type Viewport from '@/core/engine/Viewport'
-import { computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh'
 import { Vector2 } from 'three/src/math/Vector2'
-import type Toolbox from '@/model/itemType/Toolbox.ts'
 import EventBus from '@/runtime/EventBus.ts'
 import Decimal from 'decimal.js'

@ -174,7 +172,7 @@ export function deletePointByKeyboard() {
    viewport.state.selectedObject = undefined
    viewport.state.selectedItem = undefined
    viewport.state.selectedEntityId = undefined
-    viewport.state.selectedObjectMeta = undefined
+    viewport.state.selectedObjectSetter = undefined
  }

  EventBus.dispatch('entityDeleted', {
--- a/src/core/base/IMeta.ts
+++ b/src/core/base/IMeta.ts
@ -31,23 +31,3 @@ export const BASIC_META_OF_LINE: ItemTypeMeta = []
 * "线"对象类型的，基础元数据, 排在后面的
 */
 export const BASIC_META_OF_LINE2: ItemTypeMeta = []
-
-/**
- * 属性面板元数据声明, 第一级 category, 第二级 tabName, 第三级 MetaItem
- */
-export type IMeta = MetaItem[]
-
-/**
- * PropertyPanelConfig interface
- * Defines the structure of property panel configurations.
- */
-export interface MetaItem {
-  field?: string;
-  editor: string;
-  editorProps?: any;
-  label?: string;
-  readonly?: boolean;
-  category?: string;
-
-  [key: string]: any;
-}
--- a/src/core/base/PropertyTypes.ts
+++ b/src/core/base/PropertyTypes.ts
@ -0,0 +1,34 @@
+import type { FormField } from "@/components/data-form/DataFormTypes.ts";
+
+interface PropertyFieldSetter extends FormField {
+}
+
+interface PropertyFlattenSetter {
+    /** label宽度 */
+    labelWidth?: string | number;
+    /** 表单字段大小 */
+    size?: "" | "small" | "default" | "large";
+    /** 设置器集合 */
+    fields: Array<PropertyFieldSetter>;
+}
+
+interface PropertySetterGroup extends PropertyFlattenSetter {
+    /** 分组标题 */
+    title: string;
+    /** 是否展开状态(默认为true) */
+    expand?: boolean;
+}
+
+interface PropertySetter {
+    /** 最上面平铺的设置器 */
+    flatten?: PropertyFlattenSetter;
+    /** 设置器分组集合 */
+    groups?: Array<PropertySetterGroup>;
+}
+
+export type {
+    PropertyFieldSetter,
+    PropertyFlattenSetter,
+    PropertySetterGroup,
+    PropertySetter,
+}
--- a/src/core/controls/EsDragControls.ts
+++ b/src/core/controls/EsDragControls.ts
@ -1,11 +1,8 @@
 import * as THREE from 'three'
 import { DragControls } from './DragControls.js'
 import type Viewport from '@/core/engine/Viewport.ts'
-import { getItemTypeByName } from '@/model/itemType/ItemTypeDefine'
-import type { ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine'
-import { markRaw } from 'vue'
 import EventBus from '@/runtime/EventBus'
-import { getInteraction, getMeta } from '@/core/manager/ModuleManager.ts'
+import { getInteraction } from '@/core/manager/ModuleManager.ts'
 import type BaseInteraction from '@/core/base/BaseInteraction.ts'

 // dragControls 绑定函数
--- a/src/core/controls/SelectInspect.ts
+++ b/src/core/controls/SelectInspect.ts
@ -6,8 +6,7 @@ import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
 import EventBus from '@/runtime/EventBus'
 import { markRaw } from 'vue'
-import { getMeta } from '@/core/manager/ModuleManager.ts'
-import MouseMoveInspect from '@/core/controls/MouseMoveInspect.ts'
+import { getSetter } from '@/core/manager/ModuleManager.ts'
 import Constract from '@/core/Constract.ts'

 let pdFn, pmFn, puFn
@ -346,13 +345,13 @@ export default class SelectInspect implements IControls {
          this.viewport.state.selectedObject = markRaw(object)
          this.viewport.state.selectedItem = markRaw(item)
          this.viewport.state.selectedEntityId = entityId
-          this.viewport.state.selectedObjectMeta = getMeta(itemTypeName)
+          this.viewport.state.selectedObjectSetter = getSetter(itemTypeName)
          EventBus.dispatch('selectedObjectChanged', {
            viewport: markRaw(this.viewport),
            selectedObject: this.viewport.state.selectedObject,
            selectedItem: this.viewport.state.selectedItem,
            selectedEntityId: this.viewport.state.selectedEntityId,
-            selectedObjectMeta: this.viewport.state.selectedObjectMeta
+            selectedObjectSetter: this.viewport.state.selectedObjectSetter,
          })
        }
      } else {
@ -360,13 +359,13 @@ export default class SelectInspect implements IControls {
        this.viewport.state.selectedObject = null
        this.viewport.state.selectedItem = null
        this.viewport.state.selectedEntityId = null
-        this.viewport.state.selectedObjectMeta = null
+        this.viewport.state.selectedObjectSetter = null
        EventBus.dispatch('selectedObjectChanged', {
          viewport: markRaw(this.viewport),
          selectedObject: null,
          selectedItem: null,
          selectedEntityId: null,
-          selectedObjectMeta: null
+          selectedObjectSetter: null,
        })
      }
    }
@ -402,7 +401,7 @@ export default class SelectInspect implements IControls {
          multiSelectedObjects.push(object)
          multiSelectedItems.push(item)
          multiSelectedEntityIds.push(object.userData.entityId)
-          multiSelectedObjectMetas.push(getMeta(object.userData.t))
+          // multiSelectedObjectMetas.push(getMeta(object.userData.t))
        }
      }
    }
--- a/src/core/engine/Viewport.ts
+++ b/src/core/engine/Viewport.ts
@ -8,8 +8,8 @@ import { markRaw, reactive, toRaw, watch } from 'vue'
 import type IControls from '../controls/IControls'
 import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'
 import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
-import { getAllItemTypes, type ItemTypeMeta } from '@/model/itemType/ItemTypeDefine.ts'
 import type { ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts'
+import { getAllItemTypes } from '@/model/itemType/ItemTypeDefine.ts'

 import SceneHelp from './SceneHelp'
 import SelectInspect from '../controls/SelectInspect'
@ -22,6 +22,7 @@ import StateManager from '@/core/manager/StateManager.ts'
 import EventBus from '@/runtime/EventBus.ts'
 import Constract from '@/core/Constract.ts'
 import type { IMeta } from '@/core/base/IMeta.ts'
+import type { PropertySetter } from "@/core/base/PropertyTypes.ts";

 /**
 * 视窗对象
@ -72,7 +73,7 @@ export default class Viewport {
    selectedObject: undefined,
    selectedItem: undefined,
    selectedEntityId: undefined,
-    selectedObjectMeta: undefined,
+    selectedObjectSetter: undefined,

    multiSelectedObjects: [],
    multiSelectedItems: [],
@ -567,7 +568,7 @@ export interface ViewportState {
  selectedObject: THREE.Object3D | undefined
  selectedItem: ItemJson | undefined
  selectedEntityId: string | undefined
-  selectedObjectMeta: IMeta | undefined
+  selectedObjectSetter: PropertySetter | undefined

  /**
   * 红选的对象集
--- a/src/core/manager/ModuleManager.ts
+++ b/src/core/manager/ModuleManager.ts
@ -1,8 +1,8 @@
 import * as THREE from 'three'
 import BaseRenderer from '@/core/base/BaseRenderer'
 import BaseInteraction from '@/core/base/BaseInteraction'
-import type { IMeta } from '@/core/base/IMeta'
 import BaseEntity from '@/core/base/BaseItemEntity'
+import type { PropertySetter } from "@/core/base/PropertyTypes.ts";

 // Define the ModuleDefineOption interface
 export interface ModuleDefineOption {
@ -12,7 +12,7 @@ export interface ModuleDefineOption {
  name: string;
  renderer: BaseRenderer;
  interaction: BaseInteraction;
-  meta: IMeta;
+  setter: PropertySetter;
  entity: new () => BaseEntity;
 }

@ -61,13 +61,9 @@ export function getInteraction<T extends BaseInteraction>(name: string): T {
  return module.interaction as T
 }

-/**
- * 根据物料类型名称, 获取元数据
- * 如果获取不了 直接抛异常
- */
-export function getMeta<T extends IMeta>(name: string): T {
+export function getSetter(name: string) {
  const module = getModuleOption(name)
-  return module.meta as T
+  return module.setter;
 }

 /**
--- a/src/editor/widgets/property/PropertyPanel.vue
+++ b/src/editor/widgets/property/PropertyPanel.vue
@ -0,0 +1,112 @@
+<script setup lang="ts">
+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";
+
+defineOptions({
+    name: 'PropertyPanel',
+});
+
+// 定义 Props 类型
+interface PropertyPanelProps {
+    /** 待编辑数据 */
+    data?: any;
+    /** 默认的DataFormProps */
+    defDataFormProps?: DataFormProps;
+    /** 最上面平铺的设置器 */
+    flatten?: PropertyFlattenSetter;
+    /** 设置器分组集合 */
+    groups?: Array<PropertySetterGroup>;
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<PropertyPanelProps>(), {});
+
+// 定义 State 类型
+interface PropertyPanelState {
+    expandGroups: Array<string>;
+}
+
+// state 属性
+const state = reactive<PropertyPanelState>({
+    expandGroups: [],
+});
+
+// 定义 Data 类型
+interface PropertyPanelData {
+}
+
+// 内部数据
+const data: PropertyPanelData = {};
+const flattenFormProps = computed(() => getDefFormProps(props.flatten));
+
+function getDefFormProps(setter?: PropertyFlattenSetter) {
+    const formProps: DataFormProps = {
+        ...defDataFormProps,
+        ...props.defDataFormProps,
+    };
+    fillFormProps(setter);
+    return formProps;
+}
+
+function fillFormProps(formProps: DataFormProps, setter?: PropertyFlattenSetter) {
+    if (!setter) return;
+    if (setter.size) formProps.size = setter.size;
+    if (setter.labelWidth) formProps.labelWidth = setter.labelWidth;
+}
+
+function getCollapseItemId(group: PropertySetterGroup, idx: number) {
+    return `_${idx}_${group.title}`;
+}
+
+interface PropertyPanelExpose {
+    state: PropertyPanelState;
+    data: PropertyPanelData;
+}
+
+const expose: PropertyPanelExpose = {
+    state,
+    data,
+};
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    PropertyPanelProps,
+    PropertyPanelState,
+}
+</script>
+
+<template>
+    <div class="property-panel">
+        <DataForm
+            v-if="props.flatten"
+            class="property-panel-form"
+            v-bind="flattenFormProps"
+            :data="props.data"
+            :formFields="props.flatten.fields"
+        />
+        <ElCollapse v-if="props.groups" v-model="state.expandGroups">
+            <ElCollapseItem
+                v-for="(group, idx) in props.groups"
+                :name="getCollapseItemId(group, idx)"
+                :title="group.title"
+            >
+                <DataForm
+                    v-if="group"
+                    class="property-panel-form"
+                    v-bind="getDefFormProps(group)"
+                    :data="props.data"
+                    :formFields="props.flatten.fields"
+                />
+            </ElCollapseItem>
+        </ElCollapse>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/editor/widgets/property/PropertyPanelConstant.ts
+++ b/src/editor/widgets/property/PropertyPanelConstant.ts
@ -0,0 +1,58 @@
+import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts";
+import type { PropertyFieldSetter } from "@/core/base/PropertyTypes.ts";
+
+const defDataFormProps: DataFormProps = {
+    columnCount: 1,
+    layout: "onlyLabelFixed",
+    labelWidth: "100px",
+    size: "small",
+};
+
+const basicFieldsSetter: Array<PropertyFieldSetter> = [
+    {
+        dataPath: 'id', label: '唯一ID', input: 'Input',
+        inputProps: {
+            readonly: true,
+        },
+    },
+    {
+        dataPath: 'name', label: '名称', input: 'Input',
+        inputProps: {},
+    },
+    {
+        dataPath: 'visible', label: '可见', input: 'Checkbox',
+        inputProps: {},
+    },
+    {
+        dataPath: 'dt.selectable', label: '可选中', input: 'Checkbox',
+        inputProps: {},
+    },
+    {
+        dataPath: 'dt.protected', label: '受保护', input: 'Checkbox',
+        inputProps: {},
+    },
+    {
+        dataPath: 'dt.label', label: '标签', input: 'Input',
+        inputProps: {},
+    },
+    {
+        dataPath: 'dt.color', label: '颜色', input: 'ColorPicker',
+        inputProps: {},
+    },
+    // {
+    //     dataPath: 'tf', input: 'TransformEditor',
+    //     inputProps: {
+    //     },
+    // },
+    // {
+    //     dataPath: 'dt', input: 'InOutCenterEditor',
+    //     inputProps: {
+    //     },
+    // },
+];
+
+
+export {
+    defDataFormProps,
+    basicFieldsSetter,
+}
--- a/src/editor/widgets/property/PropertyPanelTypes.ts
+++ b/src/editor/widgets/property/PropertyPanelTypes.ts
@ -0,0 +1,7 @@
+interface PropertyPanelProps {
+
+}
+
+export type {
+    PropertyPanelProps,
+}
--- a/src/editor/widgets/property/PropertyPanelUtils.ts
+++ b/src/editor/widgets/property/PropertyPanelUtils.ts
--- a/src/editor/widgets/property/PropertyView.vue
+++ b/src/editor/widgets/property/PropertyView.vue
@ -1,188 +1,164 @@
 <template>
-  <div class="title">
-    <template v-if="!!t">
-      属性
-      <el-tag type="primary">{{ t }}</el-tag>
-      <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
-        <template #prefix>
-          <component :is="renderIcon('element Search')"></component>
+    <div class="title">
+        <template v-if="!!t">
+            属性
+            <el-tag type="primary">{{ t }}</el-tag>
+            <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+                <template #prefix>
+                    <component :is="renderIcon('element Search')"></component>
+                </template>
+            </el-input>
+            <span class="close" @click="closeMe()">
+                <component :is="renderIcon('element Close')"/>
+            </span>
        </template>
-      </el-input>
-      <span class="close" @click="closeMe()">
-      <component :is="renderIcon('element Close')" />
-    </span>
-    </template>
-  </div>
-  <div class="calc-right-panel">
-    <el-empty v-if="!t" description="未选中">
-    </el-empty>
-    <el-form v-else
-             label-position="right"
-             label-width="60"
-             class="property-panel-form"
-             size="default"
-             @submit.native.prevent>
-      <template v-for="(itemMeta, idx) in selectedObjectMeta">
-        <el-divider v-if="itemMeta.editor === '-'" />
-
-        <TextInput
-          v-else-if="itemMeta.editor === 'TextInput'"
-          :prop="itemMeta"
-          :viewport="viewport"
-        />
-
-        <Transform
-          v-else-if="itemMeta.editor === 'TransformEditor'"
-          :prop="itemMeta"
-          :viewport="viewport"
+    </div>
+    <div class="calc-right-panel">
+        <el-empty v-if="!t" description="未选中"/>
+        <PropertyPanel
+            v-else-if="propertyPanelProps"
+            v-bind="propertyPanelProps"
        />
-
-        <SwitchItem
-          v-else-if="itemMeta.editor === 'Switch'"
-          :prop="itemMeta"
-          :viewport="viewport"
-        />
-
-        <ColorItem v-else-if="itemMeta.editor === 'Color'" :prop="itemMeta" :viewport="viewport" />
-
-        <UUIDItem v-else-if="itemMeta.editor === 'UUID'" :prop="itemMeta" :viewport="viewport" />
-
-        <NumberInput
-          v-else-if="itemMeta.editor === 'Number'"
-          :prop="itemMeta"
-          :viewport="viewport"
-        />
-
-        <template v-else> 未知编辑器: {{ itemMeta.editor }}</template>
-      </template>
-    </el-form>
-  </div>
+        <el-empty v-else description="节点未配置设置器"/>
+    </div>
 </template>
 <script>
 import IWidgets from '../IWidgets.js'
-import TextInput from '../../propEditors/TextInput.vue'
-import Transform from '../../propEditors/Transform.vue'
-import SwitchItem from '../../propEditors/SwitchItem.vue'
-import ColorItem from '../../propEditors/ColorItem.vue'
-import UUIDItem from '../../propEditors/UUIDItem.vue'
-import NumberInput from '../../propEditors/NumberInput.vue'
-import EventBus from '../../../runtime/EventBus.js'
+import PropertyPanel from "@/editor/widgets/property/PropertyPanel.vue";

 export default {
-  name: 'PropertyView',
-  components: {
-    NumberInput,
-    UUIDItem,
-    ColorItem,
-    SwitchItem,
-    TextInput, Transform
-  },
-  mixins: [IWidgets],
-  data() {
-    return {
-      itemTypeMeta: null,
-      searchKeyword: ''
-    }
-  },
-  computed: {
-    t() {
-      return this.selectedItem ? this.selectedItem.t : ''
+    name: 'PropertyView',
+    components: {
+        PropertyPanel,
    },
-    selectedItem() {
-      return this.state?.selectedItem
+    mixins: [IWidgets],
+    data() {
+        return {
+            searchKeyword: '',
+            propertySetter: undefined,
+        }
    },
-    selectedObject() {
-      return this.state?.selectedObject
+    computed: {
+        t() {
+            return this.selectedItem ? this.selectedItem.t : ''
+        },
+        selectedItem() {
+            return this.state?.selectedItem
+        },
+        // selectedObject() {
+        //     return this.state?.selectedObject
+        // },
+        // selectedObjectSetter() {
+        //     return this.state?.selectedObjectSetter
+        // },
+        propertyPanelProps() {
+            const state = this.state;
+            if (!state) return;
+            const { selectedObjectSetter, selectedItem } = state;
+            if (!selectedObjectSetter || !selectedItem) return;
+            const data = _.find(this.viewport.stateManager.vdata.items, item => item.id === selectedItem.id);
+            if (!data) return;
+            return {
+                key: data.id,
+                data: data,
+                flatten: selectedObjectSetter.flatten,
+                groups: selectedObjectSetter.groups,
+            };
+        },
    },
-    selectedObjectMeta() {
-      return this.state?.selectedObjectMeta
-    }
-  },
-  methods: {
-    selectedObjectChanged(state) {
-      const data = state.selectedItem
-      console.log('selectedObjectChanged data', data)
-      if (data) {
-        this.viewport.stateManager.beginStateUpdate()
-        const item = _.find(this.viewport.stateManager.vdata.items, item => item.id === data.id)
-        // item.tf[0][0] = item.tf[0][0] / 2;
-        console.log('selectedObjectChanged item', item)
-        // _.extend(item, data)
-        this.viewport.stateManager.endStateUpdate()
-      }
+    watch: {
+        // selectedItem(newV, oldV) {
+        //     console.log("selectedItem", arguments)
+        // },
+        // selectedObject(newV, oldV) {
+        //     console.log("selectedObject", arguments)
+        // },
+    },
+    methods: {
+        selectedObjectChanged(state) {
+            const data = state.selectedItem
+            console.log('selectedObjectChanged data', data)
+            if (data) {
+                this.viewport.stateManager.beginStateUpdate()
+                const item = _.find(this.viewport.stateManager.vdata.items, item => item.id === data.id)
+                // item.tf[0][0] = item.tf[0][0] / 2;
+                console.log('selectedObjectChanged item', item)
+                // _.extend(item, data)
+                this.viewport.stateManager.endStateUpdate()
+            }
+        }
+    },
+    mounted() {
+        // EventBus.on('selectedObjectChanged', this.selectedObjectChanged)
+    },
+    unmounted() {
+        // EventBus.off('selectedObjectChanged', this.selectedObjectChanged)
    }
-  },
-  mounted() {
-    EventBus.on('selectedObjectChanged', this.selectedObjectChanged)
-  },
-  unmounted() {
-    EventBus.off('selectedObjectChanged', this.selectedObjectChanged)
-  }
 }
 </script>
 <style lang="less">
 .property-panel-form {
-  margin: 0;
-  font-size: 14px;
-  color: #606266;
-
-  .el-form-item--default {
-    margin: 5px 3px 0 0;
-
-    .el-form-item__label {
-      height: 20px;
-      line-height: 22px;
-    }
-  }
+    margin: 0;
+    font-size: 14px;
+    color: #606266;

-  .gui-toolbar {
-    color: #333;
-    background: #ffffff;
-    border-top: 1px solid #dcdcdc;
-    margin-top: 5px;
+    .el-form-item--default {
+        margin: 5px 3px 0 0;

-    .el-input-number.is-without-controls .el-input__wrapper {
-      padding-left: 2px;
-      padding-right: 2px;
+        .el-form-item__label {
+            height: 20px;
+            line-height: 22px;
+        }
    }

-    .gui-row {
-      display: flex;
-      flex-direction: row;
-      gap: 3px;
-      padding: 3px 3px 3px 0;
-
-      .gui-item-name {
-        width: 26px;
-        align-self: stretch;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    .gui-toolbar {
+        color: #333;
+        background: #ffffff;
+        border-top: 1px solid #dcdcdc;
+        margin-top: 5px;

-        .el-icon {
-          font-size: 16px;
+        .el-input-number.is-without-controls .el-input__wrapper {
+            padding-left: 2px;
+            padding-right: 2px;
        }
-      }

-      .gui-item {
-        flex: 1;
-        text-align: center;
-        font-size: 12px;
-
-        .el-input-number {
-          width: 100%;
-
-          .el-input__wrapper {
-            background-color: #efefef;
-            box-shadow: none;
-          }
+        .gui-row {
+            display: flex;
+            flex-direction: row;
+            gap: 3px;
+            padding: 3px 3px 3px 0;
+
+            .gui-item-name {
+                width: 26px;
+                align-self: stretch;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .el-icon {
+                    font-size: 16px;
+                }
+            }
+
+            .gui-item {
+                flex: 1;
+                text-align: center;
+                font-size: 12px;
+
+                .el-input-number {
+                    width: 100%;
+
+                    .el-input__wrapper {
+                        background-color: #efefef;
+                        box-shadow: none;
+                    }
+                }
+            }
        }
-      }
    }
-  }

-  .el-divider {
-    margin: 5px 0;
-  }
+    .el-divider {
+        margin: 5px 0;
+    }
 }
 </style>
--- a/src/modules/gstore/GstoreMeta.ts
+++ b/src/modules/gstore/GstoreMeta.ts
@ -1,14 +0,0 @@
-import type { IMeta } from '@/core/base/IMeta.ts'
-
-export default [
-  { field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' },
-  { field: 'name', editor: 'TextInput', label: '名称', category: 'basic' },
-  { field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' },
-  { editor: 'TransformEditor', category: 'basic' },
-  { field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' },
-  { editor: '-', category: 'basic' },
-  { field: 'tf', editor: 'InOutCenterEditor', category: 'basic' },
-  { field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' },
-  { field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' },
-  { field: 'visible', editor: 'Switch', label: '可见', category: 'basic' }
-] as IMeta
--- a/src/modules/gstore/GstorePropertySetter.ts
+++ b/src/modules/gstore/GstorePropertySetter.ts
@ -0,0 +1,12 @@
+import type { PropertySetter } from "@/core/base/PropertyTypes.ts";
+import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts";
+
+const propertySetter: PropertySetter = {
+    flatten: {
+        fields: [
+            ...basicFieldsSetter,
+        ],
+    },
+};
+
+export default propertySetter;
--- a/src/modules/gstore/index.ts
+++ b/src/modules/gstore/index.ts
@ -1,15 +1,15 @@
 import { defineModule } from '@/core/manager/ModuleManager.ts'
 import GstoreRenderer from './GstoreRenderer.ts'
 import GstoreEntity from './GstoreEntity.ts'
-import GstoreMeta from './GstoreMeta.ts'
 import GstoreInteraction from './GstoreInteraction.ts'
+import propertySetter from "@/modules/gstore/GstorePropertySetter.ts";

 export const ITEM_TYPE_NAME = 'gstore'

 export default defineModule({
-  name: ITEM_TYPE_NAME,
-  renderer: new GstoreRenderer(ITEM_TYPE_NAME),
-  interaction: new GstoreInteraction(ITEM_TYPE_NAME),
-  meta: GstoreMeta,
-  entity: GstoreEntity
+    name: ITEM_TYPE_NAME,
+    renderer: new GstoreRenderer(ITEM_TYPE_NAME),
+    interaction: new GstoreInteraction(ITEM_TYPE_NAME),
+    setter: propertySetter,
+    entity: GstoreEntity,
 })
--- a/src/modules/measure/MeasureMeta.ts
+++ b/src/modules/measure/MeasureMeta.ts
@ -1,15 +0,0 @@
-import type { IMeta } from '@/core/base/IMeta.ts'
-
-const MeasureMeta: IMeta = [
-  { field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' },
-  { field: 'name', editor: 'TextInput', label: '名称', category: 'basic' },
-  { field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' },
-  { editor: 'TransformEditor', category: 'basic' },
-  { field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' },
-  { editor: '-', category: 'basic' },
-  { field: 'tf', editor: 'InOutCenterEditor', category: 'basic' },
-  { field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' },
-  { field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' },
-  { field: 'visible', editor: 'Switch', label: '可见', category: 'basic' }
-]
-export default MeasureMeta
--- a/src/modules/measure/MeasurePropertySetter.ts
+++ b/src/modules/measure/MeasurePropertySetter.ts
@ -0,0 +1,12 @@
+import type { PropertySetter } from "@/core/base/PropertyTypes.ts";
+import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts";
+
+const propertySetter: PropertySetter = {
+    flatten: {
+        fields: [
+            ...basicFieldsSetter,
+        ],
+    },
+};
+
+export default propertySetter;
--- a/src/modules/measure/index.ts
+++ b/src/modules/measure/index.ts
@ -1,15 +1,15 @@
 import { defineModule } from '@/core/manager/ModuleManager.ts'
 import MeasureRenderer from './MeasureRenderer.ts'
 import MeasureEntity from './MeasureEntity.ts'
-import MeasureMeta from './MeasureMeta.ts'
 import MeasureInteraction from './MeasureInteraction.ts'
+import propertySetter from "@/modules/measure/MeasurePropertySetter.ts";

 export const ITEM_TYPE_NAME = 'measure'

 export default defineModule({
-  name: ITEM_TYPE_NAME,
-  renderer: new MeasureRenderer(ITEM_TYPE_NAME),
-  interaction: new MeasureInteraction(ITEM_TYPE_NAME),
-  meta: MeasureMeta,
-  entity: MeasureEntity
+    name: ITEM_TYPE_NAME,
+    renderer: new MeasureRenderer(ITEM_TYPE_NAME),
+    interaction: new MeasureInteraction(ITEM_TYPE_NAME),
+    setter: propertySetter,
+    entity: MeasureEntity,
 })
--- a/src/modules/pallet/PalletMeta.ts
+++ b/src/modules/pallet/PalletMeta.ts
@ -1,49 +0,0 @@
-import type { IMeta } from '@/core/base/IMeta.ts'
-
-export default [
-  { field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' },
-  { field: 'name', editor: 'TextInput', label: '名称', category: 'basic' },
-  { field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' },
-  { editor: 'TransformEditor', category: 'basic' },
-  { field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' },
-  { editor: '-', category: 'basic' },
-
-  { field: 'dt.palletWidth', editor: 'NumberInput', label: '托盘深度', category: 'basic' },
-  { field: 'dt.palletDepth', editor: 'NumberInput', label: '托盘深度', category: 'basic' },
-  /**
-   * dt.bays 5列3层货架示例
-   * {
-   *   dt: {
-   *     rackDepth: 1.1, // 货架深度
-   *     levelCount: 3,  // 总层数
-   *     bayCount: 5,    // 总列数
-   *     hideFloor: false,  // 隐藏底板
-   *     extendColumns: true, // 扩展挡板
-   *     columnSpacing: 1, // 支脚跨越
-   *     bays: [  // 每列的配置
-   *       {
-   *         bayWidth: 1.6,  // 列的宽度
-   *         levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
-   *       },
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *     ]
-   *   }
-   * }
-   *
-   *
-   *
-   *
-   *
-   *
-   *
-   */
-
-
-  { field: 'tf', editor: 'InOutCenterEditor', category: 'basic' },
-  { field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' },
-  { field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' },
-  { field: 'visible', editor: 'Switch', label: '可见', category: 'basic' }
-] as IMeta
--- a/src/modules/pallet/PalletPropertySetter.ts
+++ b/src/modules/pallet/PalletPropertySetter.ts
@ -0,0 +1,20 @@
+import type { PropertySetter } from "@/core/base/PropertyTypes.ts";
+import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts";
+
+const propertySetter: PropertySetter = {
+    flatten: {
+        fields: [
+            ...basicFieldsSetter,
+            {
+                dataPath: 'dt.palletWidth', label: '托盘宽度', input: 'InputNumber',
+                inputProps: {},
+            },
+            {
+                dataPath: 'dt.palletDepth', label: '托盘深度', input: 'InputNumber',
+                inputProps: {},
+            },
+        ],
+    },
+};
+
+export default propertySetter;
--- a/src/modules/pallet/index.ts
+++ b/src/modules/pallet/index.ts
@ -1,15 +1,15 @@
 import { defineModule } from '@/core/manager/ModuleManager.ts'
 import PalletRenderer from './PalletRenderer.ts'
 import PalletEntity from './PalletEntity.ts'
-import PalletMeta from './PalletMeta.ts'
 import PalletInteraction from './PalletInteraction.ts'
+import propertySetter from "@/modules/pallet/PalletPropertySetter.ts";

 export const ITEM_TYPE_NAME = 'pallet'

 export default defineModule({
-  name: ITEM_TYPE_NAME,
-  renderer: new PalletRenderer(ITEM_TYPE_NAME),
-  interaction: new PalletInteraction(ITEM_TYPE_NAME),
-  meta: PalletMeta,
-  entity: PalletEntity
+    name: ITEM_TYPE_NAME,
+    renderer: new PalletRenderer(ITEM_TYPE_NAME),
+    interaction: new PalletInteraction(ITEM_TYPE_NAME),
+    setter: propertySetter,
+    entity: PalletEntity,
 })
--- a/src/modules/ptr/PtrMeta.ts
+++ b/src/modules/ptr/PtrMeta.ts
@ -1,49 +0,0 @@
-import type { IMeta } from '@/core/base/IMeta.ts'
-
-export default [
-  { field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' },
-  { field: 'name', editor: 'TextInput', label: '名称', category: 'basic' },
-  { field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' },
-  { editor: 'TransformEditor', category: 'basic' },
-  { field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' },
-  { editor: '-', category: 'basic' },
-
-  { field: 'dt.palletWidth', editor: 'NumberInput', label: '托盘深度', category: 'basic' },
-  { field: 'dt.palletDepth', editor: 'NumberInput', label: '托盘深度', category: 'basic' },
-  /**
-   * dt.bays 5列3层货架示例
-   * {
-   *   dt: {
-   *     rackDepth: 1.1, // 货架深度
-   *     levelCount: 3,  // 总层数
-   *     bayCount: 5,    // 总列数
-   *     hideFloor: false,  // 隐藏底板
-   *     extendColumns: true, // 扩展挡板
-   *     columnSpacing: 1, // 支脚跨越
-   *     bays: [  // 每列的配置
-   *       {
-   *         bayWidth: 1.6,  // 列的宽度
-   *         levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
-   *       },
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *     ]
-   *   }
-   * }
-   *
-   *
-   *
-   *
-   *
-   *
-   *
-   */
-
-
-  { field: 'tf', editor: 'InOutCenterEditor', category: 'basic' },
-  { field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' },
-  { field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' },
-  { field: 'visible', editor: 'Switch', label: '可见', category: 'basic' }
-] as IMeta
--- a/src/modules/ptr/PtrPropertySetter.ts
+++ b/src/modules/ptr/PtrPropertySetter.ts
@ -0,0 +1,20 @@
+import type { PropertySetter } from "@/core/base/PropertyTypes.ts";
+import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts";
+
+const propertySetter: PropertySetter = {
+    flatten: {
+        fields: [
+            ...basicFieldsSetter,
+            {
+                dataPath: 'dt.palletWidth', label: '托盘宽度', input: 'InputNumber',
+                inputProps: {},
+            },
+            {
+                dataPath: 'dt.palletDepth', label: '托盘深度', input: 'InputNumber',
+                inputProps: {},
+            },
+        ],
+    },
+};
+
+export default propertySetter;
--- a/src/modules/ptr/index.ts
+++ b/src/modules/ptr/index.ts
@ -1,15 +1,15 @@
 import { defineModule } from '@/core/manager/ModuleManager.ts'
 import PtrRenderer from './PtrRenderer.ts'
 import PtrEntity from './PtrEntity.ts'
-import PtrMeta from './PtrMeta.ts'
 import PtrInteraction from './PtrInteraction.ts'
+import propertySetter from "@/modules/ptr/PtrPropertySetter.ts";

 export const ITEM_TYPE_NAME = 'ptr'

 export default defineModule({
-  name: ITEM_TYPE_NAME,
-  renderer: new PtrRenderer(ITEM_TYPE_NAME),
-  interaction: new PtrInteraction(ITEM_TYPE_NAME),
-  meta: PtrMeta,
-  entity: PtrEntity
+    name: ITEM_TYPE_NAME,
+    renderer: new PtrRenderer(ITEM_TYPE_NAME),
+    interaction: new PtrInteraction(ITEM_TYPE_NAME),
+    setter: propertySetter,
+    entity: PtrEntity,
 })
--- a/src/modules/rack/RackMeta.ts
+++ b/src/modules/rack/RackMeta.ts
@ -1,55 +0,0 @@
-import type { IMeta } from '@/core/base/IMeta.ts'
-
-export default [
-  { field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' },
-  { field: 'name', editor: 'TextInput', label: '名称', category: 'basic' },
-  { field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' },
-  { editor: 'TransformEditor', category: 'basic' },
-  { field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' },
-  { editor: '-', category: 'basic' },
-
-
-  { field: 'dt.rackDepth', editor: 'NumberInput', label: '货架深度', category: 'basic' },
-  { field: 'dt.levelCount', editor: 'NumberInput', label: '总层数', category: 'basic' },
-  { field: 'dt.bayCount', editor: 'NumberInput', label: '总列数', category: 'basic' },
-  { field: 'dt.hideFloor', editor: 'NumberInput', label: '隐藏底板', category: 'basic' },
-  { field: 'dt.extendColumns', editor: 'NumberInput', label: '扩展挡板', category: 'basic' },
-  { field: 'dt.columnSpacing', editor: 'NumberInput', label: '支脚跨越', category: 'basic' },
-  { field: 'dt.bays', editor: 'BayEditor', category: 'basic' },
-  /**
-   * dt.bays 5列3层货架示例
-   * {
-   *   dt: {
-   *     rackDepth: 1.1, // 货架深度
-   *     levelCount: 3,  // 总层数
-   *     bayCount: 5,    // 总列数
-   *     hideFloor: false,  // 隐藏底板
-   *     extendColumns: true, // 扩展挡板
-   *     columnSpacing: 1, // 支脚跨越
-   *     bays: [  // 每列的配置
-   *       {
-   *         bayWidth: 1.6,  // 列的宽度
-   *         levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
-   *       },
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
-   *     ]
-   *   }
-   * }
-   *
-   *
-   *
-   *
-   *
-   *
-   *
-   */
-
-
-  { field: 'tf', editor: 'InOutCenterEditor', category: 'basic' },
-  { field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' },
-  { field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' },
-  { field: 'visible', editor: 'Switch', label: '可见', category: 'basic' }
-] as IMeta
--- a/src/modules/rack/RackPropertySetter.ts
+++ b/src/modules/rack/RackPropertySetter.ts
@ -0,0 +1,64 @@
+import type { PropertySetter } from "@/core/base/PropertyTypes.ts";
+import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts";
+
+const propertySetter: PropertySetter = {
+    flatten: {
+        fields: [
+            ...basicFieldsSetter,
+            {
+                dataPath: 'dt.rackDepth', label: '货架深度', input: 'InputNumber',
+                inputProps: {},
+            },
+            {
+                dataPath: 'dt.levelCount', label: '总层数', input: 'InputNumber',
+                inputProps: {},
+            },
+            {
+                dataPath: 'dt.bayCount', label: '总列数', input: 'InputNumber',
+                inputProps: {},
+            },
+            {
+                dataPath: 'dt.hideFloor', label: '隐藏底板', input: 'InputNumber',
+                inputProps: {},
+            },
+            {
+                dataPath: 'dt.extendColumns', label: '扩展挡板', input: 'InputNumber',
+                inputProps: {},
+            },
+            {
+                dataPath: 'dt.columnSpacing', label: '支脚跨越', input: 'InputNumber',
+                inputProps: {},
+            },
+            // {
+            //     dataPath: 'dt.bays', input: 'BayEditor',
+            //     inputProps: {
+            //     },
+            // },
+            /**
+             * dt.bays 5列3层货架示例
+             * {
+             *   dt: {
+             *     rackDepth: 1.1, // 货架深度
+             *     levelCount: 3,  // 总层数
+             *     bayCount: 5,    // 总列数
+             *     hideFloor: false,  // 隐藏底板
+             *     extendColumns: true, // 扩展挡板
+             *     columnSpacing: 1, // 支脚跨越
+             *     bays: [  // 每列的配置
+             *       {
+             *         bayWidth: 1.6,  // 列的宽度
+             *         levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
+             *       },
+             *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
+             *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
+             *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
+             *       {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
+             *     ]
+             *   }
+             * }
+             */
+        ],
+    },
+};
+
+export default propertySetter;
--- a/src/modules/rack/index.ts
+++ b/src/modules/rack/index.ts
@ -1,15 +1,15 @@
 import { defineModule } from '@/core/manager/ModuleManager.ts'
 import RackRenderer from './RackRenderer.ts'
 import RackEntity from './RackEntity.ts'
-import RackMeta from './RackMeta.ts'
 import RackInteraction from './RackInteraction.ts'
+import propertySetter from "@/modules/rack/RackPropertySetter.ts";

 export const ITEM_TYPE_NAME = 'rack'

 export default defineModule({
-  name: ITEM_TYPE_NAME,
-  renderer: new RackRenderer(ITEM_TYPE_NAME),
-  interaction: new RackInteraction(ITEM_TYPE_NAME),
-  meta: RackMeta,
-  entity: RackEntity
+    name: ITEM_TYPE_NAME,
+    renderer: new RackRenderer(ITEM_TYPE_NAME),
+    interaction: new RackInteraction(ITEM_TYPE_NAME),
+    setter: propertySetter,
+    entity: RackEntity,
 })
--- a/src/modules/way/WayMeta.ts
+++ b/src/modules/way/WayMeta.ts
@ -1,14 +0,0 @@
-import type { IMeta } from '@/core/base/IMeta.ts'
-
-export default [
-  { field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' },
-  { field: 'name', editor: 'TextInput', label: '名称', category: 'basic' },
-  { field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' },
-  { editor: 'TransformEditor', category: 'basic' },
-  { field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' },
-  { editor: '-', category: 'basic' },
-  { field: 'tf', editor: 'InOutCenterEditor', category: 'basic' },
-  { field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' },
-  { field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' },
-  { field: 'visible', editor: 'Switch', label: '可见', category: 'basic' }
-] as IMeta
--- a/src/modules/way/WayPropertySetter.ts
+++ b/src/modules/way/WayPropertySetter.ts
@ -0,0 +1,12 @@
+import type { PropertySetter } from "@/core/base/PropertyTypes.ts";
+import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts";
+
+const propertySetter: PropertySetter = {
+    flatten: {
+        fields: [
+            ...basicFieldsSetter,
+        ],
+    },
+};
+
+export default propertySetter;
--- a/src/modules/way/index.ts
+++ b/src/modules/way/index.ts
@ -1,15 +1,15 @@
 import { defineModule } from '@/core/manager/ModuleManager.ts'
 import WayRenderer from './WayRenderer.ts'
 import WayEntity from './WayEntity.ts'
-import WayMeta from './WayMeta.ts'
 import WayInteraction from './WayInteraction.ts'
+import propertySetter from "@/modules/way/WayPropertySetter.ts";

 export const ITEM_TYPE_NAME = 'way'

 export default defineModule({
-  name: ITEM_TYPE_NAME,
-  renderer: new WayRenderer(ITEM_TYPE_NAME),
-  interaction: new WayInteraction(ITEM_TYPE_NAME),
-  meta: WayMeta,
-  entity: WayEntity
+    name: ITEM_TYPE_NAME,
+    renderer: new WayRenderer(ITEM_TYPE_NAME),
+    interaction: new WayInteraction(ITEM_TYPE_NAME),
+    setter: propertySetter,
+    entity: WayEntity,
 })
--- a/src/pages/DataForm01.vue
+++ b/src/pages/DataForm01.vue
@ -2,7 +2,8 @@
 import { createVNode, getCurrentInstance, reactive, toRaw } from "vue";
 import { Format } from "@ease-forge/shared";
 import { createBlockComponent } from "@ease-forge/runtime";
-import DataForm, { type DataFormProps } from "@/components/data-form/DataForm.vue";
+import DataForm from "@/components/data-form/DataForm.vue";
+import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts";

 window.globalConfig.componentManage.registerComponent("DataForm", DataForm);