From cf6e550538d55f3da28098662168031a33809246 Mon Sep 17 00:00:00 2001
From: Day <515848559@qq.com>
Date: Fri, 25 Apr 2025 10:07:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8D=95=E4=B8=AA=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E6=8E=A7=E4=BB=B6=E5=90=8E=EF=BC=8C=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E5=88=B0=E5=85=B6=E4=BB=96=E9=A1=B5=E9=9D=A2=E5=90=8E?=
 =?UTF-8?q?=EF=BC=8C=E9=87=8D=E6=96=B0=E8=B7=AF=E7=94=B1=E5=9B=9E=E6=9D=A5?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B4=A9=E6=BA=83=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/utils/generator/drawingDefault.js     |  64 ++---
 ruoyi-ui/src/views/tool/build/index.vue       | 237 ++++++++++++------
 2 files changed, 194 insertions(+), 107 deletions(-)

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 2bd298b8f..855d5184e 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()
@@ -275,16 +287,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()
         }
       )
     },
@@ -317,7 +330,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))
@@ -371,16 +384,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;
@@ -389,15 +405,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;
   }
 }
@@ -408,29 +427,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;
@@ -445,18 +470,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;
@@ -465,32 +494,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;
 }
 
@@ -507,6 +541,7 @@ $lighterBlue: #409EFF;
   padding: 8px;
   box-sizing: border-box;
   height: 100%;
+
   .components-item {
     display: inline-block;
     width: 48%;
@@ -514,14 +549,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;
   }
@@ -534,13 +572,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;
     }
@@ -554,10 +595,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;
@@ -565,13 +608,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;
@@ -581,7 +626,8 @@ $lighterBlue: #409EFF;
   color: #ccb1ea;
   letter-spacing: 4px;
 }
-.action-bar{
+
+.action-bar {
   position: relative;
   height: 42px;
   text-align: right;
@@ -590,18 +636,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;
@@ -610,16 +659,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;
     }
   }
@@ -628,23 +680,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;
@@ -656,38 +713,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;
@@ -695,22 +761,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;
@@ -720,17 +792,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;
@@ -744,22 +819,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;
     }