feat: json格式化

package.json

@@ -39,6 +39,7 @@
     "element-plus": "2.3.4",
     "everright-filter": "^1.1.1",
     "js-md5": "^0.7.3",
+    "json-editor-vue3": "^1.0.8",
     "jss": "^10.9.2",
     "jss-preset-default": "^10.9.2",
     "lodash-es": "^4.17.21",
@@ -56,13 +57,12 @@
     "vant": "^4.0.8",
     "vite-svg-loader": "^4.0.0",
     "vue": "^3.4.26",
+    "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.2.2",
     "vue-ls": "^4.2.0",
     "vue-router": "^4.2.1",
     "vuedraggable": "^4.1.0",
-    "webpack": "^5.91.0",
-		"json-editor-vue3": "^1.0.8",
-		"vue-clipboard3": "^2.0.0"
+    "webpack": "^5.91.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
@@ -110,8 +110,9 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.6.5"
-  },
+    "vue-tsc": "^1.6.5",
+		"@originjs/vite-plugin-commonjs": "^1.0.3"
+	},
   "engines": {
     "node": ">=16.0.0"
   }

src/views/flow/create/components/FlowDesign.vue

@@ -1,5 +1,6 @@
 <script setup name="FlowDesign">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import JsonEditorVue from 'json-editor-vue3'
 import ScWorkflow from '@/components/scWorkflow'
 import useFlowStore from '@/store/modules/flow'
 import useClipboard from 'vue-clipboard3'
@@ -11,6 +12,7 @@ const { toClipboard } = useClipboard()
 
 const formRef = ref()
 const drawer = ref(false)
+const jsonFormat = ref({})
 
 let form = ref({
 	processConfig: {
@@ -33,13 +35,24 @@ const updateCompInfo = () => {
 }
 
 const copyParseJson = async () => {
-	await toClipboard(JSON.stringify(data.value, null, '  '))
+	await toClipboard(JSON.stringify(jsonFormat.value, null, '  '))
 }
 
 const copyJson = async () => {
-	await toClipboard(JSON.stringify(data.value))
+	await toClipboard(JSON.stringify(jsonFormat.value))
 }
 
+watch(
+	() => form.value.processConfig,
+	value => {
+		jsonFormat.value = form.value.processConfig
+	},
+	{
+		// 初始化立即执行
+		immediate: true
+	}
+)
+
 const validate = () => {
 	// 保存表单设计
 	saveDesign()
@@ -63,7 +76,7 @@ defineExpose({
 
 <template>
 	<div>
-		<div style="z-index: 999;display: none;" class="fixed top-44 right-20">
+		<div style="z-index: 999" class="fixed top-44 right-48">
 			<el-button type="primary" @click="() => (drawer = true)"> 查看 JSON </el-button>
 		</div>
 
@@ -72,8 +85,7 @@ defineExpose({
 		<el-drawer v-model="drawer" size="500px" class="drawer" :append-to-body="true" :modal="false" :with-header="false">
 			<div style="height: 100vh">
 				<div style="padding: 1px; background-color: #3883fa">
-					<el-button type="primary" plain @click="copyParseJson"> 复制格式化后的 JSON </el-button>
-					<el-button type="primary" plain @click="copyJson"> 复制压缩后的 JSON </el-button>
+					<el-button type="primary" plain @click="copyParseJson"> 复制 JSON </el-button>
 					<el-button type="primary" plain @click="drawer = false"> 关闭弹窗 </el-button>
 				</div>
 				<json-editor-vue v-model="form.processConfig" class="editor" language="zh-CN" current-mode="view" />

vite.config.ts

@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import svgLoader from 'vite-svg-loader'
 // import eslintPlugin from 'vite-plugin-eslint'
+import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
@@ -23,7 +24,7 @@ const examplePlugin = () => {
 
 	return {
 		name: 'custom-vuedraggableAndSortable',
-		transform (code, id) {
+		transform(code, id) {
 			/*eslint-disable*/
 			if (isProduction) {
 				if (/vuedraggable\.js/.test(id)) {
@@ -141,7 +142,8 @@ export default defineConfig(({ mode /*command,*/ }: ConfigEnv): UserConfig => {
 				// 指定symbolId格式
 				symbolId: 'icon-[dir]-[name]'
 			}),
-			svgLoader()
+			svgLoader(),
+			viteCommonjs()
 		]
 	}
 })