update files

index.html

@@ -40,44 +40,7 @@
         </div>
         <div class="ui-project-terminal"></div>
       </div>
-      <div class="ui-project-setting">
+      <project-configure :active-index.once="activeIndex" :projects.sync="configure.projects" ：unique-projects.sync="{}"></project-configure>
-        <form>
-          <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="取消"/>
-            </div>
-          </div>
-          <div class="ui-project-configure">
-            <div class="ui-submit-tips">项目已经存在</div>
-            <ul>
-              <li>
-                <label>项目名称：</label>
-                <input type="text" placeholder="项目名称"/>
-              </li>
-              <li class="ui-item-error">
-                <label class="fn-invisible">&emsp;&emsp;&emsp;&emsp;&emsp;</label>
-                <span>项目名称不能为空</span>
-              </li>
-              <li>
-                <directory label="项目路径"></directory>
-              </li>
-              <li class="ui-item-error">
-                <label class="fn-invisible">&emsp;&emsp;&emsp;&emsp;&emsp;</label>
-                <span>项目路径不能为空</span>
-              </li>
-              <li id="add-env" class="ui-sub-item">
-                <label>环境变量：</label>
-                <dynamic-item name-label="变量名" value-label="变量值"></dynamic-item>
-              </li>
-              <li id="add-cmd" class="ui-sub-item">
-                <label>项目命令：</label>
-                <dynamic-item name-label="名称" value-label="命令"></dynamic-item>
-              </li>
-            </ul>
-          </div>
-        </form>
-      </div>
     </main>
   </body>
 </html>

static/js/app/index.js

@@ -13,6 +13,7 @@ require('../components/app-nav');
 require('../components/directory');
 require('../components/project-base');
 require('../components/dynamic-item');
+require('../components/project-configure');
 
 window.addEventListener('DOMContentLoaded', function (){
   function normalize(configure){

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

@@ -17,7 +17,7 @@
   </div>
   <div class="ui-popup-content">
     <div v-show="submitError" class="ui-submit-tips">{{ submitError }}</div>
-    <form @submit.prevent="addProject" @focusin="focus">
+    <form @submit.prevent="add" @focusin="focus">
       <ul>
         <li is="project-base" :name.sync="name" :path.sync="path"></li>
         <li class="ui-popup-control">

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

@@ -50,7 +50,7 @@ module.exports = Vue.component('app-configure', {
         this.$broadcast('clean-error');
       }
     },
-    addProject: function (){
+    add: function (){
       this.$broadcast('submit');
 
       if (this.name && this.path) {

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

@@ -0,0 +1,25 @@
+<project-configure></project-configure>
+<div class="ui-project-stage fn-hide">
+  <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>
+    </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">
+          <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>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="ui-project-terminal"></div>
+</div>

static/js/components/dynamic-item/index.js

@@ -23,6 +23,7 @@ module.exports = Vue.component('dynamic-item', {
     },
     items: {
       type: Array,
+      twoWay: true,
       default: function (){
         return [];
       }

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

@@ -9,32 +9,27 @@ var path = require('path');
 var ipc = require('ipc-renderer');
 var Vue = require('../../vue/vue');
 
-module.exports = Vue.component('app-configure', {
+module.exports = Vue.component('project-configure', {
-  template: fs.readFileSync(path.join(__dirname, 'app-configure.html')).toString(),
+  template: fs.readFileSync(path.join(__dirname, 'project-configure.html')).toString(),
   props: {
-    configure: {
+    activeIndex: {
+      type: Number,
+      required: true
+    },
+    projects: {
+      type: Object,
+      twoWay: true,
+      required: true
+    },
+    uniqueProjects: {
       type: Object,
       twoWay: true,
       required: true
     }
   },
-  data: function (){
-    return {
-      name: '',
-      path: '',
-      submitError: '',
-      popup: false
-    }
-  },
   computed: {
-    uniqueCache: function (){
+    project: function (){
-      var cache = {};
+      return this.projects[this.activeIndex] || { name: '', path: '', env: [], command: [] };
-
-      this.configure.projects.forEach(function (project){
-        cache[project.name] = true;
-      });
-
-      return cache;
     }
   },
   methods: {
@@ -43,39 +38,10 @@ module.exports = Vue.component('app-configure', {
         this.submitError = '';
       }
     },
-    appConfigure: function (command, configure){
+    edit: function (){
-      ipc.send('app-configure', command, configure);
-    },
-    popupToggle: function (){
-      this.popup = !this.popup;
-
-      if (!this.popup) {
-        this.name = '';
-        this.path = '';
-        this.submitError = '';
-        this.$broadcast('clean-error');
-      }
-    },
-    addProject: function (){
       this.$broadcast('submit');
 
-      if (this.name && this.path) {
+      console.log(this.project);
-        if (this.uniqueCache[this.name]) {
-          this.submitError = '项目已存在';
-        } else {
-          this.popup = false;
-          this.configure.projects.push({ name: this.name, path: this.path });
-
-          // clean imput
-          this.name = '';
-          this.path = '';
-          this.submitError = '';
-
-          // send message
-          this.$dispatch('change-active', this.configure.projects.length - 1);
-          this.$dispatch('save-configure');
-        }
-      }
     }
   }
 });

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

@@ -1,5 +1,5 @@
 <div class="ui-project-setting">
-  <form>
+  <form @sumbit.prevent="edit">
     <div class="ui-control-bar fn-clear">
       <div class="fn-right">
         <input type="submit" class="ui-button" value="确认"/>
@@ -8,28 +8,14 @@
     </div>
     <div class="ui-project-configure">
       <ul>
-        <li>
+        <li is="project-base" :name.sync="project.name" :path.sync="project.path"></li>
-          <label>项目名称：</label>
+        <li class="ui-sub-item">
-          <input type="text" placeholder="项目名称"/>
-        </li>
-        <li class="ui-item-error">
-          <label class="fn-invisible">&emsp;&emsp;&emsp;&emsp;&emsp;</label>
-          <span><i class="icon-expand"></i>项目名称不能为空</span>
-        </li>
-        <li>
-          <directory label="项目路径"></directory>
-        </li>
-        <li class="ui-item-error">
-          <label class="fn-invisible">&emsp;&emsp;&emsp;&emsp;&emsp;</label>
-          <span><i class="icon-expand"></i>项目路径不能为空</span>
-        </li>
-        <li id="add-env" class="ui-sub-item">
           <label>环境变量：</label>
-          <dynamic-item name-label="变量名" value-label="变量值"></dynamic-item>
+          <dynamic-item name-label="变量名" value-label="变量值" :items.sync="project.env"></dynamic-item>
         </li>
         <li id="add-cmd" class="ui-sub-item">
           <label>项目命令：</label>
-          <dynamic-item name-label="名称" value-label="命令"></dynamic-item>
+          <dynamic-item name-label="名称" value-label="命令" :items.sync="project.command"></dynamic-item>
         </li>
       </ul>
     </div>