update files

static/css/index.css

@@ -313,6 +313,7 @@ header [class*=" icon-"] {
   vertical-align: middle;
 }
 .ui-project-main {
+  position: relative;
   box-sizing: border-box;
   width: 80%;
   height: calc(100% - 31px);
@@ -324,6 +325,13 @@ header [class*=" icon-"] {
 .ui-project-setting form {
   width: 100%;
   height: 100%;
+  background-color: #fff;
+}
+.ui-project-setting {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
 }
 .ui-control-bar {
   height: 39px;

static/js/app/index.js

@@ -15,10 +15,6 @@ require('../components/app-main');
 window.addEventListener('DOMContentLoaded', function (){
   var app;
 
-  function normalize(configure){
-    return JSON.parse(JSON.stringify(configure));
-  }
-
   function init(configure){
     app = new Vue({
       el: '#app',
@@ -42,7 +38,7 @@ window.addEventListener('DOMContentLoaded', function (){
           this.activeIndex = index;
         },
         'save-configure': function (){
-          ipc.send('app-configure', 'save', normalize(this.configure));
+          ipc.send('app-configure', 'save', JSON.parse(JSON.stringify(this.configure)));
         }
       }
     });

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

@@ -10,7 +10,7 @@
     <i class="icon-export"></i>
   </a>
 </div>
-<div v-show="popup" class="ui-popup">
+<div v-show="showPopup" class="ui-popup">
   <div class="ui-popup-arrow">
     <em></em>
     <span></span>

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

@@ -30,7 +30,7 @@ module.exports = Vue.component('app-configure', {
       name: '',
       path: '',
       submitError: '',
-      popup: false
+      showPopup: false
     }
   },
   methods: {
@@ -43,9 +43,9 @@ module.exports = Vue.component('app-configure', {
       ipc.send('app-configure', command, configure);
     },
     popupToggle: function (){
-      this.popup = !this.popup;
+      this.showPopup = !this.showPopup;
 
-      if (!this.popup) {
+      if (!this.showPopup) {
         this.name = '';
         this.path = '';
         this.submitError = '';
@@ -59,7 +59,7 @@ module.exports = Vue.component('app-configure', {
         if (this.uniqueProjects[this.name]) {
           this.submitError = '项目已存在';
         } else {
-          this.popup = false;
+          this.showPopup = false;
           this.configure.projects.push({ name: this.name, path: this.path });
 
           // clean imput

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

@@ -1,21 +1,28 @@
-<project-configure :project="project" :unique-projects.sync="uniqueProjects"></project-configure>
-<div class="ui-project-stage fn-hide">
+<project-configure :show.sync="showSetting" :project="project" :unique-projects.sync="uniqueProjects">
+</project-configure>
+<div class="ui-project-stage">
   <div class="ui-control-bar fn-clear">
     <div class="ui-control-operate fn-left">
-      <a title="删除项目" href="javascript:;"><i class="icon-trash"></i></a>
-      <a title="设置项目" href="javascript:;"><i class="icon-gear"></i></a>
+      <a title="删除项目" href="javascript:;" @click="remove"><i class="icon-trash"></i></a>
+      <a title="设置项目" href="javascript:;" @click="setting"><i class="icon-gear"></i></a>
     </div>
     <div class="fn-right">
       <ul class="ui-command fn-clear">
-        <li><a href="javascript:;"><i class="icon-play"></i>命令1</a></li>
-        <li><a href="javascript:;"><i class="icon-stop"></i>命令2</a></li>
-        <li><a href="javascript:;"><i class="icon-play"></i>命令3</a></li>
-        <li class="ui-command-more">
+        <li v-for="cmd in comand">
+          <a href="javascript:;">
+            <i class="icon-play"></i>
+            {{ cmd.name }}
+          </a>
+        </li>
+        <li v-if="moreCommand.length" class="ui-command-more">
           <a href="javascript:;">更多&nbsp;<i class="icon-expand"></i></a>
           <ul class="ui-command-popup fn-hide">
-            <li><a href="javascript:;"><i class="icon-play"></i>命令4</a></li>
-            <li><a href="javascript:;"><i class="icon-stop"></i>命令5</a></li>
-            <li><a href="javascript:;"><i class="icon-play"></i>命令6</a></li>
+            <li v-for="moreCmd in moreCommand">
+              <a href="javascript:;">
+                <i class="icon-play"></i>
+                {{ moreCmd.name }}
+              </a>
+            </li>
           </ul>
         </li>
       </ul>

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

@@ -5,7 +5,6 @@
 
 var fs = require('fs');
 var path = require('path');
-var ipc = require('ipc-renderer');
 var Vue = require('../../vue/vue');
 
 require('../project-configure');
@@ -29,11 +28,18 @@ module.exports = Vue.component('app-main', {
     }
   },
   data: function (){
-    return {};
+    return {
+      showSetting: false
+    };
   },
   computed: {
     project: function (){
-      var project = this.projects[this.activeIndex];
+      var project = this.projects[this.activeIndex] || {
+          name: '',
+          path: '',
+          env: [],
+          command: []
+        };
 
       if (!project.env) {
         project.env = [];
@@ -44,11 +50,22 @@ module.exports = Vue.component('app-main', {
       }
 
       return JSON.parse(JSON.stringify(project));
+    },
+    command: function (){
+      console.log(this.project.command.slice(0, 3));
+      return this.project.command.slice(0, 3);
+    },
+    moreCommand: function (){
+      return this.project.command.slice(3);
     }
   },
   methods: {
+    setting: function (){
+      this.showSetting = true;
+    },
     remove: function (){
       this.projects.splice(this.activeIndex, 1);
+      this.activeIndex = 0;
       this.$dispatch('save-configure');
     }
   },

static/js/components/project-configure/index.js

@@ -14,6 +14,11 @@ require('../dynamic-item');
 module.exports = Vue.component('project-configure', {
   template: fs.readFileSync(path.join(__dirname, 'project-configure.html')).toString(),
   props: {
+    show: {
+      type: Boolean,
+      twoWay: true,
+      default: false
+    },
     project: {
       type: Object,
       required: true
@@ -52,11 +57,14 @@ module.exports = Vue.component('project-configure', {
         } else {
           // clean error
           this.submitError = '';
-  
+
           // send message
           this.$dispatch('edit', this.projectClone);
         }
       }
+    },
+    cancel: function (){
+      this.show = false;
     }
   },
   events: {

static/js/components/project-configure/project-configure.html

@@ -1,9 +1,9 @@
-<div class="ui-project-setting">
-  <form @submit.prevent="edit">
+<div v-show="show" class="ui-project-setting">
+  <form @submit.prevent="edit" @focusin="focus">
     <div class="ui-control-bar fn-clear">
       <div class="fn-right">
         <input type="submit" class="ui-button" value="确认"/>
-        <input type="button" class="ui-button ui-button-orange" value="取消"/>
+        <input type="button" class="ui-button ui-button-orange" value="取消" @click="cancel"/>
       </div>
     </div>
     <div class="ui-project-configure">