logo更新

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>logo-icon.png">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

src/layout/components/Sidebar/Logo.vue

@@ -1,8 +1,22 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div
+    class="sidebar-logo-container"
+    :class="{ collapse: collapse }"
+    :style="{
+      backgroundColor:
+        sideTheme === 'theme-dark'
+          ? variables.menuBackground
+          : variables.menuLightBackground,
+    }"
+  >
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+      <router-link
-        <img :src="logo" class="sidebar-logo" />
+        v-if="collapse"
+        key="collapse"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <img :src="logoSmall" class="sidebar-logo" />
         <!--        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
@@ -14,35 +28,33 @@
 </template>
 
 <script>
-import logoImg from '@/assets/logo/logo.png'
+import variables from "@/assets/styles/variables.scss";
-import variables from '@/assets/styles/variables.scss'
+import logo from "@/assets/images/ems/logo.png";
-import logo from '@/assets/images/ems/logo.png'
+import logoSmall from "@/assets/images/ems/logo-small.png";
-import logoLarge from '@/assets/images/ems/logo-large.png'
 export default {
-  name: 'SidebarLogo',
+  name: "SidebarLogo",
   props: {
     collapse: {
       type: Boolean,
-      required: true
+      required: true,
-    }
+    },
   },
   computed: {
     variables() {
-      return variables
+      return variables;
     },
     sideTheme() {
-      return this.$store.state.settings.sideTheme
+      return this.$store.state.settings.sideTheme;
-    }
+    },
   },
   data() {
     return {
       title: process.env.VUE_APP_TITLE,
-      // logo: logoImg
       logo: logo,
-      logoLarge:logoLarge
+      logoSmall: logoSmall,
-    }
+    };
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/views/login.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <el-form
-      <h3 class="title">{{title}}</h3>
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <img
+        src="./../assets/images/ems/logo.png"
+        alt=""
+        srcset=""
+        class="login-logo"
+      />
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -9,7 +19,11 @@
           auto-complete="off"
           placeholder="账号"
         >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -20,7 +34,11 @@
           placeholder="密码"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
@@ -31,26 +49,36 @@
           style="width: 63%"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="validCode"
+            class="el-input__icon input-icon"
+          />
         </el-input>
         <div class="login-code">
           <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+      <el-checkbox
-      <el-form-item style="width:100%;">
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 25px 0px"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          style="width: 100%"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;" v-if="register">
+        <div style="float: right" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
         </div>
       </el-form-item>
     </el-form>
@@ -62,9 +90,9 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login"
+import { getCodeImg } from "@/api/login";
-import Cookies from "js-cookie"
+import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
@@ -77,94 +105,110 @@ export default {
         password: "admin123",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
       captchaEnabled: true,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
-    }
+    };
   },
   watch: {
     $route: {
       handler: function (route) {
-        this.redirect = route.query && route.query.redirect
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
     },
-      immediate: true
-    }
   },
   created() {
-    this.getCode()
+    this.getCode();
-    this.getCookie()
+    this.getCookie();
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
+      getCodeImg().then((res) => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img
+          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.loginForm.uuid = res.uuid
+          this.loginForm.uuid = res.uuid;
         }
-      })
+      });
     },
     getCookie() {
-      const username = Cookies.get("username")
+      const username = Cookies.get("username");
-      const password = Cookies.get("password")
+      const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
+        password:
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+          password === undefined ? this.loginForm.password : decrypt(password),
-      }
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+      };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true
+          this.loading = true;
           if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 })
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
+            Cookies.set("password", encrypt(this.loginForm.password), {
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
-            Cookies.remove("username")
+            Cookies.remove("username");
-            Cookies.remove("password")
+            Cookies.remove("password");
-            Cookies.remove('rememberMe')
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
+          this.$store
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
+            .dispatch("Login", this.loginForm)
-          }).catch(() => {
+            .then(() => {
-            this.loading = false
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
               if (this.captchaEnabled) {
-              this.getCode()
+                this.getCode();
-            }
-          })
-        }
-      })
-    }
               }
+            });
         }
