diff --git a/static/js/components/app-configure/app-configure.html b/static/js/components/app-configure/app-configure.html
index fe0e0d8..ebdb07e 100644
--- a/static/js/components/app-configure/app-configure.html
+++ b/static/js/components/app-configure/app-configure.html
@@ -1,5 +1,5 @@
 <div class="fn-left">
-  <a @click="popupToggle" title="添加项目" class="ui-project-add" href="javascript:;">
+  <a v-el:popup-trigger title="添加项目" class="ui-project-add" href="javascript:;">
     <i class="icon-plus"></i>
     <i class="icon-expand"></i>
   </a>
@@ -10,7 +10,7 @@
     <i class="icon-export"></i>
   </a>
 </div>
-<div v-show="showPopup" class="ui-popup">
+<div v-el:popup v-show="showPopup" class="ui-popup">
   <div class="ui-popup-arrow">
     <em></em>
     <span></span>
@@ -19,10 +19,10 @@
     <div v-show="submitError" class="ui-submit-tips">{{ submitError }}</div>
     <form @submit.prevent="add" @focusin="focus">
       <ul>
-        <li is="project-base" :name.sync="name" :path.sync="path"></li>
+        <li v-ref:base is="project-base" :name.sync="name" :path.sync="path"></li>
         <li class="ui-popup-control">
           <input type="submit" class="ui-button" value="确定"/>
-          <input @click="popupToggle" type="button" class="ui-button ui-button-orange" value="取消"/>
+          <input @click.stop="hidePopup" type="button" class="ui-button ui-button-orange" value="取消"/>
         </li>
       </ul>
     </form>
diff --git a/static/js/components/app-configure/index.js b/static/js/components/app-configure/index.js
index 76e85c4..c7d4dc6 100644
--- a/static/js/components/app-configure/index.js
+++ b/static/js/components/app-configure/index.js
@@ -42,17 +42,14 @@ module.exports = Vue.component('app-configure', {
     appConfigure: function (command, configure){
       ipc.send('app-configure', command, configure);
     },
-    popupToggle: function (){
-      this.showPopup = !this.showPopup;
+    hidePopup: function (){
+      this.showPopup = false;
+      this.name = '';
+      this.path = '';
+      this.submitError = '';
 
-      if (!this.showPopup) {
-        this.name = '';
-        this.path = '';
-        this.submitError = '';
-
-        // clean error
-        this.$broadcast('reset-error');
-      }
+      // clean error
+      this.$broadcast('reset-error');
     },
     add: function (){
       this.$broadcast('submit');
@@ -77,5 +74,20 @@ module.exports = Vue.component('app-configure', {
         }
       }
     }
+  },
+  created: function (){
+    var context = this;
+
+    document.addEventListener('click', function (event){
+      var target = event.target;
+      var popup = context.$els.popup;
+      var trigger = context.$els.popupTrigger;
+
+      if (trigger.contains(target) || popup.contains(target)) {
+        context.showPopup = true;
+      } else {
+        context.hidePopup();
+      }
+    });
   }
 });