refactor(yvan-lcc):优化 DataForm 组件的使用和数据传递

- 使用 getCurrentInstance() 获取当前组件实例
- 用 toRaw(data) 替代直接传递 reactive data
- 创建 VNode 以更灵活地使用 DataForm 组件
- 调整对话框中 DataForm 的属性传递方式
- 移除不必要的 $forceUpdate() 调用

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();
 }