feat(runtime): 初始化全局配置并测试 DataForm 组件

- 在 main.ts 中添加 initGlobalConfig 和 initGlobalConfigWithRuntime 初始化函数
- 在 DataForm01.vue 中注册 DataForm 组件并创建测试按钮
- 实现了将 reactive 数据转换为普通对象并传递给对话框的功能

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

src/pages/DataForm01.vue

@@ -1,10 +1,12 @@
 <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";
 
-const dataForm1 = reactive<DataFormProps>({
-    data: {
+window.globalConfig.componentManage.registerComponent("DataForm", DataForm);
+
+const data = reactive({
     str: "abcABC",
     num_1: 123,
     checkbox_1: true,
@@ -58,7 +60,9 @@ const dataForm1 = reactive<DataFormProps>({
         "福满人间",
         "属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数"
     ].join("\n"),
-    },
+});
+
+const dataForm1 = reactive<DataFormProps>({
     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>