diff --git a/static/js/app/index.js b/static/js/app/index.js
index f4fa8f9..8c3fb27 100644
--- a/static/js/app/index.js
+++ b/static/js/app/index.js
@@ -35,8 +35,10 @@ window.addEventListener('DOMContentLoaded', function (){
         }
       },
       events: {
-        'change-active': function (index){
+        'change-active': function (index, setting){
           this.activeIndex = index;
+
+          this.$broadcast('setting-toggle', setting);
         },
         'save-configure': function (){
           ipc.send('app-configure', 'save', util.normalize(this.configure));
diff --git a/static/js/components/app-configure/index.js b/static/js/components/app-configure/index.js
index 596768b..63ba9db 100644
--- a/static/js/components/app-configure/index.js
+++ b/static/js/components/app-configure/index.js
@@ -46,10 +46,10 @@ module.exports = Vue.component('app-configure', {
       this.showPopup = !this.showPopup;
 
       if (!this.showPopup) {
-        this.name = '';
-        this.path = '';
         this.submitError = '';
-        this.$broadcast('clean-error');
+
+        // clean imput
+        this.$broadcast('reset-form');
       }
     },
     add: function (){
@@ -62,13 +62,13 @@ module.exports = Vue.component('app-configure', {
           this.showPopup = false;
           this.configure.projects.push({ name: this.name, path: this.path });
 
-          // clean imput
-          this.name = '';
-          this.path = '';
           this.submitError = '';
 
+          // clean imput
+          this.$broadcast('reset-form');
+
           // send message
-          this.$dispatch('change-active', this.configure.projects.length - 1);
+          this.$dispatch('change-active', this.configure.projects.length - 1, true);
           this.$dispatch('save-configure');
         }
       }
diff --git a/static/js/components/app-main/index.js b/static/js/components/app-main/index.js
index ae9b413..bd0a3dc 100644
--- a/static/js/components/app-main/index.js
+++ b/static/js/components/app-main/index.js
@@ -5,6 +5,7 @@
 
 var fs = require('fs');
 var path = require('path');
+var util = require('../../util');
 var Vue = require('../../vue/vue');
 
 require('../project-configure');
@@ -36,7 +37,7 @@ module.exports = Vue.component('app-main', {
   },
   computed: {
     project: function (){
-      var project = JSON.parse(JSON.stringify(this.projects[this.activeIndex]));
+      var project = util.clone(this.projects[this.activeIndex]);
 
       if (!project.env) {
         project.env = [];
@@ -65,10 +66,14 @@ module.exports = Vue.component('app-main', {
     remove: function (){
       this.projects.splice(this.activeIndex, 1);
       this.activeIndex = 0;
+
       this.$dispatch('save-configure');
     }
   },
   events: {
+    'setting-toggle': function (flag){
+      this.showSetting = flag;
+    },
     edit: function (project){
       this.projects.$set(this.activeIndex, project);
       this.$dispatch('save-configure');
diff --git a/static/js/components/dynamic-item/index.js b/static/js/components/dynamic-item/index.js
index 2566e44..8729f16 100644
--- a/static/js/components/dynamic-item/index.js
+++ b/static/js/components/dynamic-item/index.js
@@ -91,7 +91,9 @@ module.exports = Vue.component('dynamic-item', {
     }
   },
   events: {
-    'clean-error': function (){
+    'reset-form': function (){
+      this.name = '';
+      this.value = '';
       this.nameError = '';
       this.valueError = '';
     }
diff --git a/static/js/components/project-base/index.js b/static/js/components/project-base/index.js
index 05f9bf3..900af2c 100644
--- a/static/js/components/project-base/index.js
+++ b/static/js/components/project-base/index.js
@@ -38,7 +38,9 @@ module.exports = Vue.component('project-base', {
     }
   },
   events: {
-    'clean-error': function (){
+    'reset-form': function (){
+      this.name = '';
+      this.path = '';
       this.nameError = '';
       this.pathError = '';
     },
diff --git a/static/js/components/project-configure/index.js b/static/js/components/project-configure/index.js
index c67c744..323ca6d 100644
--- a/static/js/components/project-configure/index.js
+++ b/static/js/components/project-configure/index.js
@@ -6,6 +6,7 @@
 
 var fs = require('fs');
 var path = require('path');
+var util = require('../../util');
 var Vue = require('../../vue/vue');
 
 require('../project-base');
@@ -33,12 +34,13 @@ module.exports = Vue.component('project-configure', {
     return {
       nameError: '',
       pathError: '',
-      submitError: ''
+      submitError: '',
+      projectClone: null
     }
   },
-  computed: {
-    projectClone: function (){
-      return JSON.parse(JSON.stringify(this.project));
+  watch: {
+    project: function (project){
+      this.projectClone = util.clone(project);
     }
   },
   methods: {
@@ -55,33 +57,32 @@ module.exports = Vue.component('project-configure', {
         if (name !== originName && this.uniqueProjects[name]) {
           this.submitError = '项目已存在';
         } else {
+          this.show = false;
+
           // clean error
           this.submitError = '';
 
-          this.show = false;
           // send message
-          this.$dispatch('edit', this.projectClone);
+          this.$dispatch('edit', util.clone(this.projectClone));
         }
       }
     },
     cancel: function (){
-      var origin = JSON.parse(JSON.stringify(this.project));
-
       this.show = false;
-      this.project = JSON.parse(JSON.stringify(this.projectClone));
+      this.submitError = '';
 
-      this.$nextTick(function (){
-        this.project = origin;
-      });
+      this.$broadcast('reset-form');
+      
+      this.projectClone = util.clone(this.project);
     }
   },
   events: {
     'configure-refresh': function (){
       this.submitError = '';
-      this.$broadcast('clean-error');
+      this.$broadcast('reset-form');
     }
   },
   created: function (){
-    window.app = this;
+    this.projectClone = util.clone(this.project);
   }
 });