添加/编辑/保存初步完成。

app/bundle.js

@@ -1605,8 +1605,6 @@ var _require = require('electron'),
 
 var platform = process.platform;
 
-ipcRenderer.setMaxListeners(20);
-
 var EventEmitter = require('events');
 
 var MyEmitter = function (_EventEmitter) {
@@ -1623,20 +1621,25 @@ var MyEmitter = function (_EventEmitter) {
 
 var evt = new MyEmitter();
 
+ipcRenderer.setMaxListeners(20);
+
 var x_get_idx = 0;
 
 /**
  * act
  * @param action {String}
- * @param [data] {Any}
- * @param callback {Function}
+ * @param args {Array}
  */
-function act(action, data, callback) {
+function act(action) {
+  for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
   var fn = ['_cb', new Date().getTime(), x_get_idx++].join('_');
 
-  if (!callback && typeof data === 'function') {
-    callback = data;
-    data = null;
+  var callback = void 0;
+  if (args.length > 0 && typeof args[args.length - 1] === 'function') {
+    callback = args.pop();
   }
 
   if (typeof callback === 'function') {
@@ -1647,20 +1650,21 @@ function act(action, data, callback) {
 
   ipcRenderer.send('x', {
     action: action,
-    data: data,
+    data: args,
     callback: fn
   });
 }
 
 function pact(action) {
-  for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
+  for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    args[_key2 - 1] = arguments[_key2];
   }
 
   return new Promise(function (resolve, reject) {
-    return act(action, args, function (err, result) {
+    args.push(function (err, result) {
       return err ? reject(err) : resolve(result);
     });
+    act.apply(undefined, [action].concat(args));
   });
 }
 
@@ -18977,6 +18981,10 @@ var _Agent = __webpack_require__(14);
 
 var _Agent2 = _interopRequireDefault(_Agent);
 
+var _index = __webpack_require__(219);
+
+var _index2 = _interopRequireDefault(_index);
+
 __webpack_require__(112);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19012,16 +19020,7 @@ var App = function (_React$Component) {
       _this.setState({ lang: lang });
     });
 
-    _Agent2.default.on('toggle_hosts', function (hosts, on) {
-      _Agent2.default.pact('toggleHosts', hosts.id, on).then(function () {
-        hosts.on = on;
-        _this.setState({
-          list: _this.state.list
-        });
-      }).catch(function (e) {
-        console.log(e);
-      });
-    });
+    _index2.default.reg(_this);
     return _this;
   }
 
@@ -19044,7 +19043,7 @@ var App = function (_React$Component) {
       var _this3 = this;
 
       if (hosts.is_sys) {
-        _Agent2.default.act('getSysHosts', function (e, _hosts) {
+        _Agent2.default.pact('getSysHosts').then(function (_hosts) {
           _this3.setState({
             sys_hosts: _hosts,
             current: _hosts
@@ -19064,8 +19063,7 @@ var App = function (_React$Component) {
       clearTimeout(this._t);
 
       this._t = setTimeout(function () {
-        //Agent.emit('change')
-        _Agent2.default.pact('saveHosts', _this4.state.list);
+        _Agent2.default.emit('save', _this4.state.list);
       }, 1000);
     }
   }, {
@@ -19731,7 +19729,6 @@ var EditPrompt = function (_React$Component) {
   }, {
     key: 'onOK',
     value: function onOK() {
-      console.log('ok');
       this.setState({
         title: (this.state.title || '').replace(/^\s+|\s+$/g, ''),
         url: (this.state.url || '').replace(/^\s+|\s+$/g, '')
@@ -19748,6 +19745,7 @@ var EditPrompt = function (_React$Component) {
       }
 
       var data = Object.assign({}, this.current_hosts, this.state, this.state.is_add ? {
+        id: (0, _makeId2.default)(),
         content: '# ' + this.state.title,
         on: false
       } : {});
@@ -19755,7 +19753,7 @@ var EditPrompt = function (_React$Component) {
       if (!data.id) data.id = (0, _makeId2.default)();
 
       delete data['is_add'];
-      _Agent2.default.emit('hosts_' + (this.state.is_add ? 'add' : 'edit') + 'ed', data, this.current_hosts);
+      _Agent2.default.emit('hosts_update', data);
 
       this.setState({
         show: false
@@ -20587,6 +20585,12 @@ var ListItem = function (_React$Component) {
 
     _this.is_sys = !!_this.props.sys;
     _this.state = {};
+
+    _Agent2.default.on('select', function (id) {
+      if (id && id === _this.props.data.id) {
+        _this.beSelected();
+      }
+    });
     return _this;
   }
 
@@ -34611,6 +34615,189 @@ module.exports = function () {
   return new Date().getTime() + '-' + Math.floor(Math.random() * 1e6);
 };
 
+/***/ }),
+/* 219 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+
+
+var _Agent = __webpack_require__(14);
+
+var _Agent2 = _interopRequireDefault(_Agent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var req = __webpack_require__(225);
+
+exports.reg = function (app) {
+  req.keys().map(function (fn) {
+    var m = fn.match(/^\.\/([\w\-]+)\.js$/);
+    var name = m ? m[1] : null;
+    if (!name || name === 'index') return;
+    _Agent2.default.on(name, function () {
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      var fn = __webpack_require__(221)("./" + name);
+      fn.apply(undefined, [app].concat(args));
+    });
+  });
+};
+
+/***/ }),
+/* 220 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+
+
+var _Agent = __webpack_require__(14);
+
+var _Agent2 = _interopRequireDefault(_Agent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = function (app, hosts, on) {
+  _Agent2.default.pact('toggleHosts', hosts.id, on).then(function () {
+    hosts.on = on;
+    app.setState({
+      list: app.state.list
+    });
+  }).catch(function (e) {
+    console.log(e);
+  });
+};
+
+/***/ }),
+/* 221 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var map = {
+	"./hosts_update": 226,
+	"./hosts_update.js": 226,
+	"./index": 219,
+	"./index.js": 219,
+	"./save": 222,
+	"./save.js": 222,
+	"./toggle_hosts": 220,
+	"./toggle_hosts.js": 220
+};
+function webpackContext(req) {
+	return __webpack_require__(webpackContextResolve(req));
+};
+function webpackContextResolve(req) {
+	var id = map[req];
+	if(!(id + 1)) // check for number or string
+		throw new Error("Cannot find module '" + req + "'.");
+	return id;
+};
+webpackContext.keys = function webpackContextKeys() {
+	return Object.keys(map);
+};
+webpackContext.resolve = webpackContextResolve;
+module.exports = webpackContext;
+webpackContext.id = 221;
+
+/***/ }),
+/* 222 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+
+
+var _Agent = __webpack_require__(14);
+
+var _Agent2 = _interopRequireDefault(_Agent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = function (app, list) {
+  _Agent2.default.pact('saveHosts', list);
+};
+
+/***/ }),
+/* 223 */,
+/* 224 */,
+/* 225 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var map = {
+	"./hosts_update.js": 226,
+	"./index.js": 219,
+	"./save.js": 222,
+	"./toggle_hosts.js": 220
+};
+function webpackContext(req) {
+	return __webpack_require__(webpackContextResolve(req));
+};
+function webpackContextResolve(req) {
+	var id = map[req];
+	if(!(id + 1)) // check for number or string
+		throw new Error("Cannot find module '" + req + "'.");
+	return id;
+};
+webpackContext.keys = function webpackContextKeys() {
+	return Object.keys(map);
+};
+webpackContext.resolve = webpackContextResolve;
+module.exports = webpackContext;
+webpackContext.id = 225;
+
+/***/ }),
+/* 226 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+
+
+var _Agent = __webpack_require__(14);
+
+var _Agent2 = _interopRequireDefault(_Agent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//import makeId from '../../app/libs/make-id'
+
+module.exports = function (app, hosts) {
+  var list = app.state.list;
+  var inner = list.find(function (item) {
+    return item.id === hosts.id;
+  });
+  if (!inner) {
+    list.push(Object.assign({}, hosts));
+  } else {
+    Object.assign(inner, hosts);
+  }
+
+  _Agent2.default.pact('saveHosts', list).then(function () {
+    app.setState({ list: list }, function () {
+      _Agent2.default.emit('select', hosts.id);
+    });
+  });
+};
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=bundle.js.map

app/server/Server.js

@@ -6,7 +6,7 @@
 'use strict'
 
 const {ipcMain} = require('electron')
-const actions = require('./actions')
+const actions = require('./actions/index')
 
 ipcMain.on('x', (e, d) => {
   let sender = e.sender

app/server/actions.js

@@ -1,8 +0,0 @@
-/**
- * @author oldj
- * @blog https://oldj.net
- */
-
-'use strict'
-
-module.exports = require('./actions/index')

ui/Agent.js

@@ -9,26 +9,25 @@ const IS_DEV = process.env.ENV === 'dev'
 const {ipcRenderer} = require('electron')
 const platform = process.platform
 
-ipcRenderer.setMaxListeners(20)
-
 const EventEmitter = require('events')
 class MyEmitter extends EventEmitter {}
-const evt = new MyEmitter();
+const evt = new MyEmitter()
+
+ipcRenderer.setMaxListeners(20)
 
 let x_get_idx = 0
 
 /**
  * act
  * @param action {String}
- * @param [data] {Any}
- * @param callback {Function}
+ * @param args {Array}
  */
-function act (action, data, callback) {
+function act (action, ...args) {
   let fn = ['_cb', (new Date()).getTime(), (x_get_idx++)].join('_')
 
-  if (!callback && typeof data === 'function') {
-    callback = data
-    data = null
+  let callback
+  if (args.length > 0 && typeof args[args.length - 1] === 'function') {
+    callback = args.pop()
   }
 
   if (typeof callback === 'function') {
@@ -37,14 +36,16 @@ function act (action, data, callback) {
 
   ipcRenderer.send('x', {
     action
-    , data
+    , data: args
     , callback: fn
   })
 }
 
 function pact (action, ...args) {
-  return new Promise((resolve, reject) => act(action, args,
-    (err, result) => err ? reject(err) : resolve(result)))
+  return new Promise((resolve, reject) => {
+    args.push((err, result) => err ? reject(err) : resolve(result))
+    act(action, ...args)
+  })
 }
 
 module.exports = {

ui/app.js

@@ -12,6 +12,7 @@ import Content from './content/content'
 import EditPrompt from './frame/edit'
 //import PreferencesPrompt from './frame/preferences'
 import Agent from './Agent'
+import events from './events/index'
 import './app.less'
 
 export default class App extends React.Component {
@@ -31,18 +32,7 @@ export default class App extends React.Component {
       this.setState({lang})
     })
 
-    Agent.on('toggle_hosts', (hosts, on) => {
-      Agent.pact('toggleHosts', hosts.id, on)
-        .then(() => {
-          hosts.on = on
-          this.setState({
-            list: this.state.list
-          })
-        })
-        .catch(e => {
-          console.log(e)
-        })
-    })
+    events.reg(this)
   }
 
   loadHosts () {
@@ -57,12 +47,13 @@ export default class App extends React.Component {
 
   setCurrent (hosts) {
     if (hosts.is_sys) {
-      Agent.act('getSysHosts', (e, _hosts) => {
-        this.setState({
-          sys_hosts: _hosts,
-          current: _hosts
+      Agent.pact('getSysHosts')
+        .then(_hosts => {
+          this.setState({
+            sys_hosts: _hosts,
+            current: _hosts
+          })
         })
-      })
     } else {
       this.setState({
         current: hosts
@@ -78,8 +69,7 @@ export default class App extends React.Component {
     clearTimeout(this._t)
 
     this._t = setTimeout(() => {
-      //Agent.emit('change')
-      Agent.pact('saveHosts', this.state.list)
+      Agent.emit('save', this.state.list)
     }, 1000)
   }
 

ui/events/hosts_update.js

@@ -0,0 +1,26 @@
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+'use strict'
+
+import Agent from '../Agent'
+//import makeId from '../../app/libs/make-id'
+
+module.exports = (app, hosts) => {
+  let list = app.state.list
+  let inner = list.find(item => item.id === hosts.id)
+  if (!inner) {
+    list.push(Object.assign({}, hosts))
+  } else {
+    Object.assign(inner, hosts)
+  }
+
+  Agent.pact('saveHosts', list)
+    .then(() => {
+      app.setState({list}, () => {
+        Agent.emit('select', hosts.id)
+      })
+    })
+}

ui/events/index.js

@@ -0,0 +1,23 @@
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+'use strict'
+
+import Agent from '../Agent'
+
+const req = require.context('./', false, /\.js$/)
+
+exports.reg = (app) => {
+  req.keys().map(fn => {
+    let m = fn.match(/^\.\/([\w\-]+)\.js$/)
+    let name = m ? m[1] : null
+    if (!name || name === 'index') return
+    Agent.on(name, (...args) => {
+      let fn = require(`./${name}`)
+      fn(app, ...args)
+    })
+  })
+}
+

ui/events/save.js

@@ -0,0 +1,12 @@
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+'use strict'
+
+import Agent from '../Agent'
+
+module.exports = (app, list) => {
+  Agent.pact('saveHosts', list)
+}

ui/events/toggle_hosts.js

@@ -0,0 +1,21 @@
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+'use strict'
+
+import Agent from '../Agent'
+
+module.exports = (app, hosts, on) => {
+  Agent.pact('toggleHosts', hosts.id, on)
+    .then(() => {
+      hosts.on = on
+      app.setState({
+        list: app.state.list
+      })
+    })
+    .catch(e => {
+      console.log(e)
+    })
+}

ui/frame/edit.js

@@ -85,7 +85,6 @@ export default class EditPrompt extends React.Component {
   }
 
   onOK () {
-    console.log('ok')
     this.setState({
       title: (this.state.title || '').replace(/^\s+|\s+$/g, ''),
       url: (this.state.url || '').replace(/^\s+|\s+$/g, '')
@@ -103,6 +102,7 @@ export default class EditPrompt extends React.Component {
 
     let data = Object.assign({}, this.current_hosts, this.state,
       this.state.is_add ? {
+        id: makeId(),
         content: `# ${this.state.title}`,
         on: false
       } : {})
@@ -110,8 +110,7 @@ export default class EditPrompt extends React.Component {
     if (!data.id) data.id = makeId()
 
     delete data['is_add']
-    Agent.emit('hosts_' + (this.state.is_add ? 'add' : 'edit') + 'ed', data,
-      this.current_hosts)
+    Agent.emit('hosts_update', data)
 
     this.setState({
       show: false

ui/panel/list-item.js

@@ -16,6 +16,12 @@ export default class ListItem extends React.Component {
 
     this.is_sys = !!this.props.sys
     this.state = {}
+
+    Agent.on('select', id => {
+      if (id && id === this.props.data.id) {
+        this.beSelected()
+      }
+    })
   }
 
   getTitle () {