将 tool 合并到 infra 模块

yudao-ui-admin/src/views/infra/build/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    // 取消开始的loading动画
+    const preLoader = document.querySelector('#pre-loader')
+    preLoader.style.display = 'none'
+
+    // fix: firefox 下 拖拽 会新打卡一个选项卡
+    // https://github.com/JakHuang/form-generator/issues/15
+    document.body.ondrop = event => {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  }
+}
+</script>

yudao-ui-admin/src/views/infra/build/CodeTypeDialog.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <el-dialog
+      v-bind="$attrs"
+      width="500px"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <el-row :gutter="15">
+        <el-form
+          ref="elForm"
+          :model="formData"
+          :rules="rules"
+          size="medium"
+          label-width="100px"
+        >
+          <el-col :span="24">
+            <el-form-item label="生成类型" prop="type">
+              <el-radio-group v-model="formData.type">
+                <el-radio-button
+                  v-for="(item, index) in typeOptions"
+                  :key="index"
+                  :label="item.value"
+                  :disabled="item.disabled"
+                >
+                  {{ item.label }}
+                </el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="showFileName" label="文件名" prop="fileName">
+              <el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+
+      <div slot="footer">
+        <el-button @click="close">
+          取消
+        </el-button>
+        <el-button type="primary" @click="handelConfirm">
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  inheritAttrs: false,
+  props: ['showFileName'],
+  data() {
+    return {
+      formData: {
+        fileName: undefined,
+        type: 'file'
+      },
+      rules: {
+        fileName: [{
+          required: true,
+          message: '请输入文件名',
+          trigger: 'blur'
+        }],
+        type: [{
+          required: true,
+          message: '生成类型不能为空',
+          trigger: 'change'
+        }]
+      },
+      typeOptions: [{
+        label: '页面',
+        value: 'file'
+      }, {
+        label: '弹窗',
+        value: 'dialog'
+      }]
+    }
+  },
+  computed: {
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      if (this.showFileName) {
+        this.formData.fileName = `${+new Date()}.vue`
+      }
+    },
+    onClose() {
+    },
+    close(e) {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs.elForm.validate(valid => {
+        if (!valid) return
+        this.$emit('confirm', { ...this.formData })
+        this.close()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

yudao-ui-admin/src/views/infra/build/DraggableItem.vue

@@ -0,0 +1,120 @@
+<script>
+import draggable from 'vuedraggable'
+import render from '@/components/render/render'
+
+const components = {
+  itemBtns(h, currentItem, index, list) {
+    const { copyItem, deleteItem } = this.$listeners
+    return [
+      <span class="drawing-item-copy" title="复制" onClick={event => {
+        copyItem(currentItem, list); event.stopPropagation()
+      }}>
+        <i class="el-icon-copy-document" />
+      </span>,
+      <span class="drawing-item-delete" title="删除" onClick={event => {
+        deleteItem(index, list); event.stopPropagation()
+      }}>
+        <i class="el-icon-delete" />
+      </span>
+    ]
+  }
+}
+const layouts = {
+  colFormItem(h, currentItem, index, list) {
+    const { activeItem } = this.$listeners
+    const config = currentItem.__config__
+    const child = renderChildren.apply(this, arguments)
+    let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item'
+    if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
+    let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
+    if (config.showLabel === false) labelWidth = '0'
+    return (
+      <el-col span={config.span} class={className}
+        nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
+        <el-form-item label-width={labelWidth}
+          label={config.showLabel ? config.label : ''} required={config.required}>
+          <render key={config.renderKey} conf={currentItem} onInput={ event => {
+            this.$set(config, 'defaultValue', event)
+          }}>
+            {child}
+          </render>
+        </el-form-item>
+        {components.itemBtns.apply(this, arguments)}
+      </el-col>
+    )
+  },
+  rowFormItem(h, currentItem, index, list) {
+    const { activeItem } = this.$listeners
+    const config = currentItem.__config__
+    const className = this.activeId === config.formId
+      ? 'drawing-row-item active-from-item'
+      : 'drawing-row-item'
+    let child = renderChildren.apply(this, arguments)
+    if (currentItem.type === 'flex') {
+      child = <el-row type={currentItem.type} justify={currentItem.justify} align={currentItem.align}>
+              {child}
+            </el-row>
+    }
+    return (
+      <el-col span={config.span}>
+        <el-row gutter={config.gutter} class={className}
+          nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
+          <span class="component-name">{config.componentName}</span>
+          <draggable list={config.children || []} animation={340}
+            group="componentsGroup" class="drag-wrapper">
+            {child}
+          </draggable>
+          {components.itemBtns.apply(this, arguments)}
+        </el-row>
+      </el-col>
+    )
+  },
+  raw(h, currentItem, index, list) {
+    const config = currentItem.__config__
+    const child = renderChildren.apply(this, arguments)
+    return <render key={config.renderKey} conf={currentItem} onInput={ event => {
+      this.$set(config, 'defaultValue', event)
+    }}>
+      {child}
+    </render>
+  }
+}
+
+function renderChildren(h, currentItem, index, list) {
+  const config = currentItem.__config__
+  if (!Array.isArray(config.children)) return null
+  return config.children.map((el, i) => {
+    const layout = layouts[el.__config__.layout]
+    if (layout) {
+      return layout.call(this, h, el, i, config.children)
+    }
+    return layoutIsNotFound.call(this)
+  })
+}
+
+function layoutIsNotFound() {
+  throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`)
+}
+
+export default {
+  components: {
+    render,
+    draggable
+  },
+  props: [
+    'currentItem',
+    'index',
+    'drawingList',
+    'activeId',
+    'formConf'
+  ],
+  render(h) {
+    const layout = layouts[this.currentItem.__config__.layout]
+
+    if (layout) {
+      return layout.call(this, h, this.currentItem, this.index, this.drawingList)
+    }
+    return layoutIsNotFound.call(this)
+  }
+}
+</script>

yudao-ui-admin/src/views/infra/build/FormDrawer.vue

@@ -0,0 +1,331 @@
+<template>
+  <div>
+    <el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
+      <div style="height:100%">
+        <el-row style="height:100%;overflow:auto">
+          <el-col :md="24" :lg="12" class="left-editor">
+            <div class="setting" title="资源引用" @click="showResource">
+              <el-badge :is-dot="!!resources.length" class="item">
+                <i class="el-icon-setting" />
+              </el-badge>
+            </div>
+            <el-tabs v-model="activeTab" type="card" class="editor-tabs">
+              <el-tab-pane name="html">
+                <span slot="label">
+                  <i v-if="activeTab==='html'" class="el-icon-edit" />
+                  <i v-else class="el-icon-document" />
+                  template
+                </span>
+              </el-tab-pane>
+              <el-tab-pane name="js">
+                <span slot="label">
+                  <i v-if="activeTab==='js'" class="el-icon-edit" />
+                  <i v-else class="el-icon-document" />
+                  script
+                </span>
+              </el-tab-pane>
+              <el-tab-pane name="css">
+                <span slot="label">
+                  <i v-if="activeTab==='css'" class="el-icon-edit" />
+                  <i v-else class="el-icon-document" />
+                  css
+                </span>
+              </el-tab-pane>
+            </el-tabs>
+            <div v-show="activeTab==='html'" id="editorHtml" class="tab-editor" />
+            <div v-show="activeTab==='js'" id="editorJs" class="tab-editor" />
+            <div v-show="activeTab==='css'" id="editorCss" class="tab-editor" />
+          </el-col>
+          <el-col :md="24" :lg="12" class="right-preview">
+            <div class="action-bar" :style="{'text-align': 'left'}">
+              <span class="bar-btn" @click="runCode">
+                <i class="el-icon-refresh" />
+                刷新
+              </span>
+              <span class="bar-btn" @click="exportFile">
+                <i class="el-icon-download" />
+                导出vue文件
+              </span>
+              <span ref="copyBtn" class="bar-btn copy-btn">
+                <i class="el-icon-document-copy" />
+                复制代码
+              </span>
+              <span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
+                <i class="el-icon-circle-close" />
+                关闭
+              </span>
+            </div>
+            <iframe
+              v-show="isIframeLoaded"
+              ref="previewPage"
+              class="result-wrapper"
+              frameborder="0"
+              src="preview.html"
+              @load="iframeLoad"
+            />
+            <div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper" />
+          </el-col>
+        </el-row>
+      </div>
+    </el-drawer>
+    <resource-dialog
+      :visible.sync="resourceVisible"
+      :origin-resource="resources"
+      @save="setResource"
+    />
+  </div>
+</template>
+<script>
+import { parse } from '@babel/parser'
+import ClipboardJS from 'clipboard'
+import { saveAs } from 'file-saver'
+import {
+  makeUpHtml, vueTemplate, vueScript, cssStyle
+} from '@/components/generator/html'
+import { makeUpJs } from '@/components/generator/js'
+import { makeUpCss } from '@/components/generator/css'
+import { exportDefault, beautifierConf, titleCase } from '@/utils/index'
+import ResourceDialog from './ResourceDialog'
+import loadMonaco from '@/utils/loadMonaco'
+import loadBeautifier from '@/utils/loadBeautifier'
+
+const editorObj = {
+  html: null,
+  js: null,
+  css: null
+}
+const mode = {
+  html: 'html',
+  js: 'javascript',
+  css: 'css'
+}
+let beautifier
+let monaco
+
+export default {
+  components: { ResourceDialog },
+  props: ['formData', 'generateConf'],
+  data() {
+    return {
+      activeTab: 'html',
+      htmlCode: '',
+      jsCode: '',
+      cssCode: '',
+      codeFrame: '',
+      isIframeLoaded: false,
+      isInitcode: false, // 保证open后两个异步只执行一次runcode
+      isRefreshCode: false, // 每次打开都需要重新刷新代码
+      resourceVisible: false,
+      scripts: [],
+      links: [],
+      monaco: null
+    }
+  },
+  computed: {
+    resources() {
+      return this.scripts.concat(this.links)
+    }
+  },
+  watch: {},
+  created() {
+  },
+  mounted() {
+    window.addEventListener('keydown', this.preventDefaultSave)
+    const clipboard = new ClipboardJS('.copy-btn', {
+      text: trigger => {
+        const codeStr = this.generateCode()
+        this.$notify({
+          title: '成功',
+          message: '代码已复制到剪切板，可粘贴。',
+          type: 'success'
+        })
+        return codeStr
+      }
+    })
+    clipboard.on('error', e => {
+      this.$message.error('代码复制失败')
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.preventDefaultSave)
+  },
+  methods: {
+    preventDefaultSave(e) {
+      if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+      }
+    },
+    onOpen() {
+      const { type } = this.generateConf
+      this.htmlCode = makeUpHtml(this.formData, type)
+      this.jsCode = makeUpJs(this.formData, type)
+      this.cssCode = makeUpCss(this.formData)
+
+      loadBeautifier(btf => {
+        beautifier = btf
+        this.htmlCode = beautifier.html(this.htmlCode, beautifierConf.html)
+        this.jsCode = beautifier.js(this.jsCode, beautifierConf.js)
+        this.cssCode = beautifier.css(this.cssCode, beautifierConf.html)
+
+        loadMonaco(val => {
+          monaco = val
+          this.setEditorValue('editorHtml', 'html', this.htmlCode)
+          this.setEditorValue('editorJs', 'js', this.jsCode)
+          this.setEditorValue('editorCss', 'css', this.cssCode)
+          if (!this.isInitcode) {
+            this.isRefreshCode = true
+            this.isIframeLoaded && (this.isInitcode = true) && this.runCode()
+          }
+        })
+      })
+    },
+    onClose() {
+      this.isInitcode = false
+      this.isRefreshCode = false
+    },
+    iframeLoad() {
+      if (!this.isInitcode) {
+        this.isIframeLoaded = true
+        this.isRefreshCode && (this.isInitcode = true) && this.runCode()
+      }
+    },
+    setEditorValue(id, type, codeStr) {
+      if (editorObj[type]) {
+        editorObj[type].setValue(codeStr)
+      } else {
+        editorObj[type] = monaco.editor.create(document.getElementById(id), {
+          value: codeStr,
+          theme: 'vs-dark',
+          language: mode[type],
+          automaticLayout: true
+        })
+      }
+      // ctrl + s 刷新
+      editorObj[type].onKeyDown(e => {
+        if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
+          this.runCode()
+        }
+      })
+    },
+    runCode() {
+      const jsCodeStr = editorObj.js.getValue()
+      try {
+        const ast = parse(jsCodeStr, { sourceType: 'module' })
+        const astBody = ast.program.body
+        if (astBody.length > 1) {
+          this.$confirm(
+            'js格式不能识别，仅支持修改export default的对象内容',
+            '提示',
+            {
+              type: 'warning'
+            }).catch(() => {});
+          return
+        }
+        if (astBody[0].type === 'ExportDefaultDeclaration') {
+          const postData = {
+            type: 'refreshFrame',
+            data: {
+              generateConf: this.generateConf,
+              html: editorObj.html.getValue(),
+              js: jsCodeStr.replace(exportDefault, ''),
+              css: editorObj.css.getValue(),
+              scripts: this.scripts,
+              links: this.links
+            }
+          }
+
+          this.$refs.previewPage.contentWindow.postMessage(
+            postData,
+            location.origin
+          )
+        } else {
+          this.$message.error('请使用export default')
+        }
+      } catch (err) {
+        this.$message.error(`js错误：${err}`)
+        console.error(err)
+      }
+    },
+    generateCode() {
+      const html = vueTemplate(editorObj.html.getValue())
+      const script = vueScript(editorObj.js.getValue())
+      const css = cssStyle(editorObj.css.getValue())
+      return beautifier.html(html + script + css, beautifierConf.html)
+    },
+    exportFile() {
+      this.$prompt('文件名:', '导出文件', {
+        inputValue: `${+new Date()}.vue`,
+        closeOnClickModal: false,
+        inputPlaceholder: '请输入文件名'
+      }).then(({ value }) => {
+        if (!value) value = `${+new Date()}.vue`
+        const codeStr = this.generateCode()
+        const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+        saveAs(blob, value)
+      })
+    },
+    showResource() {
+      this.resourceVisible = true
+    },
+    setResource(arr) {
+      const scripts = []; const
+        links = []
+      if (Array.isArray(arr)) {
+        arr.forEach(item => {
+          if (item.endsWith('.css')) {
+            links.push(item)
+          } else {
+            scripts.push(item)
+          }
+        })
+        this.scripts = scripts
+        this.links = links
+      } else {
+        this.scripts = []
+        this.links = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixin.scss';
+.tab-editor {
+  position: absolute;
+  top: 33px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+}
+.left-editor {
+  position: relative;
+  height: 100%;
+  background: #1e1e1e;
+  overflow: hidden;
+}
+.setting{
+  position: absolute;
+  right: 15px;
+  top: 3px;
+  color: #a9f122;
+  font-size: 18px;
+  cursor: pointer;
+  z-index: 1;
+}
+.right-preview {
+  height: 100%;
+  .result-wrapper {
+    height: calc(100vh - 33px);
+    width: 100%;
+    overflow: auto;
+    padding: 12px;
+    box-sizing: border-box;
+  }
+}
+@include action-bar;
+::v-deep .el-drawer__header {
+  display: none;
+}
+</style>

yudao-ui-admin/src/views/infra/build/IconsDialog.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="icon-dialog">
+    <el-dialog
+      v-bind="$attrs"
+      width="980px"
+      :modal-append-to-body="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <div slot="title">
+        选择图标
+        <el-input
+          v-model="key"
+          size="mini"
+          :style="{width: '260px'}"
+          placeholder="请输入图标名称"
+          prefix-icon="el-icon-search"
+          clearable
+        />
+      </div>
+      <ul class="icon-ul">
+        <li
+          v-for="icon in iconList"
+          :key="icon"
+          :class="active===icon?'active-item':''"
+          @click="onSelect(icon)"
+        >
+          <i :class="icon" />
+          <div>{{ icon }}</div>
+        </li>
+      </ul>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import iconList from '@/utils/icon.json'
+
+const originList = iconList.map(name => `el-icon-${name}`)
+
+export default {
+  inheritAttrs: false,
+  props: ['current'],
+  data() {
+    return {
+      iconList: originList,
+      active: null,
+      key: ''
+    }
+  },
+  watch: {
+    key(val) {
+      if (val) {
+        this.iconList = originList.filter(name => name.indexOf(val) > -1)
+      } else {
+        this.iconList = originList
+      }
+    }
+  },
+  methods: {
+    onOpen() {
+      this.active = this.current
+      this.key = ''
+    },
+    onClose() {},
+    onSelect(icon) {
+      this.active = icon
+      this.$emit('select', icon)
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.icon-ul {
+  margin: 0;
+  padding: 0;
+  font-size: 0;
+  li {
+    list-style-type: none;
+    text-align: center;
+    font-size: 14px;
+    display: inline-block;
+    width: 16.66%;
+    box-sizing: border-box;
+    height: 108px;
+    padding: 15px 6px 6px 6px;
+    cursor: pointer;
+    overflow: hidden;
+    &:hover {
+      background: #f2f2f2;
+    }
+    &.active-item{
+      background: #e1f3fb;
+      color: #7a6df0
+    }
+    > i {
+      font-size: 30px;
+      line-height: 50px;
+    }
+  }
+}
+.icon-dialog {
+  ::v-deep .el-dialog {
+    border-radius: 8px;
+    margin-bottom: 0;
+    margin-top: 4vh !important;
+    display: flex;
+    flex-direction: column;
+    max-height: 92vh;
+    overflow: hidden;
+    box-sizing: border-box;
+    .el-dialog__header {
+      padding-top: 14px;
+    }
+    .el-dialog__body {
+      margin: 0 20px 20px 20px;
+      padding: 0;
+      overflow: auto;
+    }
+  }
+}
+</style>

yudao-ui-admin/src/views/infra/build/JsonDrawer.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
+      <div class="action-bar" :style="{'text-align': 'left'}">
+        <span class="bar-btn" @click="refresh">
+          <i class="el-icon-refresh" />
+          刷新
+        </span>
+        <span ref="copyBtn" class="bar-btn copy-json-btn">
+          <i class="el-icon-document-copy" />
+          复制JSON
+        </span>
+        <span class="bar-btn" @click="exportJsonFile">
+          <i class="el-icon-download" />
+          导出JSON文件
+        </span>
+        <span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
+          <i class="el-icon-circle-close" />
+          关闭
+        </span>
+      </div>
+      <div id="editorJson" class="json-editor" />
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { beautifierConf } from '@/utils/index'
+import ClipboardJS from 'clipboard'
+import { saveAs } from 'file-saver'
+import loadMonaco from '@/utils/loadMonaco'
+import loadBeautifier from '@/utils/loadBeautifier'
+
+let beautifier
+let monaco
+
+export default {
+  components: {},
+  props: {
+    jsonStr: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    window.addEventListener('keydown', this.preventDefaultSave)
+    const clipboard = new ClipboardJS('.copy-json-btn', {
+      text: trigger => {
+        this.$notify({
+          title: '成功',
+          message: '代码已复制到剪切板，可粘贴。',
+          type: 'success'
+        })
+        return this.beautifierJson
+      }
+    })
+    clipboard.on('error', e => {
+      this.$message.error('代码复制失败')
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.preventDefaultSave)
+  },
+  methods: {
+    preventDefaultSave(e) {
+      if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+      }
+    },
+    onOpen() {
+      loadBeautifier(btf => {
+        beautifier = btf
+        this.beautifierJson = beautifier.js(this.jsonStr, beautifierConf.js)
+
+        loadMonaco(val => {
+          monaco = val
+          this.setEditorValue('editorJson', this.beautifierJson)
+        })
+      })
+    },
+    onClose() {},
+    setEditorValue(id, codeStr) {
+      if (this.jsonEditor) {
+        this.jsonEditor.setValue(codeStr)
+      } else {
+        this.jsonEditor = monaco.editor.create(document.getElementById(id), {
+          value: codeStr,
+          theme: 'vs-dark',
+          language: 'json',
+          automaticLayout: true
+        })
+        // ctrl + s 刷新
+        this.jsonEditor.onKeyDown(e => {
+          if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
+            this.refresh()
+          }
+        })
+      }
+    },
+    exportJsonFile() {
+      this.$prompt('文件名:', '导出文件', {
+        inputValue: `${+new Date()}.json`,
+        closeOnClickModal: false,
+        inputPlaceholder: '请输入文件名'
+      }).then(({ value }) => {
+        if (!value) value = `${+new Date()}.json`
+        const codeStr = this.jsonEditor.getValue()
+        const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+        saveAs(blob, value)
+      })
+    },
+    refresh() {
+      try {
+        this.$emit('refresh', JSON.parse(this.jsonEditor.getValue()))
+      } catch (error) {
+        this.$notify({
+          title: '错误',
+          message: 'JSON格式错误，请检查',
+          type: 'error'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixin.scss';
+
+::v-deep .el-drawer__header {
+  display: none;
+}
+@include action-bar;
+
+.json-editor{
+  height: calc(100vh - 33px);
+}
+</style>

yudao-ui-admin/src/views/infra/build/ResourceDialog.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <el-dialog
+      v-bind="$attrs"
+      title="外部资源引用"
+      width="600px"
+      :close-on-click-modal="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <el-input
+        v-for="(item, index) in resources"
+        :key="index"
+        v-model="resources[index]"
+        class="url-item"
+        placeholder="请输入 css 或 js 资源路径"
+        prefix-icon="el-icon-link"
+        clearable
+      >
+        <el-button
+          slot="append"
+          icon="el-icon-delete"
+          @click="deleteOne(index)"
+        />
+      </el-input>
+      <el-button-group class="add-item">
+        <el-button
+          plain
+          @click="addOne('https://lib.baomitu.com/jquery/1.8.3/jquery.min.js')"
+        >
+          jQuery1.8.3
+        </el-button>
+        <el-button
+          plain
+          @click="addOne('https://unpkg.com/http-vue-loader')"
+        >
+          http-vue-loader
+        </el-button>
+        <el-button
+          icon="el-icon-circle-plus-outline"
+          plain
+          @click="addOne('')"
+        >
+          添加其他
+        </el-button>
+      </el-button-group>
+      <div slot="footer">
+        <el-button @click="close">
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="handelConfirm"
+        >
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { deepClone } from '@/utils/index'
+
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: ['originResource'],
+  data() {
+    return {
+      resources: null
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.resources = this.originResource.length ? deepClone(this.originResource) : ['']
+    },
+    onClose() {
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      const results = this.resources.filter(item => !!item) || []
+      this.$emit('save', results)
+      this.close()
+      if (results.length) {
+        this.resources = results
+      }
+    },
+    deleteOne(index) {
+      this.resources.splice(index, 1)
+    },
+    addOne(url) {
+      if (this.resources.indexOf(url) > -1) {
+        this.$message('资源已存在')
+      } else {
+        this.resources.push(url)
+      }
+    }
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.add-item{
+  margin-top: 8px;
+}
+.url-item{
+  margin-bottom: 12px;
+}
+</style>

yudao-ui-admin/src/views/infra/build/TreeNodeDialog.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <el-dialog
+      v-bind="$attrs"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <el-row :gutter="0">
+        <el-form
+          ref="elForm"
+          :model="formData"
+          :rules="rules"
+          size="small"
+          label-width="100px"
+        >
+          <el-col :span="24">
+            <el-form-item
+              label="选项名"
+              prop="label"
+            >
+              <el-input
+                v-model="formData.label"
+                placeholder="请输入选项名"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item
+              label="选项值"
+              prop="value"
+            >
+              <el-input
+                v-model="formData.value"
+                placeholder="请输入选项值"
+                clearable
+              >
+                <el-select
+                  slot="append"
+                  v-model="dataType"
+                  :style="{width: '100px'}"
+                >
+                  <el-option
+                    v-for="(item, index) in dataTypeOptions"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                    :disabled="item.disabled"
+                  />
+                </el-select>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer">
+        <el-button
+          type="primary"
+          @click="handelConfirm"
+        >
+          确定
+        </el-button>
+        <el-button @click="close">
+          取消
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isNumberStr } from '@/utils/index'
+import { getTreeNodeId, saveTreeNodeId } from '@/utils/db'
+
+const id = getTreeNodeId()
+
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      id,
+      formData: {
+        label: undefined,
+        value: undefined
+      },
+      rules: {
+        label: [
+          {
+            required: true,
+            message: '请输入选项名',
+            trigger: 'blur'
+          }
+        ],
+        value: [
+          {
+            required: true,
+            message: '请输入选项值',
+            trigger: 'blur'
+          }
+        ]
+      },
+      dataType: 'string',
+      dataTypeOptions: [
+        {
+          label: '字符串',
+          value: 'string'
+        },
+        {
+          label: '数字',
+          value: 'number'
+        }
+      ]
+    }
+  },
+  computed: {},
+  watch: {
+    // eslint-disable-next-line func-names
+    'formData.value': function (val) {
+      this.dataType = isNumberStr(val) ? 'number' : 'string'
+    },
+    id(val) {
+      saveTreeNodeId(val)
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData = {
+        label: undefined,
+        value: undefined
+      }
+    },
+    onClose() {},
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs.elForm.validate(valid => {
+        if (!valid) return
+        if (this.dataType === 'number') {
+          this.formData.value = parseFloat(this.formData.value)
+        }
+        this.formData.id = this.id++
+        this.$emit('commit', this.formData)
+        this.close()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,469 @@
+<template>
+  <div class="container">
+    <div class="left-board">
+      <div class="logo-wrapper">
+        <div class="logo">
+          <img :src="logo" alt="logo"> Form Generator
+          <a class="github" href="https://github.com/JakHuang/form-generator" target="_blank">
+            <img src="https://github.githubassets.com/pinned-octocat.svg" alt>
+          </a>
+        </div>
+      </div>
+      <el-scrollbar class="left-scrollbar">
+        <div class="components-list">
+          <div v-for="(item, listIndex) in leftComponents" :key="listIndex">
+            <div class="components-title">
+              <svg-icon icon-class="component" />
+              {{ item.title }}
+            </div>
+            <draggable
+              class="components-draggable"
+              :list="item.list"
+              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+              :clone="cloneComponent"
+              draggable=".components-item"
+              :sort="false"
+              @end="onEnd"
+            >
+              <div
+                v-for="(element, index) in item.list"
+                :key="index"
+                class="components-item"
+                @click="addComponent(element)"
+              >
+                <div class="components-body">
+                  <svg-icon :icon-class="element.__config__.tagIcon" />
+                  {{ element.__config__.label }}
+                </div>
+              </div>
+            </draggable>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+
+    <div class="center-board">
+      <div class="action-bar">
+        <el-button icon="el-icon-video-play" type="text" @click="run">
+          运行
+        </el-button>
+        <el-button icon="el-icon-view" type="text" @click="showJson">
+          查看json
+        </el-button>
+        <el-button icon="el-icon-download" type="text" @click="download">
+          导出vue文件
+        </el-button>
+        <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
+          复制代码
+        </el-button>
+        <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
+          清空
+        </el-button>
+      </div>
+      <el-scrollbar class="center-scrollbar">
+        <el-row class="center-board-row" :gutter="formConf.gutter">
+          <el-form
+            :size="formConf.size"
+            :label-position="formConf.labelPosition"
+            :disabled="formConf.disabled"
+            :label-width="formConf.labelWidth + 'px'"
+          >
+            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
+              <draggable-item
+                v-for="(item, index) in drawingList"
+                :key="item.renderKey"
+                :drawing-list="drawingList"
+                :current-item="item"
+                :index="index"
+                :active-id="activeId"
+                :form-conf="formConf"
+                @activeItem="activeFormItem"
+                @copyItem="drawingItemCopy"
+                @deleteItem="drawingItemDelete"
+              />
+            </draggable>
+            <div v-show="!drawingList.length" class="empty-info">
+              从左侧拖入或点选组件进行表单设计
+            </div>
+          </el-form>
+        </el-row>
+      </el-scrollbar>
+    </div>
+
+    <right-panel
+      :active-data="activeData"
+      :form-conf="formConf"
+      :show-field="!!drawingList.length"
+      @tag-change="tagChange"
+      @fetch-data="fetchData"
+    />
+
+    <form-drawer
+      :visible.sync="drawerVisible"
+      :form-data="formData"
+      size="100%"
+      :generate-conf="generateConf"
+    />
+    <json-drawer
+      size="60%"
+      :visible.sync="jsonDrawerVisible"
+      :json-str="JSON.stringify(formData)"
+      @refresh="refreshJson"
+    />
+    <code-type-dialog
+      :visible.sync="dialogVisible"
+      title="选择生成类型"
+      :show-file-name="showFileName"
+      @confirm="generate"
+    />
+    <input id="copyNode" type="hidden">
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { debounce } from 'throttle-debounce'
+import { saveAs } from 'file-saver'
+import ClipboardJS from 'clipboard'
+import render from '@/components/render/render'
+import FormDrawer from './FormDrawer'
+import JsonDrawer from './JsonDrawer'
+import RightPanel from './RightPanel'
+import {
+  inputComponents, selectComponents, layoutComponents, formConf
+} from '@/components/generator/config'
+import {
+  exportDefault, beautifierConf, isNumberStr, titleCase, deepClone, isObjectObject
+} from '@/utils/index'
+import {
+  makeUpHtml, vueTemplate, vueScript, cssStyle
+} from '@/components/generator/html'
+import { makeUpJs } from '@/components/generator/js'
+import { makeUpCss } from '@/components/generator/css'
+import drawingDefalut from '@/components/generator/drawingDefalut'
+import logo from '@/assets/logo/logo.png'
+import CodeTypeDialog from './CodeTypeDialog'
+import DraggableItem from './DraggableItem'
+import {
+  getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
+} from '@/utils/db'
+import loadBeautifier from '@/utils/loadBeautifier'
+
+let beautifier
+const emptyActiveData = { style: {}, autosize: {} }
+let oldActiveId
+let tempActiveData
+const drawingListInDB = getDrawingList()
+const formConfInDB = getFormConf()
+const idGlobal = getIdGlobal()
+
+export default {
+  components: {
+    draggable,
+    render,
+    FormDrawer,
+    JsonDrawer,
+    RightPanel,
+    CodeTypeDialog,
+    DraggableItem
+  },
+  data() {
+    return {
+      logo,
+      idGlobal,
+      formConf,
+      inputComponents,
+      selectComponents,
+      layoutComponents,
+      labelWidth: 100,
+      drawingList: drawingDefalut,
+      drawingData: {},
+      activeId: drawingDefalut[0].formId,
+      drawerVisible: false,
+      formData: {},
+      dialogVisible: false,
+      jsonDrawerVisible: false,
+      generateConf: null,
+      showFileName: false,
+      activeData: drawingDefalut[0],
+      saveDrawingListDebounce: debounce(340, saveDrawingList),
+      saveIdGlobalDebounce: debounce(340, saveIdGlobal),
+      leftComponents: [
+        {
+          title: '输入型组件',
+          list: inputComponents
+        },
+        {
+          title: '选择型组件',
+          list: selectComponents
+        },
+        {
+          title: '布局型组件',
+          list: layoutComponents
+        }
+      ]
+    }
+  },
+  computed: {
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'activeData.__config__.label': function (val, oldVal) {
+      if (
+        this.activeData.placeholder === undefined
+        || !this.activeData.__config__.tag
+        || oldActiveId !== this.activeId
+      ) {
+        return
+      }
+      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
+    },
+    activeId: {
+      handler(val) {
+        oldActiveId = val
+      },
+      immediate: true
+    },
+    drawingList: {
+      handler(val) {
+        this.saveDrawingListDebounce(val)
+        if (val.length === 0) this.idGlobal = 100
+      },
+      deep: true
+    },
+    idGlobal: {
+      handler(val) {
+        this.saveIdGlobalDebounce(val)
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
+      this.drawingList = drawingListInDB
+    } else {
+      this.drawingList = drawingDefalut
+    }
+    this.activeFormItem(this.drawingList[0])
+    if (formConfInDB) {
+      this.formConf = formConfInDB
+    }
+    loadBeautifier(btf => {
+      beautifier = btf
+    })
+    const clipboard = new ClipboardJS('#copyNode', {
+      text: trigger => {
+        const codeStr = this.generateCode()
+        this.$notify({
+          title: '成功',
+          message: '代码已复制到剪切板，可粘贴。',
+          type: 'success'
+        })
+        return codeStr
+      }
+    })
+    clipboard.on('error', e => {
+      this.$message.error('代码复制失败')
+    })
+  },
+  methods: {
+    setObjectValueReduce(obj, strKeys, data) {
+      const arr = strKeys.split('.')
+      arr.reduce((pre, item, i) => {
+        if (arr.length === i + 1) {
+          pre[item] = data
+        } else if (!isObjectObject(pre[item])) {
+          pre[item] = {}
+        }
+        return pre[item]
+      }, obj)
+    },
+    setRespData(component, resp) {
+      const { dataPath, renderKey, dataConsumer } = component.__config__
+      if (!dataPath || !dataConsumer) return
+      const respData = dataPath.split('.').reduce((pre, item) => pre[item], resp)
+
+      // 将请求回来的数据，赋值到指定属性。
+      // 以el-tabel为例，根据Element文档，应该将数据赋值给el-tabel的data属性，所以dataConsumer的值应为'data';
+      // 此时赋值代码可写成 component[dataConsumer] = respData；
+      // 但为支持更深层级的赋值（如：dataConsumer的值为'options.data'）,使用setObjectValueReduce
+      this.setObjectValueReduce(component, dataConsumer, respData)
+      const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
+      if (i > -1) this.$set(this.drawingList, i, component)
+    },
+    fetchData(component) {
+      const { dataType, method, url } = component.__config__
+      if (dataType === 'dynamic' && method && url) {
+        this.setLoading(component, true)
+        this.$axios({
+          method,
+          url
+        }).then(resp => {
+          this.setLoading(component, false)
+          this.setRespData(component, resp.data)
+        })
+      }
+    },
+    setLoading(component, val) {
+      const { directives } = component
+      if (Array.isArray(directives)) {
+        const t = directives.find(d => d.name === 'loading')
+        if (t) t.value = val
+      }
+    },
+    activeFormItem(currentItem) {
+      this.activeData = currentItem
+      this.activeId = currentItem.__config__.formId
+    },
+    onEnd(obj) {
+      if (obj.from !== obj.to) {
+        this.fetchData(tempActiveData)
+        this.activeData = tempActiveData
+        this.activeId = this.idGlobal
+      }
+    },
+    addComponent(item) {
+      const clone = this.cloneComponent(item)
+      this.fetchData(clone)
+      this.drawingList.push(clone)
+      this.activeFormItem(clone)
+    },
+    cloneComponent(origin) {
+      const clone = deepClone(origin)
+      const config = clone.__config__
+      config.span = this.formConf.span // 生成代码时，会根据span做精简判断
+      this.createIdAndKey(clone)
+      clone.placeholder !== undefined && (clone.placeholder += config.label)
+      tempActiveData = clone
+      return tempActiveData
+    },
+    createIdAndKey(item) {
+      const config = item.__config__
+      config.formId = ++this.idGlobal
+      config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
+      if (config.layout === 'colFormItem') {
+        item.__vModel__ = `field${this.idGlobal}`
+      } else if (config.layout === 'rowFormItem') {
+        config.componentName = `row${this.idGlobal}`
+        !Array.isArray(config.children) && (config.children = [])
+        delete config.label // rowFormItem无需配置label属性
+      }
+      if (Array.isArray(config.children)) {
+        config.children = config.children.map(childItem => this.createIdAndKey(childItem))
+      }
+      return item
+    },
+    AssembleFormData() {
+      this.formData = {
+        fields: deepClone(this.drawingList),
+        ...this.formConf
+      }
+    },
+    generate(data) {
+      const func = this[`exec${titleCase(this.operationType)}`]
+      this.generateConf = data
+      func && func(data)
+    },
+    execRun(data) {
+      this.AssembleFormData()
+      this.drawerVisible = true
+    },
+    execDownload(data) {
+      const codeStr = this.generateCode()
+      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+      saveAs(blob, data.fileName)
+    },
+    execCopy(data) {
+      document.getElementById('copyNode').click()
+    },
+    empty() {
+      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
+        () => {
+          this.drawingList = []
+          this.idGlobal = 100
+        }).catch(() => {});
+    },
+    drawingItemCopy(item, list) {
+      let clone = deepClone(item)
+      clone = this.createIdAndKey(clone)
+      list.push(clone)
+      this.activeFormItem(clone)
+    },
+    drawingItemDelete(index, list) {
+      list.splice(index, 1)
+      this.$nextTick(() => {
+        const len = this.drawingList.length
+        if (len) {
+          this.activeFormItem(this.drawingList[len - 1])
+        }
+      })
+    },
+    generateCode() {
+      const { type } = this.generateConf
+      this.AssembleFormData()
+      const script = vueScript(makeUpJs(this.formData, type))
+      const html = vueTemplate(makeUpHtml(this.formData, type))
+      const css = cssStyle(makeUpCss(this.formData))
+      return beautifier.html(html + script + css, beautifierConf.html)
+    },
+    showJson() {
+      this.AssembleFormData()
+      this.jsonDrawerVisible = true
+    },
+    download() {
+      this.dialogVisible = true
+      this.showFileName = true
+      this.operationType = 'download'
+    },
+    run() {
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'run'
+    },
+    copy() {
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'copy'
+    },
+    tagChange(newTag) {
+      newTag = this.cloneComponent(newTag)
+      const config = newTag.__config__
+      newTag.__vModel__ = this.activeData.__vModel__
+      config.formId = this.activeId
+      config.span = this.activeData.__config__.span
+      this.activeData.__config__.tag = config.tag
+      this.activeData.__config__.tagIcon = config.tagIcon
+      this.activeData.__config__.document = config.document
+      if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
+        config.defaultValue = this.activeData.__config__.defaultValue
+      }
+      Object.keys(newTag).forEach(key => {
+        if (this.activeData[key] !== undefined) {
+          newTag[key] = this.activeData[key]
+        }
+      })
+      this.activeData = newTag
+      this.updateDrawingList(newTag, this.drawingList)
+    },
+    updateDrawingList(newTag, list) {
+      const index = list.findIndex(item => item.__config__.formId === this.activeId)
+      if (index > -1) {
+        list.splice(index, 1, newTag)
+      } else {
+        list.forEach(item => {
+          if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
+        })
+      }
+    },
+    refreshJson(data) {
+      this.drawingList = deepClone(data.fields)
+      delete data.fields
+      this.formConf = data
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+@import '@/styles/home';
+</style>

yudao-ui-admin/src/views/infra/build/main.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from '@/router'
+import '@/styles/index.scss'
+import '@/icons'
+import axios from 'axios'
+import Tinymce from '@/components/tinymce/index.vue'
+
+Vue.component('tinymce', Tinymce)
+
+Vue.config.productionTip = false
+Vue.prototype.$axios = axios
+
+// add by 芋道源码：引用自 https://github.com/JakHuang/form-generator/tree/dev/src/views/index
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')