调整图标等。

ui/content/content.jsx

@@ -6,6 +6,7 @@
 'use strict'
 
 import React from 'react'
+import { Icon } from 'antd'
 import classnames from 'classnames'
 import Editor from './editor'
 import './content.less'
@@ -19,7 +20,7 @@ export default class Content extends React.Component {
     }
   }
 
-  setValue(v) {
+  setValue (v) {
     this.props.setHostsContent(v)
   }
 
@@ -29,13 +30,14 @@ export default class Content extends React.Component {
     return (
       <div id="sh-content">
         <div className="inform">
-                    <span
-                      className={classnames({
-                        loading: 1,
-                        show: this.state.is_loading
-                      })}
-                    >loading...</span>
-          <i
+          <span
+            className={classnames({
+              loading: 1,
+              show: this.state.is_loading
+            })}
+          >loading...</span>
+          <Icon
+            type="global"
             className={classnames({
               show: current.where === 'remote',
               iconfont: 1,
@@ -43,7 +45,8 @@ export default class Content extends React.Component {
             })}
             title={lang.remote_hosts}
           />
-          <i
+          <Icon
+            type="lock"
             className={classnames({
               show: this.props.readonly,
               iconfont: 1,

ui/frame/edit.jsx

@@ -282,9 +282,9 @@ export default class EditPrompt extends React.Component {
       <div ref="body">
         <div className="ln">
           <RadioGroup onChange={e => this.setState({where: e.target.value})} value={this.state.where}>
-            <RadioButton value="local">{lang.where_local}</RadioButton>
-            <RadioButton value="remote">{lang.where_remote}</RadioButton>
-            <RadioButton value="group">{lang.where_group}</RadioButton>
+            <RadioButton value="local"><Icon type="file-text" /> {lang.where_local}</RadioButton>
+            <RadioButton value="remote"><Icon type="global" /> {lang.where_remote}</RadioButton>
+            <RadioButton value="group"><Icon type="copy" /> {lang.where_group}</RadioButton>
           </RadioGroup>
         </div>
 

ui/frame/frame.jsx

@@ -60,7 +60,7 @@ export default class MyFrame extends React.Component {
     if (!this.props.show) {
       return null
     }
-    let {show, title, body, lang} = this.props
+    let {show, title, body, lang, width} = this.props
 
     return (
       <Modal
@@ -69,6 +69,7 @@ export default class MyFrame extends React.Component {
         onOk={this.onOK.bind(this)}
         onCancel={this.onCancel.bind(this)}
         wrapClassName="frame"
+        width={width}
         footer={[
           <Button key="back" size="large" onClick={this.onCancel.bind(this)}>
             {lang.cancel}
@@ -80,9 +81,9 @@ export default class MyFrame extends React.Component {
       >
         <div className="prompt-body">{body}</div>
         {/*<div className="prompt">*/}
-          {/*<div className="head">{this.props.head}</div>*/}
-          {/*<div className="body">{this.props.body}</div>*/}
-          {/*<div className="foot">{this.renderFootButtons()}</div>*/}
+        {/*<div className="head">{this.props.head}</div>*/}
+        {/*<div className="body">{this.props.body}</div>*/}
+        {/*<div className="foot">{this.renderFootButtons()}</div>*/}
         {/*</div>*/}
       </Modal>
     )

ui/frame/frame.less

@@ -18,7 +18,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    min-width: 520px;
+    //min-width: 520px;
     //max-width: 600px;
     //background: #fff;
     //box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
@@ -62,3 +62,10 @@
     }
   }
 }
+
+
+.frame.sudo-prompt {
+  .ant-modal {
+    width: 300px;
+  }
+}

ui/frame/sudo.jsx

@@ -6,6 +6,7 @@
 'use strict'
 
 import React from 'react'
+import {Input} from 'antd'
 import Agent from '../Agent'
 import MyFrame from './frame'
 import './sudo.less'
@@ -67,11 +68,10 @@ export default class SudoPrompt extends React.Component {
         <div className="ln">
           <div className="title">{lang.sudo_pswd}</div>
           <div className="cnt">
-            <input
+            <Input
               type="password"
               ref="pswd"
-              onKeyDown={e => (e.keyCode === 13 && this.onOK() ||
-                                 e.keyCode === 27 && this.onCancel())}
+              onKeyDown={e => (e.keyCode === 13 && this.onOK() || e.keyCode === 27 && this.onCancel())}
             />
           </div>
         </div>
@@ -84,11 +84,12 @@ export default class SudoPrompt extends React.Component {
     return (
       <MyFrame
         show={this.state.show}
-        head={lang.input_sudo_pswd}
+        title={lang.input_sudo_pswd}
         body={this.body()}
         onOK={() => this.onOK()}
         onCancel={() => this.onCancel()}
         lang={lang}
+        width="400"
       />
     )
   }

ui/frame/sudo.less

@@ -1,7 +0,0 @@
-@import "frame";
-
-.frame {
-  .prompt {
-    width: 480px;
-  }
-}

ui/panel/buttons.jsx

@@ -6,6 +6,7 @@
 'use strict'
 
 import React from 'react'
+import { Icon } from 'antd'
 import classnames from 'classnames'
 import Agent from '../Agent'
 import './buttons.less'
@@ -93,14 +94,16 @@ export default class Buttons extends React.Component {
             className="btn-add"
             href="#"
             onClick={() => Buttons.btnAdd()}
-          >+</a>
+          >
+            <Icon type="plus" className="iconfont" />
+          </a>
         </div>
 
         <div className="right">
-          <i
+          <Icon
+            type="search"
             className={classnames({
               iconfont: 1,
-              'icon-search': 1,
               'on': this.state.search_on
             })}
             onClick={() => this.btnSearch()}

ui/panel/list-item.jsx

@@ -7,6 +7,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { Icon } from 'antd'
 import Agent from '../Agent'
 import isInViewport from 'wheel-js/src/browser/isInViewport'
 import './list-item.less'
@@ -22,7 +23,7 @@ export default class ListItem extends React.Component {
   getTitle () {
     let {lang} = this.props
     return this.is_sys ? lang.sys_hosts_title : this.props.data.title ||
-                                               lang.untitled
+      lang.untitled
   }
 
   beSelected () {
@@ -66,6 +67,17 @@ export default class ListItem extends React.Component {
       'data-id': data.id || ''
     }
 
+    let icon_type
+    if (sys) {
+      icon_type = 'desktop'
+    } else if (data.where === 'remote') {
+      icon_type = 'global'
+    } else if (data.where === 'group') {
+      icon_type = 'copy'
+    } else {
+      icon_type = 'file-text'
+    }
+
     return (
       <div className={classnames({
         'list-item': 1
@@ -94,15 +106,20 @@ export default class ListItem extends React.Component {
             />
           </div>
         )}
-        <i className={classnames({
-          'iconfont': 1
-          , 'item-icon': 1
-          , 'icon-warn': !!data.error
-          , 'icon-file': !sys && !data.error && data.where !== 'group'
-          , 'icon-files': data.where === 'group'
-          , 'icon-sysserver': sys && !data.error
-        })}
-           title={data.error || ''}
+        {/*<i className={classnames({*/}
+          {/*'iconfont': 1*/}
+          {/*, 'item-icon': 1*/}
+          {/*, 'icon-warn': !!data.error*/}
+          {/*, 'icon-file': !sys && !data.error && data.where !== 'group'*/}
+          {/*, 'icon-files': data.where === 'group'*/}
+          {/*, 'icon-sysserver': sys && !data.error*/}
+        {/*})}*/}
+           {/*title={data.error || ''}*/}
+        {/*/>*/}
+        <Icon
+          type={icon_type}
+          className="iconfont item-icon"
+          title={data.error || ''}
         />
         <span>{this.getTitle()}</span>
       </div>

ui/panel/list-item.less

@@ -1,7 +1,7 @@
 #sh-list {
   .list-item {
     position: relative;
-    padding: 7px 10px 7px 15px;
+    padding: 7px 10px 7px 12px;
     cursor: pointer;
 
     &.hidden {
@@ -10,10 +10,11 @@
 
     &.sys-hosts {
       font-size: 14px;
-      padding: 8px 10px 8px 13px;
+      padding: 8px 10px 8px 10px;
 
-      i {
+      i.item-icon {
         width: 22px;
+        font-size: 12px;
       }
     }
 
@@ -43,7 +44,7 @@
       margin-right: 5px;
 
       &.item-icon {
-        font-size: 12px;
+        font-size: 10px;
       }
 
       &.switch {