更新添加、编辑窗口的组件。

ui/frame/edit.jsx

@@ -8,11 +8,16 @@
 import React from 'react'
 import MyFrame from './frame'
 import classnames from 'classnames'
+import { Icon, Input, Radio, Select } from 'antd'
 import Group from './group'
 import Agent from '../Agent'
 import makeId from '../../app/libs/make-id'
 import './edit.less'
 
+const RadioButton = Radio.Button
+const RadioGroup = Radio.Group
+const Option = Select.Option
+
 export default class EditPrompt extends React.Component {
   constructor (props) {
     super(props)
@@ -175,7 +180,7 @@ export default class EditPrompt extends React.Component {
     }
     return k.map(([v, n], idx) => {
       return (
-        <option value={v} key={idx}>{n}</option>
+        <Option value={v} key={idx}>{n}</Option>
       )
     })
   }
@@ -229,30 +234,30 @@ export default class EditPrompt extends React.Component {
         <div className="ln">
           <div className="title">{lang.url}</div>
           <div className="cnt">
-            <input
-              type="text"
+            <Input
               ref="url"
               value={this.state.url}
               placeholder="http://"
-              onChange={(e) => this.setState({url: e.target.value})}
-              onKeyDown={(e) => (e.keyCode === 13 && this.onOK()) || (e.keyCode === 27 && this.onCancel())}
+              onChange={e => this.setState({url: e.target.value})}
+              onKeyDown={e => (e.keyCode === 13 && this.onOK()) || (e.keyCode === 27 && this.onCancel())}
             />
           </div>
         </div>
         <div className="ln">
           <div className="title">{lang.auto_refresh}</div>
           <div className="cnt">
-            <select
+            <Select
               value={this.state.refresh_interval}
-              onChange={(e) => this.setState(
-                {refresh_interval: parseFloat(e.target.value) || 0})}
+              style={{width: 120}}
+              onChange={v => this.setState({refresh_interval: parseFloat(v) || 0})}
             >
               {this.getRefreshOptions()}
-            </select>
+            </Select>
 
-            <i
+            <Icon
+              type="reload"
               className={classnames({
-                iconfont: 1,
+                'iconfont': 1,
                 'icon-refresh': 1,
                 'invisible': !this.current_hosts || this.state.url !== this.current_hosts.url,
                 'loading': this.state.is_loading
@@ -276,29 +281,18 @@ export default class EditPrompt extends React.Component {
     return (
       <div ref="body">
         <div className="ln">
-          <input id="ipt-local" type="radio" name="where" value="local"
-                 checked={this.state.where === 'local'}
-                 onChange={(e) => this.setState({where: e.target.value})}
-          />
-          <label htmlFor="ipt-local">{lang.where_local}</label>
-          <input id="ipt-remote" type="radio" name="where" value="remote"
-                 checked={this.state.where === 'remote'}
-                 onChange={(e) => this.setState({where: e.target.value})}
-          />
-          <label htmlFor="ipt-remote">{lang.where_remote}</label>
-          <input id="ipt-group" type="radio" name="where" value="group"
-                 checked={this.state.where === 'group'}
-                 onChange={(e) => this.setState({where: e.target.value})}
-          />
-          <label htmlFor="ipt-group">{lang.where_group}</label>
+          <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>
+          </RadioGroup>
         </div>
+
         <div className="ln">
           <div className="title">{lang.hosts_title}</div>
           <div className="cnt">
-            <input
-              type="text"
+            <Input
               ref="title"
-              name="text"
               value={this.state.title}
               onChange={(e) => this.setState({title: e.target.value})}
               onKeyDown={(e) => (e.keyCode === 13 && this.onOK() || e.keyCode === 27 && this.onCancel())}
@@ -318,7 +312,7 @@ export default class EditPrompt extends React.Component {
     return (
       <MyFrame
         show={this.state.show}
-        head={lang[this.state.is_add ? 'add_hosts' : 'edit_hosts']}
+        title={lang[this.state.is_add ? 'add_hosts' : 'edit_hosts']}
         body={this.body()}
         onOK={() => this.onOK()}
         onCancel={() => this.onCancel()}

ui/frame/frame.jsx

@@ -60,26 +60,30 @@ export default class MyFrame extends React.Component {
     if (!this.props.show) {
       return null
     }
-    let {show} = this.props
+    let {show, title, body, lang} = this.props
 
     return (
       <Modal
         visible={show}
-        title="Title"
+        title={title}
         onOk={this.onOK.bind(this)}
         onCancel={this.onCancel.bind(this)}
+        wrapClassName="frame"
         footer={[
-          <Button key="back" size="large" onClick={this.onCancel.bind(this)}>Return</Button>,
+          <Button key="back" size="large" onClick={this.onCancel.bind(this)}>
+            {lang.cancel}
+          </Button>,
           <Button key="submit" type="primary" size="large" loading={false} onClick={this.onOK.bind(this)}>
-            Submit
+            {lang.ok}
           </Button>
         ]}
       >
-        <div className="prompt">
-          <div className="head">{this.props.head}</div>
-          <div className="body">{this.props.body}</div>
-          <div className="foot">{this.renderFootButtons()}</div>
-        </div>
+        <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>*/}
       </Modal>
     )
   }

ui/frame/frame.less

@@ -3,44 +3,34 @@
   @btn_default: #05a;
   @lh: 24px;
 
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  .overlay {
-    position: absolute;
-    z-index: -1;
-    width: 100%;
+  &:before {
+    content: '';
+    display: inline-block;
     height: 100%;
-    background: #000;
-    opacity: 0.5;
+    vertical-align: middle;
+    width: 0;
   }
 
-  .prompt {
-    position: absolute;
+  .ant-modal {
+    //display: inline-block;
+    //vertical-align: middle;
+    position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    min-width: 300px;
-    max-width: 600px;
-    background: #fff;
-    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
-
-    .head {
-      padding: 20px;
-      font-size: 16px;
-      background: @bg;
-      //border-bottom: solid 1px #ccc;
-    }
+    min-width: 520px;
+    //max-width: 600px;
+    //background: #fff;
+    //box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
+    line-height: 30px;
 
-    .body {
-      padding: 20px 20px;
+    .prompt-body {
+      //padding: 20px 20px;
 
       .ln {
         line-height: 30px;
         padding: 2px 0;
+        margin-bottom: 10px;
 
         .title {
           float: left;
@@ -50,11 +40,11 @@
         .cnt {
           margin-left: 100px;
           line-height: 30px;
-          input[type=text] {
-            width: 240px;
-            outline: none;
-            padding: 4px 10px;
-          }
+          //input[type=text] {
+          //  width: 240px;
+          //  outline: none;
+          //  padding: 4px 10px;
+          //}
           textarea {
             font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
           }
@@ -66,42 +56,8 @@
         }
       }
 
-      input {
-        padding: 4px 4px;
-      }
-
       input[type=password] {
         letter-spacing: 8px;
-        width: 240px;
-        outline: none;
-        padding: 4px 10px;
-      }
-    }
-
-    .foot {
-      padding: 20px;
-      background: @bg;
-      text-align: right;
-
-      .button {
-        display: inline-block;
-        background: #ccc;
-        padding: 8px 20px;
-        margin-left: 1em;
-        cursor: pointer;
-
-        &:hover {
-          background: #ddd;
-        }
-
-        &.btn-default {
-          background: @btn_default;
-          color: #fff;
-
-          &:hover {
-            background: @btn_default * 1.4;
-          }
-        }
       }
     }
   }