diff --git a/ruoyi-ui/src/utils/generator/drawingDefault.js b/ruoyi-ui/src/utils/generator/drawingDefault.js
index 09f133ca1..18017a29f 100644
--- a/ruoyi-ui/src/utils/generator/drawingDefault.js
+++ b/ruoyi-ui/src/utils/generator/drawingDefault.js
@@ -1,29 +1,37 @@
-export default [
-  {
-    layout: 'colFormItem',
-    tagIcon: 'input',
-    label: '手机号',
-    vModel: 'mobile',
-    formId: 6,
-    tag: 'el-input',
-    placeholder: '请输入手机号',
-    defaultValue: '',
-    span: 24,
-    style: { width: '100%' },
-    clearable: true,
-    prepend: '',
-    append: '',
-    'prefix-icon': 'el-icon-mobile',
-    'suffix-icon': '',
-    maxlength: 11,
-    'show-word-limit': true,
-    readonly: false,
-    disabled: false,
-    required: true,
-    changeTag: true,
-    regList: [{
-      pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
-      message: '手机号格式错误'
-    }]
+export const drawingDefaultValue = []
+
+export function initDrawingDefaultValue() {
+  if (drawingDefaultValue.length === 0) {
+    drawingDefaultValue.push({
+      layout: 'colFormItem',
+      tagIcon: 'input',
+      label: '手机号',
+      vModel: 'mobile',
+      formId: 6,
+      tag: 'el-input',
+      placeholder: '请输入手机号',
+      defaultValue: '',
+      span: 24,
+      style: {width: '100%'},
+      clearable: true,
+      prepend: '',
+      append: '',
+      'prefix-icon': 'el-icon-mobile',
+      'suffix-icon': '',
+      maxlength: 11,
+      'show-word-limit': true,
+      readonly: false,
+      disabled: false,
+      required: true,
+      changeTag: true,
+      regList: [{
+        pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
+        message: '手机号格式错误'
+      }]
+    })
   }
-]
+}
+
+export function cleanDrawingDefaultValue() {
+  drawingDefaultValue.splice(0, drawingDefaultValue.length)
+}
diff --git a/ruoyi-ui/src/views/tool/build/index.vue b/ruoyi-ui/src/views/tool/build/index.vue
index 5849b340a..578c864f8 100644
--- a/ruoyi-ui/src/views/tool/build/index.vue
+++ b/ruoyi-ui/src/views/tool/build/index.vue
@@ -9,7 +9,8 @@
       <el-scrollbar class="left-scrollbar">
         <div class="components-list">
           <div class="components-title">
-            <svg-icon icon-class="component" />输入型组件
+            <svg-icon icon-class="component"/>
+            输入型组件
           </div>
           <draggable
             class="components-draggable"
@@ -25,13 +26,14 @@
               @click="addComponent(element)"
             >
               <div class="components-body">
-                <svg-icon :icon-class="element.tagIcon" />
+                <svg-icon :icon-class="element.tagIcon"/>
                 {{ element.label }}
               </div>
             </div>
           </draggable>
           <div class="components-title">
-            <svg-icon icon-class="component" />选择型组件
+            <svg-icon icon-class="component"/>
+            选择型组件
           </div>
           <draggable
             class="components-draggable"
@@ -49,13 +51,14 @@
               @click="addComponent(element)"
             >
               <div class="components-body">
-                <svg-icon :icon-class="element.tagIcon" />
+                <svg-icon :icon-class="element.tagIcon"/>
                 {{ element.label }}
               </div>
             </div>
           </draggable>
           <div class="components-title">
-            <svg-icon icon-class="component" /> 布局型组件
+            <svg-icon icon-class="component"/>
+            布局型组件
           </div>
           <draggable
             class="components-draggable" :list="layoutComponents"
@@ -67,7 +70,7 @@
               @click="addComponent(element)"
             >
               <div class="components-body">
-                <svg-icon :icon-class="element.tagIcon" />
+                <svg-icon :icon-class="element.tagIcon"/>
                 {{ element.label }}
               </div>
             </div>
@@ -141,12 +144,12 @@ import beautifier from 'js-beautify'
 import ClipboardJS from 'clipboard'
 import render from '@/utils/generator/render'
 import RightPanel from './RightPanel'
-import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
-import { beautifierConf, titleCase } from '@/utils/index'
-import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
-import { makeUpJs } from '@/utils/generator/js'
-import { makeUpCss } from '@/utils/generator/css'
-import drawingDefault from '@/utils/generator/drawingDefault'
+import {inputComponents, selectComponents, layoutComponents, formConf} from '@/utils/generator/config'
+import {beautifierConf, titleCase} from '@/utils/index'
+import {makeUpHtml, vueTemplate, vueScript, cssStyle} from '@/utils/generator/html'
+import {makeUpJs} from '@/utils/generator/js'
+import {makeUpCss} from '@/utils/generator/css'
+import {drawingDefaultValue, initDrawingDefaultValue,cleanDrawingDefaultValue} from '@/utils/generator/drawingDefault'
 import logo from '@/assets/logo/logo.png'
 import CodeTypeDialog from './CodeTypeDialog'
 import DraggableItem from './DraggableItem'
@@ -162,6 +165,9 @@ export default {
     CodeTypeDialog,
     DraggableItem
   },
+
+
+
   data() {
     return {
       logo,
@@ -171,18 +177,24 @@ export default {
       selectComponents,
       layoutComponents,
       labelWidth: 100,
-      drawingList: drawingDefault,
+      // drawingList: JSON.parse(JSON.stringify(drawingDefault)),
+      drawingList: drawingDefaultValue,
       drawingData: {},
-      activeId: drawingDefault[0].formId,
+      activeId: drawingDefaultValue[0].formId,
       drawerVisible: false,
       formData: {},
       dialogVisible: false,
       generateConf: null,
       showFileName: false,
-      activeData: drawingDefault[0]
+      activeData: drawingDefaultValue[0]
     }
   },
+
+  beforeCreate() {
+      initDrawingDefaultValue()
+  },
   created() {
+
     // 防止 firefox 下 拖拽 会新打卡一个选项卡
     document.body.ondrop = event => {
       event.preventDefault()
@@ -274,16 +286,17 @@ export default {
     },
     execDownload(data) {
       const codeStr = this.generateCode()
-      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+      const blob = new Blob([codeStr], {type: 'text/plain;charset=utf-8'})
       this.$download.saveAs(blob, data.fileName)
     },
     execCopy(data) {
       document.getElementById('copyNode').click()
     },
     empty() {
-      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
+      this.$confirm('确定要清空所有组件吗？', '提示', {type: 'warning'}).then(
         () => {
           this.drawingList = []
+          cleanDrawingDefaultValue()
         }
       )
     },
@@ -316,7 +329,7 @@ export default {
       })
     },
     generateCode() {
-      const { type } = this.generateConf
+      const {type} = this.generateConf
       this.AssembleFormData()
       const script = vueScript(makeUpJs(this.formData, type))
       const html = vueTemplate(makeUpHtml(this.formData, type))
@@ -370,16 +383,19 @@ export default {
 </script>
 
 <style lang='scss'>
-.editor-tabs{
+.editor-tabs {
   background: #121315;
-  .el-tabs__header{
+
+  .el-tabs__header {
     margin: 0;
     border-bottom-color: #121315;
-    .el-tabs__nav{
+
+    .el-tabs__nav {
       border-color: #121315;
     }
   }
-  .el-tabs__item{
+
+  .el-tabs__item {
     height: 32px;
     line-height: 32px;
     color: #888a8e;
@@ -388,15 +404,18 @@ export default {
     margin-right: 5px;
     user-select: none;
   }
-  .el-tabs__item.is-active{
+
+  .el-tabs__item.is-active {
     background: #1e1e1e;
-    border-bottom-color: #1e1e1e!important;
+    border-bottom-color: #1e1e1e !important;
     color: #fff;
   }
-  .el-icon-edit{
+
+  .el-icon-edit {
     color: #f1fa8c;
   }
-  .el-icon-document{
+
+  .el-icon-document {
     color: #a95812;
   }
 }
@@ -407,29 +426,35 @@ export default {
     padding: 12px 18px 15px 15px;
   }
 }
+
 .left-scrollbar .el-scrollbar__wrap {
   box-sizing: border-box;
   overflow-x: hidden !important;
   margin-bottom: 0 !important;
 }
-.center-tabs{
-  .el-tabs__header{
-    margin-bottom: 0!important;
+
+.center-tabs {
+  .el-tabs__header {
+    margin-bottom: 0 !important;
   }
-  .el-tabs__item{
+
+  .el-tabs__item {
     width: 50%;
     text-align: center;
   }
-  .el-tabs__nav{
+
+  .el-tabs__nav {
     width: 100%;
   }
 }
-.reg-item{
+
+.reg-item {
   padding: 12px 6px;
   background: #f8f8f8;
   position: relative;
   border-radius: 4px;
-  .close-btn{
+
+  .close-btn {
     position: absolute;
     right: -6px;
     top: -6px;
@@ -444,18 +469,22 @@ export default {
     z-index: 1;
     cursor: pointer;
     font-size: 12px;
-    &:hover{
+
+    &:hover {
       background: rgba(210, 23, 23, 0.5)
     }
   }
-  & + .reg-item{
+
+  & + .reg-item {
     margin-top: 18px;
   }
 }
-.action-bar{
-  & .el-button+.el-button {
+
+.action-bar {
+  & .el-button + .el-button {
     margin-left: 15px;
   }
+
   & i {
     font-size: 20px;
     vertical-align: middle;
@@ -464,32 +493,37 @@ export default {
   }
 }
 
-.custom-tree-node{
+.custom-tree-node {
   width: 100%;
   font-size: 14px;
-  .node-operation{
+
+  .node-operation {
     float: right;
   }
-  i[class*="el-icon"] + i[class*="el-icon"]{
+
+  i[class*="el-icon"] + i[class*="el-icon"] {
     margin-left: 6px;
   }
-  .el-icon-plus{
+
+  .el-icon-plus {
     color: #409EFF;
   }
-  .el-icon-delete{
+
+  .el-icon-delete {
     color: #157a0c;
   }
 }
 
-.left-scrollbar .el-scrollbar__view{
+.left-scrollbar .el-scrollbar__view {
   overflow-x: hidden;
 }
 
-.el-rate{
+.el-rate {
   display: inline-block;
   vertical-align: text-top;
 }
-.el-upload__tip{
+
+.el-upload__tip {
   line-height: 1.2;
 }
 
@@ -506,6 +540,7 @@ $lighterBlue: #409EFF;
   padding: 8px;
   box-sizing: border-box;
   height: 100%;
+
   .components-item {
     display: inline-block;
     width: 48%;
@@ -513,14 +548,17 @@ $lighterBlue: #409EFF;
     transition: transform 0ms !important;
   }
 }
-.components-draggable{
+
+.components-draggable {
   padding-bottom: 20px;
 }
-.components-title{
+
+.components-title {
   font-size: 14px;
   color: #222;
   margin: 6px 2px;
-  .svg-icon{
+
+  .svg-icon {
     color: #666;
     font-size: 18px;
   }
@@ -533,13 +571,16 @@ $lighterBlue: #409EFF;
   cursor: move;
   border: 1px dashed $selectedColor;
   border-radius: 3px;
-  .svg-icon{
+
+  .svg-icon {
     color: #777;
     font-size: 15px;
   }
+
   &:hover {
     border: 1px dashed #787be8;
     color: #787be8;
+
     .svg-icon {
       color: #787be8;
     }
@@ -553,10 +594,12 @@ $lighterBlue: #409EFF;
   top: 0;
   height: 100vh;
 }
-.left-scrollbar{
+
+.left-scrollbar {
   height: calc(100vh - 42px);
   overflow: hidden;
 }
+
 .center-scrollbar {
   height: calc(100vh - 42px);
   overflow: hidden;
@@ -564,13 +607,15 @@ $lighterBlue: #409EFF;
   border-right: 1px solid #f1e8e8;
   box-sizing: border-box;
 }
+
 .center-board {
   height: 100vh;
   width: auto;
   margin: 0 350px 0 260px;
   box-sizing: border-box;
 }
-.empty-info{
+
+.empty-info {
   position: absolute;
   top: 46%;
   left: 0;
@@ -580,7 +625,8 @@ $lighterBlue: #409EFF;
   color: #ccb1ea;
   letter-spacing: 4px;
 }
-.action-bar{
+
+.action-bar {
   position: relative;
   height: 42px;
   text-align: right;
@@ -589,18 +635,21 @@ $lighterBlue: #409EFF;
   border: 1px solid #f1e8e8;
   border-top: none;
   border-left: none;
-  .delete-btn{
+
+  .delete-btn {
     color: #F56C6C;
   }
 }
-.logo-wrapper{
+
+.logo-wrapper {
   position: relative;
   height: 42px;
   background: #fff;
   border-bottom: 1px solid #f1e8e8;
   box-sizing: border-box;
 }
-.logo{
+
+.logo {
   position: absolute;
   left: 12px;
   top: 6px;
@@ -609,16 +658,19 @@ $lighterBlue: #409EFF;
   font-weight: 600;
   font-size: 17px;
   white-space: nowrap;
-  > img{
+
+  > img {
     width: 30px;
     height: 30px;
     vertical-align: top;
   }
-  .github{
+
+  .github {
     display: inline-block;
     vertical-align: sub;
     margin-left: 15px;
-    > img{
+
+    > img {
       height: 22px;
     }
   }
@@ -627,23 +679,28 @@ $lighterBlue: #409EFF;
 .center-board-row {
   padding: 12px 12px 15px 12px;
   box-sizing: border-box;
+
   & > .el-form {
     // 69 = 12+15+42
     height: calc(100vh - 69px);
   }
 }
+
 .drawing-board {
   height: 100%;
   position: relative;
+
   .components-body {
     padding: 0;
     margin: 0;
     font-size: 0;
   }
+
   .sortable-ghost {
     position: relative;
     display: block;
     overflow: hidden;
+
     &::before {
       content: " ";
       position: absolute;
@@ -655,38 +712,47 @@ $lighterBlue: #409EFF;
       z-index: 2;
     }
   }
+
   .components-item.sortable-ghost {
     width: 100%;
     height: 60px;
     background-color: $selectedColor;
   }
+
   .active-from-item {
-    & > .el-form-item{
+    & > .el-form-item {
       background: $selectedColor;
       border-radius: 6px;
     }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+
+    & > .drawing-item-copy, & > .drawing-item-delete {
       display: initial;
     }
-    & > .component-name{
+
+    & > .component-name {
       color: $lighterBlue;
     }
   }
-  .el-form-item{
+
+  .el-form-item {
     margin-bottom: 15px;
   }
 }
-.drawing-item{
+
+.drawing-item {
   position: relative;
   cursor: move;
-  &.unfocus-bordered:not(.activeFromItem) > div:first-child  {
+
+  &.unfocus-bordered:not(.activeFromItem) > div:first-child {
     border: 1px dashed #ccc;
   }
-  .el-form-item{
+
+  .el-form-item {
     padding: 12px 10px;
   }
 }
-.drawing-row-item{
+
+.drawing-row-item {
   position: relative;
   cursor: move;
   box-sizing: border-box;
@@ -694,22 +760,28 @@ $lighterBlue: #409EFF;
   border-radius: 3px;
   padding: 0 2px;
   margin-bottom: 15px;
+
   .drawing-row-item {
     margin-bottom: 2px;
   }
-  .el-col{
+
+  .el-col {
     margin-top: 22px;
   }
-  .el-form-item{
+
+  .el-form-item {
     margin-bottom: 0;
   }
-  .drag-wrapper{
+
+  .drag-wrapper {
     min-height: 80px;
   }
-  &.active-from-item{
+
+  &.active-from-item {
     border: 1px dashed $lighterBlue;
   }
-  .component-name{
+
+  .component-name {
     position: absolute;
     top: 0;
     left: 0;
@@ -719,17 +791,20 @@ $lighterBlue: #409EFF;
     padding: 0 6px;
   }
 }
-.drawing-item, .drawing-row-item{
+
+.drawing-item, .drawing-row-item {
   &:hover {
-    & > .el-form-item{
+    & > .el-form-item {
       background: $selectedColor;
       border-radius: 6px;
     }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+
+    & > .drawing-item-copy, & > .drawing-item-delete {
       display: initial;
     }
   }
-  & > .drawing-item-copy, & > .drawing-item-delete{
+
+  & > .drawing-item-copy, & > .drawing-item-delete {
     display: none;
     position: absolute;
     top: -10px;
@@ -743,22 +818,26 @@ $lighterBlue: #409EFF;
     cursor: pointer;
     z-index: 1;
   }
-  & > .drawing-item-copy{
+
+  & > .drawing-item-copy {
     right: 56px;
     border-color: $lighterBlue;
     color: $lighterBlue;
     background: #fff;
-    &:hover{
+
+    &:hover {
       background: $lighterBlue;
       color: #fff;
     }
   }
-  & > .drawing-item-delete{
+
+  & > .drawing-item-delete {
     right: 24px;
     border-color: #F56C6C;
     color: #F56C6C;
     background: #fff;
-    &:hover{
+
+    &:hover {
       background: #F56C6C;
       color: #fff;
     }