toggle 效果初步实现。

app/bundle.js

@@ -9545,6 +9545,17 @@ var App = function (_React$Component) {
     _Agent2.default.pact('getLang').then(function (lang) {
       _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);
+      });
+    });
     return _this;
   }
 
@@ -9802,6 +9813,10 @@ var _classnames = __webpack_require__(101);
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
+var _Agent = __webpack_require__(82);
+
+var _Agent2 = _interopRequireDefault(_Agent);
+
 __webpack_require__(94);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -9837,6 +9852,13 @@ var ListItem = function (_React$Component) {
     value: function beSelected() {
       this.props.setCurrent(this.props.data);
     }
+  }, {
+    key: 'toggle',
+    value: function toggle() {
+      var on = !this.props.data.on;
+
+      _Agent2.default.emit('toggle-hosts', this.props.data, on);
+    }
   }, {
     key: 'render',
     value: function render() {
@@ -9867,8 +9889,8 @@ var ListItem = function (_React$Component) {
               'iconfont': 1,
               'icon-on': data.on,
               'icon-off': !data.on
-            })
-            //onClick={this.toggle.bind(this)}
+            }),
+            onClick: this.toggle.bind(this)
           }),
           _react2.default.createElement('i', {
             className: 'iconfont icon-edit'

app/libs/make-id.js

@@ -0,0 +1,10 @@
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+'use strict'
+
+module.exports = () => {
+  return (new Date()).getTime() + '-' + Math.floor(Math.random() * 1e6)
+}

app/server/actions/getUserHosts.js

@@ -7,6 +7,7 @@
 
 const paths = require('../paths')
 const io = require('../io')
+const makeId = require('../../libs/make-id')
 
 module.exports = () => {
   let fn = paths.data_path
@@ -27,4 +28,14 @@ module.exports = () => {
       }
       return data.list
     })
+    .then(list => {
+      let ids = {}
+      return list.map(item => {
+        if (!item.id || ids.hasOwnProperty(item.id)) {
+          item.id = makeId()
+        }
+        ids[item.id] = 1
+        return item
+      })
+    })
 }

app/server/actions/toggleHosts.js

@@ -0,0 +1,16 @@
+/**
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+'use strict';
+
+const version = require('../../version').version
+const paths = require('../paths')
+const io = require('../io')
+
+module.exports = (hosts_id, on) => {
+  let fn = paths.data_path
+
+  return Promise.resolve()
+}

ui/app.js

@@ -30,6 +30,19 @@ export default class App extends React.Component {
     Agent.pact('getLang').then(lang => {
       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)
+        })
+    })
   }
 
   loadHosts () {

ui/panel/list-item.js

@@ -7,6 +7,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import Agent from '../Agent'
 import './list-item.less'
 
 export default class ListItem extends React.Component {
@@ -23,10 +24,16 @@ export default class ListItem extends React.Component {
       lang.untitled
   }
 
-  beSelected() {
+  beSelected () {
     this.props.setCurrent(this.props.data)
   }
 
+  toggle () {
+    let on = !this.props.data.on
+
+    Agent.emit('toggle-hosts', this.props.data, on)
+  }
+
   render () {
     let {data, sys, current} = this.props
     let is_selected = data === current
@@ -50,7 +57,7 @@ export default class ListItem extends React.Component {
               , 'icon-on': data.on
               , 'icon-off': !data.on
             })}
-              //onClick={this.toggle.bind(this)}
+               onClick={this.toggle.bind(this)}
             />
             <i
               className="iconfont icon-edit"