feat: 引入表单构造器

yudao-ui-admin-vue3/src/main.ts

@@ -13,12 +13,15 @@ import { setupStore } from '@/store'
 // 全局组件
 import { setupGlobCom } from '@/components'
 
-// 引入element-plus
+// 引入 element-plus
 import { setupElementPlus } from '@/plugins/elementPlus'
 
-// 引入vxe-table
+// 引入 vxe-table
 import { setupVxeTable } from '@/plugins/vxeTable'
 
+// 引入 form-create
+import { setupFormCreate } from '@/plugins/formCreate'
+
 // 引入全局样式
 import '@/styles/index.scss'
 
@@ -39,6 +42,7 @@ import './permission'
 
 import { isDevMode } from '@/utils/env'
 
+// 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度
 if (isDevMode()) {
   console.info(isDevMode())
   import('element-plus/dist/index.css')
@@ -58,6 +62,8 @@ const setupAll = async () => {
 
   setupVxeTable(app)
 
+  setupFormCreate(app)
+
   setupRouter(app)
 
   setupAuth(app)

yudao-ui-admin-vue3/src/plugins/formCreate/index.ts

@@ -0,0 +1,43 @@
+import type { App } from 'vue'
+// 👇使用 form-create 需额外全局引入 element plus 组件
+import {
+  ElAside,
+  ElPopconfirm,
+  ElHeader,
+  ElMain,
+  ElContainer,
+  ElDivider,
+  ElTransfer,
+  ElAlert,
+  ElTabs,
+  ElTabPane
+} from 'element-plus'
+
+import formCreate from '@form-create/element-ui'
+import install from '@form-create/element-ui/auto-import'
+import FcDesigner from '@form-create/designer'
+
+const components = [
+  ElAside,
+  ElPopconfirm,
+  ElHeader,
+  ElMain,
+  ElContainer,
+  ElDivider,
+  ElTransfer,
+  ElAlert,
+  ElTabs,
+  ElTabPane
+]
+
+export const setupFormCreate = (app: App<Element>) => {
+  components.forEach((component) => {
+    app.component(component.name, component)
+  })
+
+  formCreate.use(install)
+
+  app.use(formCreate)
+
+  app.use(FcDesigner)
+}

yudao-ui-admin-vue3/src/views/infra/build/index.vue

@@ -1,4 +1,8 @@
 <template>
-  <div>index</div>
+  <ContentWrap>
+    <fc-designer ref="designer" height="780px" />
+  </ContentWrap>
 </template>
-<script setup lang="ts" name="Build"></script>
+<script setup lang="ts" name="Build">
+const designer = ref()
+</script>