将 FcDesigner 改成局部注册，减少包大小

src/plugins/formCreate/index.ts

@@ -17,7 +17,6 @@ import {
 
 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,
@@ -34,14 +33,11 @@ const components = [
   ElTabPane
 ]
 
+// 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
 export const setupFormCreate = (app: App<Element>) => {
   components.forEach((component) => {
     app.component(component.name, component)
   })
-
   formCreate.use(install)
-
   app.use(formCreate)
-
-  app.use(FcDesigner)
 }

src/views/bpm/form/formEditor.vue

@@ -1,13 +1,13 @@
 <template>
   <ContentWrap>
     <!-- 表单设计器 -->
-    <fc-designer ref="designer" height="780px">
+    <FcDesigner ref="designer" height="780px">
       <template #handle>
         <XButton type="primary" title="生成JSON" @click="showJson" />
         <XButton type="primary" title="生成Options" @click="showOption" />
         <XButton type="primary" :title="t('action.save')" @click="handleSave" />
       </template>
-    </fc-designer>
+    </FcDesigner>
     <Dialog :title="dialogTitle" v-model="dialogVisible1" maxHeight="600">
       <div ref="editor" v-if="dialogVisible1">
         <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
@@ -61,6 +61,7 @@ import { FormInstance } from 'element-plus'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import * as FormApi from '@/api/bpm/form'
+import FcDesigner from '@form-create/designer'
 import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
 // import { useClipboard } from '@vueuse/core'
 

src/views/infra/build/index.vue

@@ -12,17 +12,15 @@
         </div>
       </el-col>
       <el-col>
-        <fc-designer ref="designer" height="780px" />
+        <FcDesigner ref="designer" height="780px" />
       </el-col>
     </el-row>
     <Dialog :title="dialogTitle" v-model="dialogVisible" maxHeight="600">
       <div ref="editor" v-if="dialogVisible">
         <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
         <el-scrollbar height="580">
-          <div v-highlight>
+          <div>
-            <code class="hljs">
+            <pre><code class="hljs" v-html="highlightedCode(formData)"></code></pre>
-              {{ formValue }}
-            </code>
           </div>
         </el-scrollbar>
       </div>
@@ -31,8 +29,10 @@
   </ContentWrap>
 </template>
 <script setup lang="ts" name="Build">
+import FcDesigner from '@form-create/designer'
 import formCreate from '@form-create/element-ui'
 // import { useClipboard } from '@vueuse/core'
+import { isString } from '@/utils/is'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -97,6 +97,34 @@ const copy = async (text: string) => {
   oInput.remove()
 }
 
+/**
+ * 代码高亮
+ */
+import hljs from 'highlight.js' // 导入代码高亮文件
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+import xml from 'highlight.js/lib/languages/java'
+import json from 'highlight.js/lib/languages/json'
+const highlightedCode = (code) => {
+  // 处理语言和代码
+  let language = 'json'
+  if (formType.value === 2) {
+    language = 'xml'
+  }
+  if (!isString(code)) {
+    code = JSON.stringify(code)
+  }
+  // 高亮
+  const result = hljs.highlight(language, code, true)
+  return result.value || '&nbsp;'
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('xml', xml)
+  hljs.registerLanguage('json', json)
+})
+
 const makeTemplate = () => {
   const rule = designer.value.getRule()
   const opt = designer.value.getOption()