+      });
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
 .login {
+  padding-left: 50px;
   display: flex;
-  justify-content: center;
+  justify-content: left;
   align-items: center;
   height: 100%;
   background-image: url("../assets/images/ems/login-background.png");
   background-size: cover;
 }
+.login-logo {
+  display: block;
+  width: 70%;
+  height: auto;
+  margin: 0 auto;
+}
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
@@ -175,7 +219,7 @@ export default {
   border-radius: 6px;
   background: #ffffff;
   width: 400px;
-  padding: 25px 25px 5px 25px;
+  padding: 0 25px 5px 25px;
   z-index: 1;
   .el-input {
     height: 38px;

src/views/tool/build/index.vue

@@ -2,9 +2,7 @@
   <div class="container">
     <div class="left-board">
       <div class="logo-wrapper">
-        <div class="logo">
+        <div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
-          <img :src="logo" alt="logo"> Form Generator
-        </div>
       </div>
       <el-scrollbar class="left-scrollbar">
         <div class="components-list">
@@ -21,7 +19,9 @@
             @end="onEnd"
           >
             <div
-              v-for="(element, index) in inputComponents" :key="index" class="components-item"
+              v-for="(element, index) in inputComponents"
+              :key="index"
+              class="components-item"
               @click="addComponent(element)"
             >
               <div class="components-body">
@@ -58,12 +58,18 @@
             <svg-icon icon-class="component" /> 布局型组件
           </div>
           <draggable
-            class="components-draggable" :list="layoutComponents"
+            class="components-draggable"
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
+            :list="layoutComponents"
-            draggable=".components-item" :sort="false" @end="onEnd"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent"
+            draggable=".components-item"
+            :sort="false"
+            @end="onEnd"
           >
             <div
-              v-for="(element, index) in layoutComponents" :key="index" class="components-item"
+              v-for="(element, index) in layoutComponents"
+              :key="index"
+              class="components-item"
               @click="addComponent(element)"
             >
               <div class="components-body">
@@ -81,10 +87,20 @@
         <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
+          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
+          class="delete-btn"
+          icon="el-icon-delete"
+          type="text"
+          @click="empty"
+        >
           清空
         </el-button>
       </div>
@@ -96,7 +112,12 @@
             :disabled="formConf.disabled"
             :label-width="formConf.labelWidth + 'px'"
           >
-            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
+            <draggable
+              class="drawing-board"
+              :list="drawingList"
+              :animation="340"
+              group="componentsGroup"
+            >
               <draggable-item
                 v-for="(element, index) in drawingList"
                 :key="element.renderKey"
@@ -131,28 +152,38 @@
       :show-file-name="showFileName"
       @confirm="generate"
     />
-    <input id="copyNode" type="hidden">
+    <input id="copyNode" type="hidden" />
   </div>
 </template>
 
 <script>
-import draggable from 'vuedraggable'
+import draggable from "vuedraggable";
-import beautifier from 'js-beautify'
+import beautifier from "js-beautify";
-import ClipboardJS from 'clipboard'
+import ClipboardJS from "clipboard";
-import render from '@/utils/generator/render'
+import render from "@/utils/generator/render";
-import RightPanel from './RightPanel'
+import RightPanel from "./RightPanel";
-import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
+import {
-import { beautifierConf, titleCase } from '@/utils/index'
+  inputComponents,
-import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
+  selectComponents,
-import { makeUpJs } from '@/utils/generator/js'
+  layoutComponents,
-import { makeUpCss } from '@/utils/generator/css'
+  formConf,
-import drawingDefault from '@/utils/generator/drawingDefault'
+} from "@/utils/generator/config";
-import logo from '@/assets/logo/logo.png'
+import { beautifierConf, titleCase } from "@/utils/index";
-import CodeTypeDialog from './CodeTypeDialog'
+import {
-import DraggableItem from './DraggableItem'
+  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 logo from "@/assets/images/ems/logo-icon.png";
+import CodeTypeDialog from "./CodeTypeDialog";
+import DraggableItem from "./DraggableItem";
 
-let oldActiveId
+let oldActiveId;
-let tempActiveData
+let tempActiveData;
 
 export default {
   components: {
@@ -160,7 +191,7 @@ export default {
     render,
     RightPanel,
     CodeTypeDialog,
-    DraggableItem
+    DraggableItem,
   },
   data() {
     return {
@@ -179,197 +210,203 @@ export default {
       dialogVisible: false,
       generateConf: null,
       showFileName: false,
-      activeData: drawingDefault[0]
+      activeData: drawingDefault[0],
-    }
+    };
   },
   created() {
     // 防止 firefox 下 拖拽 会新打卡一个选项卡
-    document.body.ondrop = event => {
+    document.body.ondrop = (event) => {
-      event.preventDefault()
+      event.preventDefault();
-      event.stopPropagation()
+      event.stopPropagation();
-    }
+    };
   },
   watch: {
-    'activeData.label': function (val, oldVal) {
+    "activeData.label": function (val, oldVal) {
       if (
-        this.activeData.placeholder === undefined
+        this.activeData.placeholder === undefined ||
-        || !this.activeData.tag
+        !this.activeData.tag ||
-        || oldActiveId !== this.activeId
+        oldActiveId !== this.activeId
       ) {
-        return
+        return;
       }
-      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
+      this.activeData.placeholder =
+        this.activeData.placeholder.replace(oldVal, "") + val;
     },
     activeId: {
       handler(val) {
-        oldActiveId = val
+        oldActiveId = val;
+      },
+      immediate: true,
     },
-      immediate: true
-    }
   },
   mounted() {
-    const clipboard = new ClipboardJS('#copyNode', {
+    const clipboard = new ClipboardJS("#copyNode", {
-      text: trigger => {
+      text: (trigger) => {
-        const codeStr = this.generateCode()
+        const codeStr = this.generateCode();
         this.$notify({
-          title: '成功',
+          title: "成功",
-          message: '代码已复制到剪切板，可粘贴。',
+          message: "代码已复制到剪切板，可粘贴。",
-          type: 'success'
+          type: "success",
-        })
+        });
-        return codeStr
+        return codeStr;
-      }
+      },
-    })
+    });
-    clipboard.on('error', e => {
+    clipboard.on("error", (e) => {
-      this.$message.error('代码复制失败')
+      this.$message.error("代码复制失败");
-    })
+    });
   },
   methods: {
     activeFormItem(element) {
-      this.activeData = element
+      this.activeData = element;
-      this.activeId = element.formId
+      this.activeId = element.formId;
     },
     onEnd(obj, a) {
       if (obj.from !== obj.to) {
-        this.activeData = tempActiveData
+        this.activeData = tempActiveData;
-        this.activeId = this.idGlobal
+        this.activeId = this.idGlobal;
       }
     },
     addComponent(item) {
-      const clone = this.cloneComponent(item)
+      const clone = this.cloneComponent(item);
-      this.drawingList.push(clone)
+      this.drawingList.push(clone);
-      this.activeFormItem(clone)
+      this.activeFormItem(clone);
     },
     cloneComponent(origin) {
-      const clone = JSON.parse(JSON.stringify(origin))
+      const clone = JSON.parse(JSON.stringify(origin));
-      clone.formId = ++this.idGlobal
+      clone.formId = ++this.idGlobal;
-      clone.span = formConf.span
+      clone.span = formConf.span;
-      clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
+      clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件
-      if (!clone.layout) clone.layout = 'colFormItem'
+      if (!clone.layout) clone.layout = "colFormItem";
-      if (clone.layout === 'colFormItem') {
+      if (clone.layout === "colFormItem") {
-        clone.vModel = `field${this.idGlobal}`
+        clone.vModel = `field${this.idGlobal}`;
-        clone.placeholder !== undefined && (clone.placeholder += clone.label)
+        clone.placeholder !== undefined && (clone.placeholder += clone.label);
-        tempActiveData = clone
+        tempActiveData = clone;
-      } else if (clone.layout === 'rowFormItem') {
+      } else if (clone.layout === "rowFormItem") {
-        delete clone.label
+        delete clone.label;
-        clone.componentName = `row${this.idGlobal}`
+        clone.componentName = `row${this.idGlobal}`;
-        clone.gutter = this.formConf.gutter
+        clone.gutter = this.formConf.gutter;
-        tempActiveData = clone
+        tempActiveData = clone;
       }
-      return tempActiveData
+      return tempActiveData;
     },
     AssembleFormData() {
       this.formData = {
         fields: JSON.parse(JSON.stringify(this.drawingList)),
-        ...this.formConf
+        ...this.formConf,
-      }
+      };
     },
     generate(data) {
-      const func = this[`exec${titleCase(this.operationType)}`]
+      const func = this[`exec${titleCase(this.operationType)}`];
-      this.generateConf = data
+      this.generateConf = data;
-      func && func(data)
+      func && func(data);
     },
     execRun(data) {
-      this.AssembleFormData()
+      this.AssembleFormData();
-      this.drawerVisible = true
+      this.drawerVisible = true;
     },
     execDownload(data) {
-      const codeStr = this.generateCode()
+      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)
+      this.$download.saveAs(blob, data.fileName);
     },
     execCopy(data) {
-      document.getElementById('copyNode').click()
+      document.getElementById("copyNode").click();
     },
     empty() {
-      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
+      this.$confirm("确定要清空所有组件吗？", "提示", { type: "warning" }).then(
         () => {
-          this.drawingList = []
+          this.drawingList = [];
         }
-      )
+      );
     },
     drawingItemCopy(item, parent) {
-      let clone = JSON.parse(JSON.stringify(item))
+      let clone = JSON.parse(JSON.stringify(item));
-      clone = this.createIdAndKey(clone)
+      clone = this.createIdAndKey(clone);
-      parent.push(clone)
+      parent.push(clone);
-      this.activeFormItem(clone)
+      this.activeFormItem(clone);
     },
     createIdAndKey(item) {
-      item.formId = ++this.idGlobal
+      item.formId = ++this.idGlobal;
-      item.renderKey = +new Date()
+      item.renderKey = +new Date();
-      if (item.layout === 'colFormItem') {
+      if (item.layout === "colFormItem") {
-        item.vModel = `field${this.idGlobal}`
+        item.vModel = `field${this.idGlobal}`;
-      } else if (item.layout === 'rowFormItem') {
+      } else if (item.layout === "rowFormItem") {
-        item.componentName = `row${this.idGlobal}`
+        item.componentName = `row${this.idGlobal}`;
       }
       if (Array.isArray(item.children)) {
-        item.children = item.children.map(childItem => this.createIdAndKey(childItem))
+        item.children = item.children.map((childItem) =>
+          this.createIdAndKey(childItem)
+        );
       }
-      return item
+      return item;
     },
     drawingItemDelete(index, parent) {
-      parent.splice(index, 1)
+      parent.splice(index, 1);
       this.$nextTick(() => {
-        const len = this.drawingList.length
+        const len = this.drawingList.length;
         if (len) {
-          this.activeFormItem(this.drawingList[len - 1])
+          this.activeFormItem(this.drawingList[len - 1]);
         }
-      })
+      });
     },
     generateCode() {
-      const { type } = this.generateConf
+      const { type } = this.generateConf;
-      this.AssembleFormData()
+      this.AssembleFormData();
-      const script = vueScript(makeUpJs(this.formData, type))
+      const script = vueScript(makeUpJs(this.formData, type));
-      const html = vueTemplate(makeUpHtml(this.formData, type))
+      const html = vueTemplate(makeUpHtml(this.formData, type));
-      const css = cssStyle(makeUpCss(this.formData))
+      const css = cssStyle(makeUpCss(this.formData));
-      return beautifier.html(html + script + css, beautifierConf.html)
+      return beautifier.html(html + script + css, beautifierConf.html);
     },
     download() {
-      this.dialogVisible = true
+      this.dialogVisible = true;
-      this.showFileName = true
+      this.showFileName = true;
-      this.operationType = 'download'
+      this.operationType = "download";
     },
     run() {
-      this.dialogVisible = true
+      this.dialogVisible = true;
-      this.showFileName = false
+      this.showFileName = false;
-      this.operationType = 'run'
+      this.operationType = "run";
     },
     copy() {
-      this.dialogVisible = true
+      this.dialogVisible = true;
-      this.showFileName = false
+      this.showFileName = false;
-      this.operationType = 'copy'
+      this.operationType = "copy";
     },
     tagChange(newTag) {
-      newTag = this.cloneComponent(newTag)
+      newTag = this.cloneComponent(newTag);
-      newTag.vModel = this.activeData.vModel
+      newTag.vModel = this.activeData.vModel;
-      newTag.formId = this.activeId
+      newTag.formId = this.activeId;
-      newTag.span = this.activeData.span
+      newTag.span = this.activeData.span;
-      delete this.activeData.tag
+      delete this.activeData.tag;
-      delete this.activeData.tagIcon
+      delete this.activeData.tagIcon;
-      delete this.activeData.document
+      delete this.activeData.document;
-      Object.keys(newTag).forEach(key => {
+      Object.keys(newTag).forEach((key) => {
-        if (this.activeData[key] !== undefined
+        if (
-          && typeof this.activeData[key] === typeof newTag[key]) {
+          this.activeData[key] !== undefined &&
-          newTag[key] = this.activeData[key]
+          typeof this.activeData[key] === typeof newTag[key]
+        ) {
+          newTag[key] = this.activeData[key];
         }
-      })
+      });
-      this.activeData = newTag
+      this.activeData = newTag;
-      this.updateDrawingList(newTag, this.drawingList)
+      this.updateDrawingList(newTag, this.drawingList);
     },
     updateDrawingList(newTag, list) {
-      const index = list.findIndex(item => item.formId === this.activeId)
+      const index = list.findIndex((item) => item.formId === this.activeId);
       if (index > -1) {
-        list.splice(index, 1, newTag)
+        list.splice(index, 1, newTag);
       } else {
-        list.forEach(item => {
+        list.forEach((item) => {
-          if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
+          if (Array.isArray(item.children))
-        })
+            this.updateDrawingList(newTag, item.children);
-      }
+        });
-    }
-  }
       }
