From b878d659e32bd0d4ff3644d8c788e314978eed7e Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Tue, 1 Jul 2025 10:30:56 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(data-form):=20=E6=96=B0=E5=A2=9E=20Rad?=
 =?UTF-8?q?ioGroup=20=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96=20DataF?=
 =?UTF-8?q?orm=20=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加自定义 RadioGroup 组件，支持 options 属性
- 更新 DataFormConstant，替换 Element Plus 的 ElRadioGroup 为自定义组件
- 新增 mergeExpose 函数，用于合并组件的 expose 对象
- 在 DataFormUtils 中添加新函数，增强组件合并功能
- 更新示例页面，展示 RadioGroup 组件的使用方法
---
 src/components/data-form/DataFormConstant.ts   |  4 +-
 src/components/data-form/DataFormUtils.tsx     | 45 ++++++++++++
 src/components/data-form/inputs/RadioGroup.vue | 96 ++++++++++++++++++++++++++
 src/pages/DataForm01.vue                       |  5 +-
 4 files changed, 147 insertions(+), 3 deletions(-)
 create mode 100644 src/components/data-form/inputs/RadioGroup.vue

diff --git a/src/components/data-form/DataFormConstant.ts b/src/components/data-form/DataFormConstant.ts
index d5d1768..539a2f7 100644
--- a/src/components/data-form/DataFormConstant.ts
+++ b/src/components/data-form/DataFormConstant.ts
@@ -11,7 +11,6 @@ import {
     ElInputTag,
     ElMention,
     ElRadio,
-    ElRadioGroup,
     ElRate,
     ElSelect,
     ElSelectV2,
@@ -23,6 +22,7 @@ import {
     ElTreeSelect,
     ElUpload,
 } from "element-plus";
+import RadioGroup from "./inputs/RadioGroup.vue";
 import type { DisplayMode } from "./DataFormTypes.ts";
 
 /** 内建的表单输入组件 */
@@ -32,7 +32,7 @@ const builtInInputComponents = {
     Checkbox: markRaw<any>(ElCheckbox),
     CheckboxGroup: markRaw<any>(ElCheckboxGroup),
     Radio: markRaw<any>(ElRadio),
-    RadioGroup: markRaw<any>(ElRadioGroup),
+    RadioGroup: markRaw<any>(RadioGroup),
     Switch: markRaw<any>(ElSwitch),
     Select: markRaw<any>(ElSelect),
     SelectV2: markRaw<any>(ElSelectV2),
diff --git a/src/components/data-form/DataFormUtils.tsx b/src/components/data-form/DataFormUtils.tsx
index 184c658..6356f07 100644
--- a/src/components/data-form/DataFormUtils.tsx
+++ b/src/components/data-form/DataFormUtils.tsx
@@ -1,4 +1,5 @@
 import lodash from "lodash";
+import { toRaw } from "vue";
 import { Typeof } from "@ease-forge/shared";
 
 /**
@@ -28,10 +29,54 @@ function dataPathToNamePath(dataPath: string): string | number | Array<string |
     return namePath;
 }
 
+// 空函数
+function _emptyFun() {
+}
+
+/**
+ * 合并vue组件的expose对象，会将sources中存在且expose中不存在的属性合并到expose对象
+ * @param expose    expose对象
+ * @param sources   原组件实例对象
+ * @param onlyFun   是否只合并函数
+ */
+function mergeExpose(expose: Record<string, any>, sources: any, onlyFun: boolean = false) {
+    if (!expose) return;
+    sources = toRaw(sources);
+    if (!sources || Typeof.isDate(sources) || Typeof.isArray(sources) || !Typeof.isObj(sources)) return;
+    // sources 是 dom 对象
+    if (sources instanceof HTMLElement || (sources.constructor?.name?.includes("HTML") && sources.constructor?.name?.includes("Element"))) {
+        expose.$el = sources;
+        return;
+    }
+    // 压制警告[Vue warn] Object.keys(sources)
+    const rawConsoleWarn = console.warn;
+    console.warn = _emptyFun;
+    let keys = Object.keys(sources);
+    console.warn = rawConsoleWarn;
+    // 处理 expose
+    for (let key of keys) {
+        const newValue = sources[key];
+        if (Typeof.noValue(newValue)) continue;
+        if (onlyFun && !Typeof.isFun(newValue)) continue;
+        expose[key] = newValue;
+    }
+    if (!onlyFun) {
+        // 处理 vue 组件内置属性
+        keys = ["$data", "$props", "$attrs", "$slots", "$refs", "$emit", "$on", "$off", "$once", "$forceUpdate", "$nextTick", "$watch", "$el", "$options", "$parent", "$root"];
+        for (let key of keys) {
+            const newValue = sources[key];
+            if (Typeof.noValue(newValue)) continue;
+            expose[key] = newValue;
+        }
+    }
+}
+
 export default {
     dataPathToNamePath,
+    mergeExpose,
 }
 
 export {
     dataPathToNamePath,
+    mergeExpose,
 }
diff --git a/src/components/data-form/inputs/RadioGroup.vue b/src/components/data-form/inputs/RadioGroup.vue
new file mode 100644
index 0000000..3788d5a
--- /dev/null
+++ b/src/components/data-form/inputs/RadioGroup.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import lodash from "lodash";
+import { computed, createVNode, defineExpose, onMounted, reactive, useAttrs, useSlots, useTemplateRef } from "vue";
+import { ElRadio, ElRadioGroup } from "element-plus";
+import { Typeof } from "@ease-forge/shared";
+import { mergeExpose } from "../DataFormUtils.tsx";
+
+defineOptions({
+    name: 'RadioGroup',
+});
+
+// 组件属性
+const attrs = useAttrs();
+// 组件插槽
+const slots = useSlots();
+
+interface OptionItem {
+    value: string | number | boolean;
+    label: string;
+
+    [key: string]: any;
+}
+
+// 定义 Props 类型
+interface RadioGroupProps {
+    options?: Array<OptionItem>;
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+    options: () => ([]),
+});
+
+// 定义 State 类型
+interface RadioGroupState {
+}
+
+// state 属性
+const state = reactive<RadioGroupState>({
+    loading: false,
+});
+// 输入组件实例
+const input = useTemplateRef<InstanceType<typeof ElRadioGroup>>("inputRef");
+// 选项数据
+const options = computed(() => {
+    let opts: Array<OptionItem> = [];
+    let options = props.options;
+    if (options) {
+        if (Typeof.isArray(options)) {
+            opts = options;
+        } else {
+            console.log("options 配置必须是数组类型");
+        }
+    }
+    return opts;
+});
+// 输入组件 props 属性
+const inputProps = computed<any>(() => {
+    const res: any = { ...attrs };
+    if (Typeof.hasValue(res.modelValue) && !Typeof.isStr(res.modelValue)) res.modelValue = lodash.toString(res.modelValue);
+    return res;
+});
+
+function toString(val: any) {
+    if (Typeof.hasValue(val) && !Typeof.isStr(val)) return lodash.toString(val);
+    return val;
+}
+
+const expose = {
+    /** 组件状态 */
+    state,
+};
+
+onMounted(() => {
+    if (input.value) mergeExpose(expose, input.value);
+});
+
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    OptionItem,
+    RadioGroupProps,
+    RadioGroupState,
+}
+</script>
+
+<template>
+    <component ref="inputRef" :is="createVNode(ElRadioGroup, inputProps, slots)">
+        <ElRadio v-for="(item, idx) in options" v-bind="item" :value="toString(item.value)"/>
+    </component>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/DataForm01.vue b/src/pages/DataForm01.vue
index 3469f80..d2d79a3 100644
--- a/src/pages/DataForm01.vue
+++ b/src/pages/DataForm01.vue
@@ -105,7 +105,10 @@ const dataForm1 = reactive<DataFormProps>({
         {
             dataPath: 'radio_group_1', label: '单选组', input: 'RadioGroup',
             inputProps: {
-                // TODO options
+                options: [
+                    { value: "001", label: "选项1" },
+                    { value: "002", label: "选项2" },
+                ],
             },
         },
         {

From b68ca72c4bc15187d38acf1291a61c778f23f547 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Tue, 1 Jul 2025 10:36:29 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat(data-form):=20=E6=B7=BB=E5=8A=A0=20Che?=
 =?UTF-8?q?ckboxGroup=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 CheckboxGroup 组件，用于数据表单中的复选框组
- 在 DataFormConstant 中替换原有的 ElCheckboxGroup 为自定义的 CheckboxGroup
- 在示例页面 DataForm01.vue 中添加 CheckboxGroup 组件的使用演示
---
 src/components/data-form/DataFormConstant.ts      |  4 +-
 src/components/data-form/inputs/CheckboxGroup.vue | 96 +++++++++++++++++++++++
 src/pages/DataForm01.vue                          |  5 +-
 3 files changed, 102 insertions(+), 3 deletions(-)
 create mode 100644 src/components/data-form/inputs/CheckboxGroup.vue

diff --git a/src/components/data-form/DataFormConstant.ts b/src/components/data-form/DataFormConstant.ts
index 539a2f7..c2dbf74 100644
--- a/src/components/data-form/DataFormConstant.ts
+++ b/src/components/data-form/DataFormConstant.ts
@@ -3,7 +3,6 @@ import {
     ElAutocomplete,
     ElCascader,
     ElCheckbox,
-    ElCheckboxGroup,
     ElColorPicker,
     ElDatePicker,
     ElInput,
@@ -22,6 +21,7 @@ import {
     ElTreeSelect,
     ElUpload,
 } from "element-plus";
+import CheckboxGroup from "./inputs/CheckboxGroup.vue";
 import RadioGroup from "./inputs/RadioGroup.vue";
 import type { DisplayMode } from "./DataFormTypes.ts";
 
@@ -30,7 +30,7 @@ const builtInInputComponents = {
     Input: markRaw<any>(ElInput),
     InputNumber: markRaw<any>(ElInputNumber),
     Checkbox: markRaw<any>(ElCheckbox),
-    CheckboxGroup: markRaw<any>(ElCheckboxGroup),
+    CheckboxGroup: markRaw<any>(CheckboxGroup),
     Radio: markRaw<any>(ElRadio),
     RadioGroup: markRaw<any>(RadioGroup),
     Switch: markRaw<any>(ElSwitch),
diff --git a/src/components/data-form/inputs/CheckboxGroup.vue b/src/components/data-form/inputs/CheckboxGroup.vue
new file mode 100644
index 0000000..a4b852c
--- /dev/null
+++ b/src/components/data-form/inputs/CheckboxGroup.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import lodash from "lodash";
+import { computed, createVNode, defineExpose, onMounted, reactive, useAttrs, useSlots, useTemplateRef } from "vue";
+import { ElCheckbox, ElCheckboxGroup } from "element-plus";
+import { Typeof } from "@ease-forge/shared";
+import { mergeExpose } from "../DataFormUtils.tsx";
+
+defineOptions({
+    name: 'CheckboxGroup',
+});
+
+// 组件属性
+const attrs = useAttrs();
+// 组件插槽
+const slots = useSlots();
+
+interface OptionItem {
+    value: string | number | boolean;
+    label: string;
+
+    [key: string]: any;
+}
+
+// 定义 Props 类型
+interface CheckboxGroupProps {
+    options?: Array<OptionItem>;
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<CheckboxGroupProps>(), {
+    options: () => ([]),
+});
+
+// 定义 State 类型
+interface CheckboxGroupState {
+}
+
+// state 属性
+const state = reactive<CheckboxGroupState>({
+    loading: false,
+});
+// 输入组件实例
+const input = useTemplateRef<InstanceType<typeof ElCheckboxGroup>>("inputRef");
+// 选项数据
+const options = computed(() => {
+    let opts: Array<OptionItem> = [];
+    let options = props.options;
+    if (options) {
+        if (Typeof.isArray(options)) {
+            opts = options;
+        } else {
+            console.log("options 配置必须是数组类型");
+        }
+    }
+    return opts;
+});
+// 输入组件 props 属性
+const inputProps = computed<any>(() => {
+    const res: any = { ...attrs };
+    if (Typeof.hasValue(res.modelValue) && !Typeof.isStr(res.modelValue)) res.modelValue = lodash.toString(res.modelValue);
+    return res;
+});
+
+function toString(val: any) {
+    if (Typeof.hasValue(val) && !Typeof.isStr(val)) return lodash.toString(val);
+    return val;
+}
+
+const expose = {
+    /** 组件状态 */
+    state,
+};
+
+onMounted(() => {
+    if (input.value) mergeExpose(expose, input.value);
+});
+
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    OptionItem,
+    CheckboxGroupProps,
+    CheckboxGroupState,
+}
+</script>
+
+<template>
+    <component ref="inputRef" :is="createVNode(ElCheckboxGroup, inputProps, slots)">
+        <ElCheckbox v-for="(item, idx) in options" v-bind="item" :value="toString(item.value)"/>
+    </component>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/DataForm01.vue b/src/pages/DataForm01.vue
index d2d79a3..c906567 100644
--- a/src/pages/DataForm01.vue
+++ b/src/pages/DataForm01.vue
@@ -93,7 +93,10 @@ const dataForm1 = reactive<DataFormProps>({
             dataPath: 'checkbox_group_1', label: '复选组', input: 'CheckboxGroup',
             inputProps: {
                 max: 2,
-                // TODO options
+                options: [
+                    { value: "001", label: "选项1" },
+                    { value: "v2", label: "选项2" },
+                ],
             },
         },
         {

From 0ab334402509a0b1f08476ce5a3b7905404b28a2 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Tue, 1 Jul 2025 10:39:49 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat(data-form):=20=E6=96=B0=E5=A2=9E=20Sel?=
 =?UTF-8?q?ect=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 Select 组件以支持下拉列表功能
- 在 DataFormConstant 中替换原有的 ElSelect 为自定义 Select
- 在示例页面 DataForm01 中添加 Select 组件的使用
---
 src/components/data-form/DataFormConstant.ts |  4 +-
 src/components/data-form/inputs/Select.vue   | 96 ++++++++++++++++++++++++++++
 src/pages/DataForm01.vue                     |  9 ++-
 3 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 src/components/data-form/inputs/Select.vue

diff --git a/src/components/data-form/DataFormConstant.ts b/src/components/data-form/DataFormConstant.ts
index c2dbf74..816963e 100644
--- a/src/components/data-form/DataFormConstant.ts
+++ b/src/components/data-form/DataFormConstant.ts
@@ -11,7 +11,6 @@ import {
     ElMention,
     ElRadio,
     ElRate,
-    ElSelect,
     ElSelectV2,
     ElSlider,
     ElSwitch,
@@ -23,6 +22,7 @@ import {
 } from "element-plus";
 import CheckboxGroup from "./inputs/CheckboxGroup.vue";
 import RadioGroup from "./inputs/RadioGroup.vue";
+import Select from "./inputs/Select.vue";
 import type { DisplayMode } from "./DataFormTypes.ts";
 
 /** 内建的表单输入组件 */
@@ -34,7 +34,7 @@ const builtInInputComponents = {
     Radio: markRaw<any>(ElRadio),
     RadioGroup: markRaw<any>(RadioGroup),
     Switch: markRaw<any>(ElSwitch),
-    Select: markRaw<any>(ElSelect),
+    Select: markRaw<any>(Select),
     SelectV2: markRaw<any>(ElSelectV2),
     DatePicker: markRaw<any>(ElDatePicker),
     TimePicker: markRaw<any>(ElTimePicker),
diff --git a/src/components/data-form/inputs/Select.vue b/src/components/data-form/inputs/Select.vue
new file mode 100644
index 0000000..48b8ab7
--- /dev/null
+++ b/src/components/data-form/inputs/Select.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import lodash from "lodash";
+import { computed, createVNode, defineExpose, onMounted, reactive, useAttrs, useSlots, useTemplateRef } from "vue";
+import { ElOption, ElSelect } from "element-plus";
+import { Typeof } from "@ease-forge/shared";
+import { mergeExpose } from "../DataFormUtils.tsx";
+
+defineOptions({
+    name: 'Select',
+});
+
+// 组件属性
+const attrs = useAttrs();
+// 组件插槽
+const slots = useSlots();
+
+interface OptionItem {
+    value: string | number | boolean;
+    label: string;
+
+    [key: string]: any;
+}
+
+// 定义 Props 类型
+interface SelectProps {
+    options?: Array<OptionItem>;
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<SelectProps>(), {
+    options: () => ([]),
+});
+
+// 定义 State 类型
+interface SelectState {
+}
+
+// state 属性
+const state = reactive<SelectState>({
+    loading: false,
+});
+// 输入组件实例
+const input = useTemplateRef<InstanceType<typeof ElSelect>>("inputRef");
+// 选项数据
+const options = computed(() => {
+    let opts: Array<OptionItem> = [];
+    let options = props.options;
+    if (options) {
+        if (Typeof.isArray(options)) {
+            opts = options;
+        } else {
+            console.log("options 配置必须是数组类型");
+        }
+    }
+    return opts;
+});
+// 输入组件 props 属性
+const inputProps = computed<any>(() => {
+    const res: any = { ...attrs };
+    if (Typeof.hasValue(res.modelValue) && !Typeof.isStr(res.modelValue)) res.modelValue = lodash.toString(res.modelValue);
+    return res;
+});
+
+function toString(val: any) {
+    if (Typeof.hasValue(val) && !Typeof.isStr(val)) return lodash.toString(val);
+    return val;
+}
+
+const expose = {
+    /** 组件状态 */
+    state,
+};
+
+onMounted(() => {
+    if (input.value) mergeExpose(expose, input.value);
+});
+
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    OptionItem,
+    SelectProps,
+    SelectState,
+}
+</script>
+
+<template>
+    <component ref="inputRef" :is="createVNode(ElSelect, inputProps, slots)">
+        <ElOption v-for="(item, idx) in options" v-bind="item" :value="toString(item.value)"/>
+    </component>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/DataForm01.vue b/src/pages/DataForm01.vue
index c906567..bb7023b 100644
--- a/src/pages/DataForm01.vue
+++ b/src/pages/DataForm01.vue
@@ -129,7 +129,14 @@ const dataForm1 = reactive<DataFormProps>({
             inputProps: {
                 placeholder: "请选择",
                 clearable: true,
-                // TODO options
+                options: [
+                    { value: "001", label: "选项1" },
+                    { value: "002", label: "选项2" },
+                    { value: "003", label: "选项3" },
+                    { value: "004", label: "选项4" },
+                    { value: "005", label: "选项5" },
+                    { value: "006", label: "选项6" },
+                ],
             },
         },
         {

From b1ab8ded43ed8fda7fd93dd03f0579be0c816fd0 Mon Sep 17 00:00:00 2001
From: luoyifan <luoyifan@qq.com>
Date: Tue, 1 Jul 2025 15:01:24 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=B1=9E=E6=80=A7=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=E5=BD=93=E5=89=8D=E6=89=80=E9=80=89=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/propEditors/IMetaProp.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/editor/propEditors/IMetaProp.ts b/src/editor/propEditors/IMetaProp.ts
index 9f66fc3..d34233c 100644
--- a/src/editor/propEditors/IMetaProp.ts
+++ b/src/editor/propEditors/IMetaProp.ts
@@ -28,6 +28,9 @@ export default defineComponent({
   computed: {
     object3D(): THREE.Object3D {
       return this.viewport.state.selectedObject
+    },
+    item(): ItemJson {
+      return this.viewport.state.selectedItem
     }
   }
-})
\ No newline at end of file
+})