style migrate v3

2020-11-25 19:26:36 +08:00 · 2020-11-25 19:26:36 +08:00 · 069adbd644
parent 097acb4f6c
commit 069adbd644
15 changed files with 549 additions and 353 deletions
--- a/spug_web/src/components/AuthButton.js
+++ b/spug_web/src/components/AuthButton.js
@ -5,7 +5,7 @@
 */
 import React from 'react';
 import { Button } from 'antd';
-import { hasPermission } from "../libs";
+import { hasPermission } from 'libs';


 export default function AuthButton(props) {
--- a/spug_web/src/components/AuthDiv.js
+++ b/spug_web/src/components/AuthDiv.js
@ -4,7 +4,7 @@
 * Released under the AGPL-3.0 License.
 */
 import React from 'react';
-import { hasPermission } from "../libs";
+import { hasPermission } from 'libs';


 export default function AuthDiv(props) {
--- a/spug_web/src/components/AuthFragment.js
+++ b/spug_web/src/components/AuthFragment.js
@ -4,7 +4,7 @@
 * Released under the AGPL-3.0 License.
 */
 import React from 'react';
-import { hasPermission } from "../libs";
+import { hasPermission } from 'libs';


 export default function AuthFragment(props) {
--- a/spug_web/src/components/Breadcrumb.js
+++ b/spug_web/src/components/Breadcrumb.js
@ -0,0 +1,34 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the AGPL-3.0 License.
+ */
+import React from 'react';
+import { Breadcrumb } from 'antd';
+import styles from './index.module.less';
+
+
+export default class extends React.Component {
+  static Item = Breadcrumb.Item
+
+  render() {
+    let title = this.props.title;
+    if (!title) {
+      const rawChildren = this.props.children;
+      if (Array.isArray(rawChildren)) {
+        title = rawChildren[rawChildren.length - 1].props.children
+      } else {
+        title = rawChildren.props.children
+      }
+    }
+
+    return (
+      <div className={styles.breadcrumb}>
+        <Breadcrumb>
+          {this.props.children}
+        </Breadcrumb>
+        <div className={styles.title}>{title}</div>
+      </div>
+    )
+  }
+}
--- a/spug_web/src/components/SearchForm.js
+++ b/spug_web/src/components/SearchForm.js
@ -5,32 +5,28 @@
 */
 import React from 'react';
 import { Row, Col, Form } from 'antd';
-import styles from './index.module.css';
-import lodash from "lodash";
-
+import styles from './index.module.less';

 export default class extends React.Component {
  static Item(props) {
    return (
-      <Form.Item {...props} label={props.title}>
-        {props.children}
-      </Form.Item>
+      <Col span={props.span} offset={props.offset}>
+        <Form.Item label={props.title}>
+          {props.children}
+        </Form.Item>
+      </Col>
    )
  }

  render() {
-    let items = lodash.get(this.props, 'children', []);
-    if (!lodash.isArray(items)) items = [items];
    return (
-      <Form className={styles.searchForm} style={this.props.style}>
-        <Row gutter={{md: 8, lg: 24, xl: 48}}>
-          {items.filter(item => item).map((item, index) => (
-            <Col key={index} md={lodash.get(item.props, 'span')} sm={24}>
-              {item}
-            </Col>
-          ))}
-        </Row>
-      </Form>
+      <div className={styles.searchForm} style={this.props.style}>
+        <Form style={this.props.style}>
+          <Row gutter={{md: 8, lg: 24, xl: 48}}>
+            {this.props.children}
+          </Row>
+        </Form>
+      </div>
    )
  }
 }
--- a/spug_web/src/components/StatisticsCard.js
+++ b/spug_web/src/components/StatisticsCard.js
@ -4,9 +4,9 @@
 * Released under the AGPL-3.0 License.
 */
 import React from 'react';
-import { Card, Col, Row } from "antd";
+import { Card, Col, Row } from 'antd';
 import lodash from 'lodash';
-import styles from './index.module.css';
+import styles from './index.module.less';


 class StatisticsCard extends React.Component {
--- a/spug_web/src/components/TableCard.js
+++ b/spug_web/src/components/TableCard.js
@ -0,0 +1,148 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the AGPL-3.0 License.
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import { Table, Space, Divider, Popover, Checkbox, Button } from 'antd';
+import { ReloadOutlined, SettingOutlined, FullscreenOutlined } from '@ant-design/icons';
+import styles from './index.module.less';
+
+function Footer(props) {
+  const actions = props.actions || [];
+  const length = props.selected.length;
+  return length > 0 ? (
+    <div className={styles.tableFooter}>
+      <div className={styles.left}>已选择 <span>{length}</span> 项</div>
+      <Space size="middle">
+        {actions.map((item, index) => (
+          <React.Fragment key={index}>{item}</React.Fragment>
+        ))}
+      </Space>
+    </div>
+  ) : null
+}
+
+function Header(props) {
+  const columns = props.columns || [];
+  const actions = props.actions || [];
+  const fields = props.fields || [];
+  const onFieldsChange = props.onFieldsChange;
+
+  const Fields = () => {
+    return (
+      <Checkbox.Group value={fields} onChange={onFieldsChange}>
+        {columns.map((item, index) => (
+          <Checkbox value={index} key={index}>{item.title}</Checkbox>
+        ))}
+      </Checkbox.Group>
+    )
+  }
+
+  function handleCheckAll(e) {
+    if (e.target.checked) {
+      onFieldsChange(columns.map((_, index) => index))
+    } else {
+      onFieldsChange([])
+    }
+  }
+
+  function handleFullscreen() {
+    if (props.rootRef.current && document.fullscreenEnabled) {
+      if (document.fullscreenElement) {
+        document.exitFullscreen()
+      } else {
+        props.rootRef.current.requestFullscreen()
+      }
+    }
+  }
+
+  return (
+    <div className={styles.toolbar}>
+      <div className={styles.title}>{props.title}</div>
+      <div className={styles.option}>
+        <Space size="middle">
+          {actions.map((item, index) => (
+            <React.Fragment key={index}>{item}</React.Fragment>
+          ))}
+        </Space>
+        {actions.length ? <Divider type="vertical"/> : null}
+        <Space>
+          <ReloadOutlined onClick={props.onReload}/>
+          <Popover
+            arrowPointAtCenter
+            title={[
+              <Checkbox
+                key="1"
+                checked={fields.length === columns.length}
+                indeterminate={![0, columns.length].includes(fields.length)}
+                onChange={handleCheckAll}>列展示</Checkbox>,
+              <Button
+                key="2"
+                type="link"
+                style={{padding: 0}}
+                onClick={() => onFieldsChange(props.defaultFields)}>重置</Button>
+            ]}
+            overlayClassName={styles.tableFields}
+            trigger="click"
+            placement="bottomRight"
+            content={<Fields/>}>
+            <SettingOutlined/>
+          </Popover>
+          <FullscreenOutlined onClick={handleFullscreen}/>
+        </Space>
+      </div>
+    </div>
+  )
+}
+
+function TableCard(props) {
+  const rootRef = useRef();
+  const batchActions = props.batchActions || [];
+  const selected = props.selected || [];
+  const [fields, setFields] = useState([]);
+  const [defaultFields, setDefaultFields] = useState([]);
+  const [columns, setColumns] = useState([]);
+
+  useEffect(() => {
+    let [_columns, _fields] = [props.columns, []];
+    if (props.children) {
+      if (Array.isArray(props.children)) {
+        _columns = props.children.filter(x => x.props).map(x => x.props)
+      } else {
+        _columns = [props.children.props]
+      }
+    }
+    for (let [index, item] of _columns.entries()) {
+      if (!item.hide) _fields.push(index)
+    }
+    setFields(_fields);
+    setColumns(_columns);
+    setDefaultFields(_fields);
+  }, [props.columns, props.children])
+
+  return (
+    <div ref={rootRef} className={styles.tableCard}>
+      <Header
+        title={props.title}
+        columns={columns}
+        actions={props.actions}
+        fields={fields}
+        rootRef={rootRef}
+        defaultFields={defaultFields}
+        onFieldsChange={setFields}
+        onReload={props.onReload}/>
+      <Table
+        rowKey={props.rowKey}
+        loading={props.loading}
+        columns={columns.filter((_, index) => fields.includes(index))}
+        dataSource={props.dataSource}
+        rowSelection={props.rowSelection}
+        expandable={props.expandable}
+        pagination={props.pagination}/>
+      {selected.length ? <Footer selected={selected} actions={batchActions}/> : null}
+    </div>
+  )
+}
+
+export default TableCard
--- a/spug_web/src/components/index.js
+++ b/spug_web/src/components/index.js
@ -12,6 +12,8 @@ import AuthCard from './AuthCard';
 import AuthDiv from './AuthDiv';
 import ACEditor from './ACEditor';
 import Action from './Action';
+import TableCard from './TableCard';
+import Breadcrumb from './Breadcrumb';

 export {
  StatisticsCard,
@ -23,4 +25,6 @@ export {
  AuthDiv,
  ACEditor,
  Action,
+  TableCard,
+  Breadcrumb,
 }
--- a/spug_web/src/components/index.module.css
+++ b/spug_web/src/components/index.module.css
@ -1,38 +0,0 @@
-.searchForm :global(.ant-form-item) {
-    display: flex;
-}
-
-.searchForm :global(.ant-form-item-control-wrapper) {
-    flex: 1;
-}
-
-.searchForm :global(.ant-form-item-label) {
-    padding-right: 8px;
-}
-
-.statisticsCard {
-    position: relative;
-    text-align: center;
-}
-
-.statisticsCard span {
-    color: rgba(0, 0, 0, .45);
-    display: inline-block;
-    line-height: 22px;
-    margin-bottom: 4px;
-}
-
-.statisticsCard p {
-    font-size: 32px;
-    line-height: 32px;
-    margin: 0;
-}
-
-.statisticsCard em {
-    background-color: #e8e8e8;
-    position: absolute;
-    height: 56px;
-    width: 1px;
-    top: 0;
-    right: 0;
-}
--- a/spug_web/src/components/index.module.less
+++ b/spug_web/src/components/index.module.less
@ -0,0 +1,144 @@
+.searchForm {
+  padding: 24px 24px 0 24px;
+  background-color: #fff;
+  border-radius: 2px;
+}
+
+.searchForm :global(.ant-form-item) {
+  display: flex;
+}
+
+.searchForm :global(.ant-form-item-control-wrapper) {
+  flex: 1;
+}
+
+.searchForm :global(.ant-form-item-label) {
+  padding-right: 8px;
+}
+
+.statisticsCard {
+  position: relative;
+  text-align: center;
+}
+
+.statisticsCard span {
+  color: rgba(0, 0, 0, .45);
+  display: inline-block;
+  line-height: 22px;
+  margin-bottom: 4px;
+}
+
+.statisticsCard p {
+  font-size: 32px;
+  line-height: 32px;
+  margin: 0;
+}
+
+.statisticsCard em {
+  background-color: #e8e8e8;
+  position: absolute;
+  height: 56px;
+  width: 1px;
+  top: 0;
+  right: 0;
+}
+
+.tableCard {
+  border: 1px solid #f0f0f0;
+  background: #fff;
+  border-radius: 2px;
+
+  :global(.ant-pagination) {
+    padding: 0 24px;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+    padding: 0 24px;
+
+    .title {
+      flex: 1;
+      font-weight: 500;
+      font-size: 16px;
+      opacity: 0.8;
+    }
+
+    .option {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      :global(.anticon) {
+        font-size: 16px;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.tableFields {
+  :global(.ant-popover-title) {
+    padding: 10px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  :global(.ant-popover-inner-content) {
+    padding: 8px 0;
+
+    :global(.ant-checkbox-group) {
+      display: block;
+    }
+
+
+    :global(.ant-checkbox-wrapper) {
+      display: block;
+      height: 30px;
+      line-height: 30px;
+      margin: 0;
+      padding: 0 16px;
+    }
+
+    :global(.ant-checkbox-wrapper):hover {
+      background: rgba(0, 0, 0, 0.025)
+    }
+  }
+}
+
+.tableFooter {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  width: calc(100% - 208px);
+  padding: 0 24px;
+  background: #fff;
+
+  .left {
+    flex: 1;
+
+    span {
+      color: #1890ff;
+      font-weight: 600;
+    }
+  }
+}
+
+.breadcrumb {
+  margin: -24px -24px 24px -24px;
+  padding: 16px 24px 0 24px;
+  background: #fff;
+  border-bottom: 1px solid #e8e8e8;
+
+  .title {
+    margin-bottom: 9px;
+    font-size: 20px;
+    line-height: 50px;
+  }
+}
--- a/spug_web/src/pages/host/Form.js
+++ b/spug_web/src/pages/host/Form.js
@ -3,39 +3,31 @@
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Form, Input, Select, Col, Button, Upload, message } from 'antd';
+import { ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons';
+import { Modal, Form, Input, Select, Button, Upload, message } from 'antd';
 import { http, X_TOKEN } from 'libs';
 import store from './store';

-@observer
-class ComForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: false,
-      uploading: false,
-      password: null,
-      addZone: null,
-      fileList: [],
-      editZone: store.record.zone,
-    }
-  }
+export default observer(function () {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [password, setPassword] = useState();
+  const [fileList, setFileList] = useState([]);

-  componentDidMount() {
+  useEffect(() => {
    if (store.record.pkey) {
-      this.setState({
-        fileList: [{uid: '0', name: '独立密钥', data: store.record.pkey}]
-      })
+      setFileList([{uid: '0', name: '独立密钥', data: store.record.pkey}])
    }
-  }
+  }, [])

-  handleSubmit = () => {
-    this.setState({loading: true});
-    const formData = this.props.form.getFieldsValue();
+  function handleSubmit() {
+    setLoading(true);
+    const formData = form.getFieldsValue();
    formData['id'] = store.record.id;
-    const file = this.state.fileList[0];
+    const file = fileList[0];
    if (file && file.data) formData['pkey'] = file.data;
    http.post('/api/host/', formData)
      .then(res => {
@ -43,12 +35,12 @@ class ComForm extends React.Component {
          if (formData.pkey) {
            message.error('独立密钥认证失败')
          } else {
-            this.setState({loading: false});
+            setLoading(false)
            Modal.confirm({
-              icon: 'exclamation-circle',
+              icon: <ExclamationCircleOutlined/>,
              title: '首次验证请输入密码',
-              content: this.confirmForm(formData.username),
-              onOk: () => this.handleConfirm(formData),
+              content: <ConfirmForm username={formData.username}/>,
+              onOk: () => handleConfirm(formData),
            })
          }
        } else {
@ -56,12 +48,12 @@ class ComForm extends React.Component {
          store.formVisible = false;
          store.fetchRecords()
        }
-      }, () => this.setState({loading: false}))
-  };
+      }, () => setLoading(false))
+  }

-  handleConfirm = (formData) => {
-    if (this.state.password) {
-      formData['password'] = this.state.password;
+  function handleConfirm(formData) {
+    if (password) {
+      formData['password'] = password;
      return http.post('/api/host/', formData).then(res => {
        message.success('验证成功');
        store.formVisible = false;
@ -69,153 +61,81 @@ class ComForm extends React.Component {
      })
    }
    message.error('请输入授权密码')
-  };
+  }

-  confirmForm = (username) => {
-    return (
-      <Form>
-        <Form.Item required label="授权密码" help={`用户 ${username} 的密码， 该密码仅做首次验证使用，不会存储该密码。`}>
-          <Input.Password onChange={val => this.setState({password: val.target.value})}/>
-        </Form.Item>
-      </Form>
-    )
-  };
+  const ConfirmForm = (props) => (
+    <Form>
+      <Form.Item required label="授权密码" help={`用户 ${props.username} 的密码， 该密码仅做首次验证使用，不会存储该密码。`}>
+        <Input.Password onChange={e => setPassword(e.target.value)}/>
+      </Form.Item>
+    </Form>
+  )

-  handleAddZone = () => {
-    this.setState({zone: ''}, () => {
-      Modal.confirm({
-        icon: 'exclamation-circle',
-        title: '添加主机类别',
-        content: (
-          <Form>
-            <Form.Item required label="主机类别">
-              <Input onChange={e => this.setState({addZone: e.target.value})}/>
-            </Form.Item>
-          </Form>
-        ),
-        onOk: () => {
-          if (this.state.addZone) {
-            store.zones.push(this.state.addZone);
-            this.props.form.setFieldsValue({'zone': this.state.addZone})
-          }
-        },
-      })
-    });
-  };
-
-  handleEditZone = () => {
-    this.setState({zone: store.record.zone}, () => {
-      Modal.confirm({
-        icon: 'exclamation-circle',
-        title: '编辑主机类别',
-        content: (
-          <Form>
-            <Form.Item required label="主机类别" help="该操作将批量更新所有属于该类别的主机并立即生效，如过只是想修改单个主机的类别请使用添加类别或下拉框选择切换类别。">
-              <Input defaultValue={store.record.zone} onChange={e => this.setState({editZone: e.target.value})}/>
-            </Form.Item>
-          </Form>
-        ),
-        onOk: () => http.patch('/api/host/', {id: store.record.id, zone: this.state.editZone})
-          .then(res => {
-            message.success(`成功修改${res}条记录`);
-            store.fetchRecords();
-            this.props.form.setFieldsValue({'zone': this.state.editZone})
-          })
-      })
-    });
-  };
-
-  handleUploadChange = (v) => {
+  function handleUploadChange(v) {
    if (v.fileList.length === 0) {
-      this.setState({fileList: []})
+      setFileList([])
    }
-  };
+  }

-  handleUpload = (file, fileList) => {
-    this.setState({uploading: true});
+  function handleUpload(file, fileList) {
+    setUploading(true);
    const formData = new FormData();
    formData.append('file', file);
    http.post('/api/host/parse/', formData)
      .then(res => {
        file.data = res;
-        this.setState({fileList: [file]})
+        setFileList([file])
      })
-      .finally(() => this.setState({uploading: false}))
+      .finally(() => setUploading(false))
    return false
-  };
-
-  render() {
-    const info = store.record;
-    const {fileList, loading, uploading} = this.state;
-    const {getFieldDecorator} = this.props.form;
-    return (
-      <Modal
-        visible
-        width={800}
-        maskClosable={false}
-        title={store.record.id ? '编辑主机' : '新建主机'}
-        okText="验证"
-        onCancel={() => store.formVisible = false}
-        confirmLoading={loading}
-        onOk={this.handleSubmit}>
-        <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
-          <Form.Item required label="主机类别">
-            <Col span={14}>
-              {getFieldDecorator('zone', {initialValue: info['zone']})(
-                <Select placeholder="请选择主机类别/区域/分组">
-                  {store.zones.map(item => (
-                    <Select.Option value={item} key={item}>{item}</Select.Option>
-                  ))}
-                </Select>
-              )}
-            </Col>
-            <Col span={4} offset={1}>
-              <Button type="link" onClick={this.handleAddZone}>添加类别</Button>
-            </Col>
-            <Col span={4} offset={1}>
-              <Button type="link" onClick={this.handleEditZone}>编辑类别</Button>
-            </Col>
-          </Form.Item>
-          <Form.Item required label="主机名称">
-            {getFieldDecorator('name', {initialValue: info['name']})(
-              <Input placeholder="请输入主机名称"/>
-            )}
-          </Form.Item>
-          <Form.Item required label="连接地址" style={{marginBottom: 0}}>
-            <Form.Item style={{display: 'inline-block', width: 'calc(30%)'}}>
-              {getFieldDecorator('username', {initialValue: info['username']})(
-                <Input addonBefore="ssh" placeholder="用户名"/>
-              )}
-            </Form.Item>
-            <Form.Item style={{display: 'inline-block', width: 'calc(40%)'}}>
-              {getFieldDecorator('hostname', {initialValue: info['hostname']})(
-                <Input addonBefore="@" placeholder="主机名/IP"/>
-              )}
-            </Form.Item>
-            <Form.Item style={{display: 'inline-block', width: 'calc(30%)'}}>
-              {getFieldDecorator('port', {initialValue: info['port']})(
-                <Input addonBefore="-p" placeholder="端口"/>
-              )}
-            </Form.Item>
-          </Form.Item>
-          <Form.Item label="独立密钥" extra="默认使用全局密钥，如果上传了独立密钥则优先使用该密钥。">
-            <Upload name="file" fileList={fileList} headers={{'X-Token': X_TOKEN}} beforeUpload={this.handleUpload}
-                    onChange={this.handleUploadChange}>
-              {fileList.length === 0 ? <Button loading={uploading} icon="upload">点击上传</Button> : null}
-            </Upload>
-          </Form.Item>
-          <Form.Item label="备注信息">
-            {getFieldDecorator('desc', {initialValue: info['desc']})(
-              <Input.TextArea placeholder="请输入主机备注信息"/>
-            )}
-          </Form.Item>
-          <Form.Item wrapperCol={{span: 14, offset: 6}}>
-            <span role="img" aria-label="notice">⚠️ 首次验证时需要输入登录用户名对应的密码，但不会存储该密码。</span>
-          </Form.Item>
-        </Form>
-      </Modal>
-    )
  }
-}

-export default Form.create()(ComForm)
+  const info = store.record;
+  return (
+    <Modal
+      visible
+      width={800}
+      maskClosable={false}
+      title={store.record.id ? '编辑主机' : '新建主机'}
+      okText="验证"
+      onCancel={() => store.formVisible = false}
+      confirmLoading={loading}
+      onOk={handleSubmit}>
+      <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 14}} initialValues={info}>
+        <Form.Item required name="zone" label="主机类别">
+          <Select placeholder="请选择主机类别/区域/分组">
+            {store.zones.map(item => (
+              <Select.Option value={item} key={item}>{item}</Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item required name="name" label="主机名称">
+          <Input placeholder="请输入主机名称"/>
+        </Form.Item>
+        <Form.Item required label="连接地址" style={{marginBottom: 0}}>
+          <Form.Item name="username" style={{display: 'inline-block', width: 'calc(30%)'}}>
+            <Input addonBefore="ssh" placeholder="用户名"/>
+          </Form.Item>
+          <Form.Item name="hostname" style={{display: 'inline-block', width: 'calc(40%)'}}>
+            <Input addonBefore="@" placeholder="主机名/IP"/>
+          </Form.Item>
+          <Form.Item name="port" style={{display: 'inline-block', width: 'calc(30%)'}}>
+            <Input addonBefore="-p" placeholder="端口"/>
+          </Form.Item>
+        </Form.Item>
+        <Form.Item label="独立密钥" extra="默认使用全局密钥，如果上传了独立密钥则优先使用该密钥。">
+          <Upload name="file" fileList={fileList} headers={{'X-Token': X_TOKEN}} beforeUpload={handleUpload}
+                  onChange={handleUploadChange}>
+            {fileList.length === 0 ? <Button loading={uploading} icon={<UploadOutlined/>}>点击上传</Button> : null}
+          </Upload>
+        </Form.Item>
+        <Form.Item name="desc" label="备注信息">
+          <Input.TextArea placeholder="请输入主机备注信息"/>
+        </Form.Item>
+        <Form.Item wrapperCol={{span: 14, offset: 6}}>
+          <span role="img" aria-label="notice">⚠️ 首次验证时需要输入登录用户名对应的密码，但不会存储该密码。</span>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+})
--- a/spug_web/src/pages/host/Import.js
+++ b/spug_web/src/pages/host/Import.js
@ -3,28 +3,23 @@
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
-import React from 'react';
+import React, { useState } from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Form, Input, Upload, Icon, Button, Tooltip, Alert } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { Modal, Form, Input, Upload, Button, Tooltip, Alert } from 'antd';
 import http from 'libs/http';
 import store from './store';

-@observer
-class ComImport extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: false,
-      password: null,
-      fileList: [],
-    }
-  }
+export default observer(function () {
+  const [loading, setLoading] = useState(false);
+  const [password, setPassword] = useState('');
+  const [fileList, setFileList] = useState([]);

-  handleSubmit = () => {
-    this.setState({loading: true});
+  function handleSubmit() {
+    setLoading(true);
    const formData = new FormData();
-    formData.append('file', this.state.fileList[0]);
-    if (this.state.password) formData.append('password', this.state.password);
+    formData.append('file', fileList[0]);
+    if (password) formData.append('password', password);
    http.post('/api/host/import/', formData, {timeout: 120000})
      .then(res => {
        Modal.info({
@ -52,54 +47,50 @@ class ComImport extends React.Component {
          </Form>
        })
      })
-      .finally(() => this.setState({loading: false}))
-  };
-
-  handleUpload = (v) => {
-    if (v.fileList.length === 0) {
-      this.setState({fileList: []})
-    } else {
-      this.setState({fileList: [v.file]})
-    }
-  };
-
-  render() {
-    return (
-      <Modal
-        visible
-        width={800}
-        maskClosable={false}
-        title="批量导入"
-        okText="导入"
-        onCancel={() => store.importVisible = false}
-        confirmLoading={this.state.loading}
-        okButtonProps={{disabled: !this.state.fileList.length}}
-        onOk={this.handleSubmit}>
-        <Alert closable showIcon type="info" message={null}
-               style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}}
-               description="导入或输入的密码仅作首次验证使用，并不会存储密码。"/>
-        <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
-          <Form.Item label="模板下载" help="请下载使用该模板填充数据后导入">
-            <a href="/resource/主机导入模板.xlsx">主机导入模板.xlsx</a>
-          </Form.Item>
-          <Form.Item label="默认密码" help="如果excel中密码为空则使用该密码">
-            <Input
-              value={this.state.password}
-              onChange={e => this.setState({password: e.target.value})}
-              placeholder="请输入默认主机密码"/>
-          </Form.Item>
-          <Form.Item required label="导入数据">
-            <Upload name="file" accept=".xls, .xlsx" fileList={this.state.fileList} beforeUpload={() => false}
-                    onChange={this.handleUpload}>
-              <Button>
-                <Icon type="upload"/> 点击上传
-              </Button>
-            </Upload>
-          </Form.Item>
-        </Form>
-      </Modal>
-    )
+      .finally(() => setLoading(false))
  }
-}

-export default ComImport
+  function handleUpload(v) {
+    if (v.fileList.length === 0) {
+      setFileList([])
+    } else {
+      setFileList([v.file])
+    }
+  }
+
+  return (
+    <Modal
+      visible
+      width={800}
+      maskClosable={false}
+      title="批量导入"
+      okText="导入"
+      onCancel={() => store.importVisible = false}
+      confirmLoading={loading}
+      okButtonProps={{disabled: !fileList.length}}
+      onOk={handleSubmit}>
+      <Alert closable showIcon type="info" message={null}
+             style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}}
+             description="导入或输入的密码仅作首次验证使用，并不会存储密码。"/>
+      <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
+        <Form.Item label="模板下载" help="请下载使用该模板填充数据后导入">
+          <a href="/resource/主机导入模板.xlsx">主机导入模板.xlsx</a>
+        </Form.Item>
+        <Form.Item label="默认密码" help="如果excel中密码为空则使用该密码">
+          <Input
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            placeholder="请输入默认主机密码"/>
+        </Form.Item>
+        <Form.Item required label="导入数据">
+          <Upload name="file" accept=".xls, .xlsx" fileList={fileList} beforeUpload={() => false}
+                  onChange={handleUpload}>
+            <Button>
+              <UploadOutlined/> 点击上传
+            </Button>
+          </Upload>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+})
--- a/spug_web/src/pages/host/Table.js
+++ b/spug_web/src/pages/host/Table.js
@ -6,9 +6,8 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
-import { Action } from 'components';
-import ComForm from './Form';
-import ComImport from './Import';
+import { PlusOutlined, ImportOutlined } from '@ant-design/icons';
+import { Action, TableCard, AuthButton } from 'components';
 import { http, hasPermission } from 'libs';
 import store from './store';

@ -48,36 +47,46 @@ class ComTable extends React.Component {
      data = data.filter(item => item['hostname'].toLowerCase().includes(store.f_host.toLowerCase()))
    }
    return (
-      <React.Fragment>
-        <Table
-          rowKey="id"
-          loading={store.isFetching}
-          dataSource={data}
-          pagination={{
-            showSizeChanger: true,
-            showLessItems: true,
-            hideOnSinglePage: true,
-            showTotal: total => `共 ${total} 条`,
-            pageSizeOptions: ['10', '20', '50', '100']
-          }}>
-          <Table.Column title="类别" dataIndex="zone"/>
-          <Table.Column title="主机名称" dataIndex="name" sorter={(a, b) => a.name.localeCompare(b.name)}/>
-          <Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
-          <Table.Column width={100} title="端口" dataIndex="port"/>
-          <Table.Column ellipsis title="备注信息" dataIndex="desc"/>
-          {hasPermission('host.host.edit|host.host.del|host.host.console') && (
-            <Table.Column width={200} title="操作" render={info => (
-              <Action>
-                <Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-                <Action.Button auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-                <Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
-              </Action>
-            )}/>
-          )}
-        </Table>
-        {store.formVisible && <ComForm/>}
-        {store.importVisible && <ComImport/>}
-      </React.Fragment>
+      <TableCard
+        rowKey="id"
+        title="主机列表"
+        loading={store.isFetching}
+        dataSource={data}
+        onReload={store.fetchRecords}
+        actions={[
+          <AuthButton
+            auth="host.host.add"
+            type="primary"
+            icon={<PlusOutlined/>}
+            onClick={() => store.showForm()}>新建</AuthButton>,
+          <AuthButton
+            auth="host.host.add"
+            type="primary"
+            icon={<ImportOutlined/>}
+            onClick={() => store.importVisible = true}>批量导入</AuthButton>
+        ]}
+        pagination={{
+          showSizeChanger: true,
+          showLessItems: true,
+          hideOnSinglePage: true,
+          showTotal: total => `共 ${total} 条`,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }}>
+        <Table.Column title="类别" dataIndex="zone"/>
+        <Table.Column title="主机名称" dataIndex="name" sorter={(a, b) => a.name.localeCompare(b.name)}/>
+        <Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
+        <Table.Column width={100} title="端口" dataIndex="port"/>
+        <Table.Column ellipsis title="备注信息" dataIndex="desc"/>
+        {hasPermission('host.host.edit|host.host.del|host.host.console') && (
+          <Table.Column width={200} title="操作" render={info => (
+            <Action>
+              <Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+              <Action.Button auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+              <Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
+            </Action>
+          )}/>
+        )}
+      </TableCard>
    )
  }
 }
--- a/spug_web/src/pages/host/index.js
+++ b/spug_web/src/pages/host/index.js
@ -5,15 +5,21 @@
 */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Input, Button, Select } from 'antd';
-import { SearchForm, AuthDiv, AuthCard } from 'components';
+import { Input, Select } from 'antd';
+import { SearchForm, AuthDiv, Breadcrumb } from 'components';
 import ComTable from './Table';
+import ComForm from './Form';
+import ComImport from './Import';
 import store from './store';

 export default observer(function () {
  return (
-    <AuthCard auth="host.host.view">
-      <SearchForm>
+    <AuthDiv auth="host.host.view">
+      <Breadcrumb>
+        <Breadcrumb.Item>首页</Breadcrumb.Item>
+        <Breadcrumb.Item>主机管理</Breadcrumb.Item>
+      </Breadcrumb>
+      <SearchForm style={{marginBottom: 16}}>
        <SearchForm.Item span={6} title="主机类别">
          <Select allowClear placeholder="请选择" value={store.f_zone} onChange={v => store.f_zone = v}>
            {store.zones.map(item => (
@ -27,16 +33,10 @@ export default observer(function () {
        <SearchForm.Item span={6} title="连接地址">
          <Input allowClear value={store.f_host} onChange={e => store.f_host = e.target.value} placeholder="请输入"/>
        </SearchForm.Item>
-        <SearchForm.Item span={6}>
-          <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
-        </SearchForm.Item>
      </SearchForm>
-      <AuthDiv auth="host.host.add" style={{marginBottom: 16}}>
-        <Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
-        <Button style={{marginLeft: 20}} type="primary" icon="import"
-                onClick={() => store.importVisible = true}>批量导入</Button>
-      </AuthDiv>
      <ComTable/>
-    </AuthCard>
-  )
+      {store.formVisible && <ComForm/>}
+      {store.importVisible && <ComImport/>}
+    </AuthDiv>
+  );
 })
--- a/spug_web/src/pages/host/routes.js
+++ b/spug_web/src/pages/host/routes.js
@ -1,12 +0,0 @@
-/**
- * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
- * Copyright (c) <spug.dev@gmail.com>
- * Released under the AGPL-3.0 License.
- */
-import { makeRoute } from "../../libs/router";
-import Index from './index';
-
-
-export default [
-  makeRoute('', Index),
-]