update files

static/js/components/app-main/app-main.html

@@ -3,7 +3,7 @@
   :project="project"
   :unique.sync="unique">
 </project-configure>
-<div v-show="project.name && project.path" class="ui-project-stage">
+<div v-show="!project.empty" class="ui-project-stage">
   <div class="ui-control-bar fn-clear">
     <div class="ui-control-operate fn-left">
       <a title="删除项目" href="javascript:;" @click="remove"><i class="icon-trash"></i></a>
@@ -18,8 +18,8 @@
           </a>
         </li>
         <li v-if="moreCommand.length" class="ui-command-more">
-          <a v-el:expand-trigger href="javascript:;">更多&nbsp;<i class="icon-expand"></i></a>
-          <ul v-show="showMoreCommand" class="ui-command-popup">
+          <a v-el:expand-trigger title="更多" href="javascript:;">更多&nbsp;<i class="icon-expand"></i></a>
+          <ul v-show="expandCommand" class="ui-command-popup">
             <li v-for="moreCmd in moreCommand">
               <a :title="moreCmd.name" href="javascript:;">
                 <i class="icon-play"></i>

static/js/components/app-main/index.js

@@ -9,8 +9,26 @@ var path = require('path');
 var util = require('../../util');
 var Vue = require('../../vue/vue');
 
+const EMPTYPROJECT = {
+  name: '',
+  path: '',
+  env: [],
+  command: [],
+  empty: true
+};
+
 require('../project-configure');
 
+/**
+ * clone project
+ * @param projects
+ * @param index
+ * @returns {*}
+ */
+function clone(projects, index){
+  return util.clone(projects[index] || EMPTYPROJECT);
+}
+
 module.exports = Vue.component('app-main', {
   template: fs.readFileSync(path.join(__dirname, 'app-main.html')).toString(),
   props: {
@@ -30,25 +48,26 @@ module.exports = Vue.component('app-main', {
     }
   },
   data: function (){
+    var project = clone(this.projects, this.activeIndex);
+
     return {
       showSetting: false,
-      showMoreCommand: false
+      expandCommand: false,
+      project: project,
+      command: project.command.slice(0, 3),
+      moreCommand: project.command.slice(3)
     };
   },
-  computed: {
+  watch: {
+    projects: function (){
+      this.project = clone(this.projects, this.activeIndex);
+    },
+    activeIndex: function (){
+      this.project = clone(this.projects, this.activeIndex);
+    },
     project: function (){
-      return util.clone(this.projects[this.activeIndex]) || {
-          name: '',
-          path: '',
-          env: [],
-          command: []
-        };
-    },
-    command: function (){
-      return this.project.command.slice(0, 3);
-    },
-    moreCommand: function (){
-      return this.project.command.slice(3);
+      this.command = this.project.command.slice(0, 3);
+      this.moreCommand = this.project.command.slice(3);
     }
   },
   methods: {
@@ -56,9 +75,13 @@ module.exports = Vue.component('app-main', {
       this.showSetting = true;
     },
     remove: function (){
+      // remove project
       this.projects.splice(this.activeIndex, 1);
+
+      // change active
       this.activeIndex = 0;
 
+      // save configure
       this.$dispatch('save-configure');
     }
   },
@@ -78,7 +101,7 @@ module.exports = Vue.component('app-main', {
       var target = event.target;
       var trigger = context.$els.expandTrigger;
 
-      context.showMoreCommand = !!trigger.contains(target);
-    });
+      context.expandCommand = trigger && trigger.contains(target);
+    }, false);
   }
 });