update files

index.html

@@ -49,6 +49,7 @@
             </div>
           </div>
           <div class="ui-project-configure">
+            <div class="ui-submit-tips">项目已经存在</div>
             <ul>
               <li>
                 <label>项目名称：</label>

static/css/index.css

@@ -389,6 +389,7 @@ header [class*=" icon-"] {
 .ui-project-terminal,
 .ui-project-configure {
   width: 100%;
+  padding: 30px 0;
   box-sizing: border-box;
   height: calc(100% - 39px);
   border-top: 1px dashed #ccc;
@@ -406,7 +407,6 @@ header [class*=" icon-"] {
   text-align: center;
 }
 .ui-project-configure ul {
-  padding: 30px 0;
   text-align: left;
   display: inline-block;
 }
@@ -461,3 +461,8 @@ header [class*=" icon-"] {
   margin-top: -11px;
   margin-left: -5px;
 }
+.ui-submit-tips {
+  color: #f00;
+  text-align: center;
+  padding: 0 0 15px;
+}

static/js/app/index.js

@@ -11,6 +11,7 @@ require('../components/app-configure');
 require('../components/window-control');
 require('../components/app-nav');
 require('../components/directory');
+require('../components/project-base');
 require('../components/dynamic-item');
 
 window.addEventListener('DOMContentLoaded', function (){
@@ -18,11 +19,11 @@ window.addEventListener('DOMContentLoaded', function (){
     el: '#app',
     data: {
       activeIndex: 0,
-      configure: {}
+      configure: { projects: [] }
     },
     events: {
       'save-configure': function (){
-        
+
       }
     }
   });

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

@@ -16,23 +16,10 @@
     <span></span>
   </div>
   <div class="ui-popup-content">
-    <form>
+    <div v-show="submitError" class="ui-submit-tips">{{ submitError }}</div>
+    <form @submit.prevent="addProject">
       <ul>
-        <li>
+        <li is="project-base" :name.sync="name" :path.sync="path"></li>
-          <label>项目名称：</label>
-          <input type="text" placeholder="项目名称"/>
-        </li>
-        <li class="ui-item-error">
-          <label class="fn-invisible">项目名称：</label>
-          <span><i class="icon-expand"></i>asdasdasdsa</span>
-        </li>
-        <li id="popup-open-dir">
-          <directory label="项目路径"></directory>
-        </li>
-        <li class="ui-item-error">
-          <label class="fn-invisible">项目名称：</label>
-          <span><i class="icon-expand"></i>asdasdasdsa</span>
-        </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="取消"/>

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

@@ -20,6 +20,10 @@ module.exports = Vue.component('app-configure', {
   },
   data: function (){
     return {
+      name: '',
+      path: '',
+      _cached: {},
+      submitError: '',
       popup: false
     }
   },
@@ -29,9 +33,34 @@ module.exports = Vue.component('app-configure', {
     },
     popupToggle: function (){
       this.popup = !this.popup;
+
+      if (!this.popup) {
+        this.submitError = '';
+        this.$broadcast('clean-error');
+      }
     },
     addProject: function (){
-      
+      this.$broadcast('submit');
+
+      if (this.name && this.path) {
+        if (this.$data._cached[this.name]) {
+          this.submitError = '项目已存在';
+        } else {
+          this.popup = false;
+          this.configure.projects.push({ name: this.name, path: this.path });
+          this.$data._cached[this.name] = true;
+
+          // clean imput
+          this.name = '';
+          this.path = '';
+          this.submitError = '';
+        }
+      }
     }
+  },
+  created: function (){
+    this.configure.projects.forEach(function (project){
+      this.$data._cached[project.name] = true;
+    }, this);
   }
 });

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

@@ -82,6 +82,12 @@ module.exports = Vue.component('dynamic-item', {
       delete this.$data._cached[item.name];
     }
   },
+  events: {
+    'clean-error': function (){
+      this.nameError = '';
+      this.valueError = '';
+    }
+  },
   created: function (){
     this.items.forEach(function (item){
       this.$data._cached[item.name] = true;

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

@@ -8,7 +8,7 @@ var fs = require('fs');
 var path = require('path');
 var Vue = require('../../vue/vue');
 
-module.exports = Vue.component('app-configure', {
+module.exports = Vue.component('project-base', {
   template: fs.readFileSync(path.join(__dirname, 'project-base.html')).toString(),
   props: {
     name: {
@@ -28,7 +28,16 @@ module.exports = Vue.component('app-configure', {
       pathError: ''
     };
   },
+  methods: {
+    focus: function (key){
+      this[key] = '';
+    }
+  },
   events: {
+    'clean-error': function (){
+      this.nameError = '';
+      this.pathError = '';
+    },
     'submit': function (){
       this.name = this.name.trim();
       this.path = this.path.trim();

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

@@ -0,0 +1,37 @@
+<div class="ui-project-setting">
+  <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">
+      <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><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>
+        </li>
+        <li id="add-cmd" class="ui-sub-item">
+          <label>项目命令：</label>
+          <dynamic-item name-label="名称" value-label="命令"></dynamic-item>
+        </li>
+      </ul>
+    </div>
+  </form>
+</div>