From c72f11cc5beb78613d055345624e122231b2f574 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Thu, 5 Jun 2025 18:18:27 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(runtime):=20=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E5=85=A8=E5=B1=80=E9=85=8D=E7=BD=AE=E5=B9=B6=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=20DataForm=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 main.ts 中添加 initGlobalConfig 和 initGlobalConfigWithRuntime 初始化函数
- 在 DataForm01.vue 中注册 DataForm 组件并创建测试按钮
- 实现了将 reactive 数据转换为普通对象并传递给对话框的功能
---
 src/main.ts              |   5 ++
 src/pages/DataForm01.vue | 159 +++++++++++++++++++++++++++++------------------
 2 files changed, 105 insertions(+), 59 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 4710dc8..b60708d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,8 @@ import router from './router'
 import * as webIndex from '@/components/webindex'
 import { directive, menusEvent, Vue3Menus } from 'vue3-menus'
 import ElementPlus from 'element-plus'
+import { initGlobalConfig } from "@ease-forge/shared";
+import { initGlobalConfigWithRuntime } from "@ease-forge/runtime";
 import System from '@/runtime/System'
 
 import 'ag-grid-community/styles/ag-grid.css'
@@ -13,6 +15,9 @@ import 'ag-grid-community/styles/ag-theme-alpine.css'
 import 'element-plus/dist/index.css'
 import './main.less'
 
+initGlobalConfig();
+initGlobalConfigWithRuntime();
+
 const app = createApp(App)
 
 app.use(createPinia())