+    },
+  },
+};
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 .editor-tabs {
   background: #121315;
   .el-tabs__header {
@@ -445,7 +482,7 @@ export default {
     cursor: pointer;
     font-size: 12px;
     &:hover {
-      background: rgba(210, 23, 23, 0.5)
+      background: rgba(210, 23, 23, 0.5);
     }
   }
   & + .reg-item {
@@ -474,7 +511,7 @@ export default {
     margin-left: 6px;
   }
   .el-icon-plus {
-    color: #409EFF;
+    color: #409eff;
   }
   .el-icon-delete {
     color: #157a0c;
@@ -494,7 +531,7 @@ export default {
 }
 
 $selectedColor: #f6f7ff;
-$lighterBlue: #409EFF;
+$lighterBlue: #409eff;
 
 .container {
   position: relative;
@@ -585,12 +622,12 @@ $lighterBlue: #409EFF;
   height: 42px;
   text-align: right;
   padding: 0 15px;
-  box-sizing: border-box;;
+  box-sizing: border-box;
   border: 1px solid #f1e8e8;
   border-top: none;
   border-left: none;
   .delete-btn {
-    color: #F56C6C;
+    color: #f56c6c;
   }
 }
 .logo-wrapper {
@@ -665,7 +702,8 @@ $lighterBlue: #409EFF;
       background: $selectedColor;
       border-radius: 6px;
     }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
       display: initial;
     }
     & > .component-name {
@@ -719,17 +757,20 @@ $lighterBlue: #409EFF;
     padding: 0 6px;
   }
 }
-.drawing-item, .drawing-row-item{
+.drawing-item,
+.drawing-row-item {
   &:hover {
     & > .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;
@@ -755,11 +796,11 @@ $lighterBlue: #409EFF;
   }
   & > .drawing-item-delete {
     right: 24px;
-    border-color: #F56C6C;
+    border-color: #f56c6c;
-    color: #F56C6C;
+    color: #f56c6c;
     background: #fff;
     &:hover {
-      background: #F56C6C;
+      background: #f56c6c;
       color: #fff;
     }
   }