diff --git a/src/pages/DataForm01.vue b/src/pages/DataForm01.vue
index 1160450..a515fe8 100644
--- a/src/pages/DataForm01.vue
+++ b/src/pages/DataForm01.vue
@@ -1,64 +1,68 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { 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";
 
+window.globalConfig.componentManage.registerComponent("DataForm", DataForm);
+
+const data = reactive({
+    str: "abcABC",
+    num_1: 123,
+    checkbox_1: true,
+    checkbox_group_1: ["v2"],
+    radio_1: false,
+    radio_group_1: "v2",
+    switch_1: false,
+    select_1: "006",
+    select_2: "006",
+    date_1: "2025-02-03",
+    date_2: Format.toDayjs("2025-02-03").toDate(),
+    time_1: "08:30:00",
+    time_select_1: "08:30:00",
+    cascader_1: ["wh"],
+    tree_select_1: "wh",
+    autocomplete: "汤磊",
+    tags_1: ["DEV"],
+    color_1: "#CA4343",
+    slider_1: 80,
+    rate_1: 3.5,
+    mentions_1: "abc @bj ABC",
+    transfer_1: ["v1", "v2"],
+    upload_1: [
+        {
+            name: 'image.png',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        },
+        {
+            uid: '-2',
+            name: 'image.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        },
+        {
+            uid: '-3',
+            percent: 50,
+            name: 'image.png',
+            status: 'uploading',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        },
+        {
+            uid: '-5',
+            name: 'image.png',
+            status: 'error',
+        },
+    ],
+    password: "2025fff",
+    textarea: [
+        "蛇衔春色千山秀",
+        "龙舞祥光万户新",
+        "福满人间",
+        "属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数"
+    ].join("\n"),
+});
+
 const dataForm1 = reactive<DataFormProps>({
-    data: {
-        str: "abcABC",
-        num_1: 123,
-        checkbox_1: true,
-        checkbox_group_1: ["v2"],
-        radio_1: false,
-        radio_group_1: "v2",
-        switch_1: false,
-        select_1: "006",
-        select_2: "006",
-        date_1: "2025-02-03",
-        date_2: Format.toDayjs("2025-02-03").toDate(),
-        time_1: "08:30:00",
-        time_select_1: "08:30:00",
-        cascader_1: ["wh"],
-        tree_select_1: "wh",
-        autocomplete: "汤磊",
-        tags_1: ["DEV"],
-        color_1: "#CA4343",
-        slider_1: 80,
-        rate_1: 3.5,
-        mentions_1: "abc @bj ABC",
-        transfer_1: ["v1", "v2"],
-        upload_1: [
-            {
-                name: 'image.png',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-2',
-                name: 'image.png',
-                status: 'done',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-3',
-                percent: 50,
-                name: 'image.png',
-                status: 'uploading',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-5',
-                name: 'image.png',
-                status: 'error',
-            },
-        ],
-        password: "2025fff",
-        textarea: [
-            "蛇衔春色千山秀",
-            "龙舞祥光万户新",
-            "福满人间",
-            "属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数"
-        ].join("\n"),
-    },
     formFields: [
         {
             dataPath: 'str', label: '字符串', input: 'Input',
@@ -358,22 +362,59 @@ const dataForm1 = reactive<DataFormProps>({
     layout: "onlyLabelFixed",
 });
 
+const MyDataForm = createBlockComponent({
+    block: true,
+    type: "DataForm",
+    data: {
+        data: toRaw(data),
+    },
+    props: {
+        style: {
+            overflowY: "auto",
+        },
+        data: "{{ data }}",
+        formFields: dataForm1.formFields,
+        columnCount: dataForm1.columnCount,
+        layout: dataForm1.layout,
+        labelWidth: "100px",
+    },
+}, {
+    componentManage: window.globalConfig.componentManage,
+});
+
+function test() {
+    system.showDialog(MyDataForm, {
+        title: '模型查看器',
+        width: 950,
+        height: 400,
+        showClose: true,
+        showMax: true,
+        showCancelButton: false,
+        showOkButton: true,
+    }).then(() => {
+        console.log("data", data);
+    }).finally();
+}
+
 </script>
 
 <template>
+    <div>
+        <button @click="test">测试</button>
+    </div>
     <div class="flex-row-container" style="column-gap: 12px;height: calc(100% - 30px);">
         <DataForm
             class="flex-item-fixed"
             style="width: 900px;height: 100%; overflow-y: auto;border: 1px solid #ccc;padding: 6px"
-            :data="dataForm1.data"
+            :data="data"
             :formFields="dataForm1.formFields"
             :columnCount="dataForm1.columnCount"
             :layout="dataForm1.layout"
             labelWidth="100px"
             inputWidth=""
-            :colon="true"
         />
-        <pre class="flex-item-fill" style="overflow-y: auto;" lang="json">{{ JSON.stringify(dataForm1.data, null, 4) }}</pre>
+        <!--<MyDataForm class="flex-item-fixed" style="width: 900px;height: 100%; overflow-y: auto;border: 1px solid #ccc;padding: 6px"/>-->
+        <pre class="flex-item-fill" style="overflow-y: auto;" lang="json">{{ JSON.stringify(data, null, 4) }}</pre>
     </div>
     <div style="height: 24px;"/>
 </template>

From 51c2b39277d53be7fed27d637e9bc3998b13ae86 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Thu, 5 Jun 2025 18:21:53 +0800
Subject: [PATCH 2/4] =?UTF-8?q?refactor(components):=20=E7=AE=80=E5=8C=96?=
 =?UTF-8?q?=20ShowDialogWrap=20=E7=BB=84=E4=BB=B6=E7=9A=84=20onOkHandle=20?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除了对子组件 okClick 方法的复杂调用逻辑
- 直接调用 onOk 方法并传入 null 作为参数
- 这种简化使代码更加清晰，并且减少了潜在的错误和复杂性
---
 src/components/ShowDialogWrap.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/ShowDialogWrap.vue b/src/components/ShowDialogWrap.vue
index 509352e..f2241dc 100644
--- a/src/components/ShowDialogWrap.vue
+++ b/src/components/ShowDialogWrap.vue
@@ -25,7 +25,6 @@
 </template>
 <script>
 import _ from 'lodash'
-import { markRaw } from 'vue'
 import ElementDialogResize from '@/components/element-dialog-resize'
 
 export default {
@@ -74,12 +73,7 @@ export default {
       })
     },
     onOkHandle() {
-      if (typeof this.$refs.childCmpRef['okClick'] === 'function') {
-        const data = this.$refs.childCmpRef['okClick']()
-        if (data) {
-          this.onOk(data)
-        }
-      }
+        this.onOk(null)
     },
     onClose() {
       this.isShow = false

From 7ee684033d372519a75718425a799dee19338ac1 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Thu, 5 Jun 2025 18:30:33 +0800
Subject: [PATCH 3/4] =?UTF-8?q?refactor(yvan-lcc):=E4=BC=98=E5=8C=96=20Dat?=
 =?UTF-8?q?aForm=20=E7=BB=84=E4=BB=B6=E7=9A=84=E4=BD=BF=E7=94=A8=E5=92=8C?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=BC=A0=E9=80=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 getCurrentInstance() 获取当前组件实例
- 用 toRaw(data) 替代直接传递 reactive data
- 创建 VNode 以更灵活地使用 DataForm 组件
- 调整对话框中 DataForm 的属性传递方式
- 移除不必要的 $forceUpdate() 调用
---
 src/pages/DataForm01.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/pages/DataForm01.vue b/src/pages/DataForm01.vue
index a515fe8..ab4f712 100644
--- a/src/pages/DataForm01.vue
+++ b/src/pages/DataForm01.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { reactive, toRaw } from "vue";
+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";
 
 window.globalConfig.componentManage.registerComponent("DataForm", DataForm);
 
+// 当前组件对象
+const instance = getCurrentInstance();
+
 const data = reactive({
     str: "abcABC",
     num_1: 123,
@@ -372,7 +375,8 @@ const MyDataForm = createBlockComponent({
         style: {
             overflowY: "auto",
         },
-        data: "{{ data }}",
+        // data: "{{ data }}",
+        data: toRaw(data),
         formFields: dataForm1.formFields,
         columnCount: dataForm1.columnCount,
         layout: dataForm1.layout,
@@ -383,7 +387,16 @@ const MyDataForm = createBlockComponent({
 });
 
 function test() {
-    system.showDialog(MyDataForm, {
+    system.showDialog(createVNode(DataForm, {
+        style: {
+            overflowY: "auto",
+        },
+        data: toRaw(data),
+        formFields: dataForm1.formFields,
+        columnCount: dataForm1.columnCount,
+        layout: dataForm1.layout,
+        labelWidth: "100px",
+    }), {
         title: '模型查看器',
         width: 950,
         height: 400,
@@ -393,6 +406,7 @@ function test() {
         showOkButton: true,
     }).then(() => {
         console.log("data", data);
+        // instance?.proxy.$forceUpdate();
     }).finally();
 }
 

From eca71b2d534ffca90bf83ae64292c8f4dea6e3d2 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Thu, 5 Jun 2025 18:40:21 +0800
Subject: [PATCH 4/4] =?UTF-8?q?style(yvan-lcc):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6=E4=B8=AD?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9=E5=99=A8=E5=92=8C=E7=BA=A7?=
 =?UTF-8?q?=E8=81=94=E9=80=89=E6=8B=A9=E5=99=A8=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 设置日期选择器和普通输入框的宽度为 100%
- 设置级联选择器的宽度为 100%
---
 src/components/data-form/DataForm.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/data-form/DataForm.vue b/src/components/data-form/DataForm.vue
index e49d975..bb2a871 100644
--- a/src/components/data-form/DataForm.vue
+++ b/src/components/data-form/DataForm.vue
@@ -461,7 +461,12 @@ export type {
 }
 
 .data-form :deep(.el-date-editor) {
-    --el-date-editor-width: unset;
+    --el-input-width: 100%;
+    --el-date-editor-width: 100%;
+}
+
+.data-form :deep(.el-cascader) {
+    width: 100%;
 }
 
 .data-form-row {