style migrate v3

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) {

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) {

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) {

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>
+    )
+  }
+}

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 styles from './index.module.less';
-import lodash from "lodash";
-
 
 export default class extends React.Component {
   static Item(props) {
     return (
-      <Form.Item {...props} label={props.title}>
+      <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}>
+      <div className={styles.searchForm} style={this.props.style}>
+        <Form style={this.props.style}>
           <Row gutter={{md: 8, lg: 24, xl: 48}}>
-          {items.filter(item => item).map((item, index) => (
+            {this.props.children}
-            <Col key={index} md={lodash.get(item.props, 'span')} sm={24}>
-              {item}
-            </Col>
-          ))}
           </Row>
         </Form>
+      </div>
     )
   }
 }

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 {

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

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,
 }

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;
-}

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;
+  }
+}

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
+export default observer(function () {
-class ComForm extends React.Component {
+  const [form] = Form.useForm();
-  constructor(props) {
+  const [loading, setLoading] = useState(false);
-    super(props);
+  const [uploading, setUploading] = useState(false);
-    this.state = {
+  const [password, setPassword] = useState();
-      loading: false,
+  const [fileList, setFileList] = useState([]);
-      uploading: false,
-      password: null,
-      addZone: null,
-      fileList: [],
-      editZone: store.record.zone,
-    }
-  }
 
-  componentDidMount() {
+  useEffect(() => {
     if (store.record.pkey) {
-      this.setState({
+      setFileList([{uid: '0', name: '独立密钥', data: store.record.pkey}])
-        fileList: [{uid: '0', name: '独立密钥', data: store.record.pkey}]
-      })
-    }
     }
+  }, [])
 
-  handleSubmit = () => {
+  function handleSubmit() {
-    this.setState({loading: true});
+    setLoading(true);
-    const formData = this.props.form.getFieldsValue();
+    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),
+              content: <ConfirmForm username={formData.username}/>,
-              onOk: () => this.handleConfirm(formData),
+              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) => {
+  function handleConfirm(formData) {
-    if (this.state.password) {
+    if (password) {
-      formData['password'] = this.state.password;
+      formData['password'] = password;
       return http.post('/api/host/', formData).then(res => {
         message.success('验证成功');
         store.formVisible = false;
@@ -69,85 +61,36 @@ class ComForm extends React.Component {
       })
     }
     message.error('请输入授权密码')
-  };
+  }
 
-  confirmForm = (username) => {
+  const ConfirmForm = (props) => (
-    return (
     <Form>
-        <Form.Item required label="授权密码" help={`用户 ${username} 的密码， 该密码仅做首次验证使用，不会存储该密码。`}>
+      <Form.Item required label="授权密码" help={`用户 ${props.username} 的密码， 该密码仅做首次验证使用，不会存储该密码。`}>
-          <Input.Password onChange={val => this.setState({password: val.target.value})}/>
+        <Input.Password onChange={e => setPassword(e.target.value)}/>
       </Form.Item>
     </Form>
   )
-  };
 
-  handleAddZone = () => {
+  function handleUploadChange(v) {
-    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) => {
     if (v.fileList.length === 0) {
-      this.setState({fileList: []})
+      setFileList([])
+    }
   }
-  };
 
-  handleUpload = (file, fileList) => {
+  function handleUpload(file, fileList) {
-    this.setState({uploading: true});
+    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
@@ -157,57 +100,37 @@ class ComForm extends React.Component {
       okText="验证"
       onCancel={() => store.formVisible = false}
       confirmLoading={loading}
-        onOk={this.handleSubmit}>
+      onOk={handleSubmit}>
-        <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
+      <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 14}} initialValues={info}>
-          <Form.Item required label="主机类别">
+        <Form.Item required name="zone" 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="主机名称">
+        <Form.Item required name="name" 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%)'}}>
+          <Form.Item name="username" 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%)'}}>
+          <Form.Item name="hostname" 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%)'}}>
+          <Form.Item name="port" 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}
+          <Upload name="file" fileList={fileList} headers={{'X-Token': X_TOKEN}} beforeUpload={handleUpload}
-                    onChange={this.handleUploadChange}>
+                  onChange={handleUploadChange}>
-              {fileList.length === 0 ? <Button loading={uploading} icon="upload">点击上传</Button> : null}
+            {fileList.length === 0 ? <Button loading={uploading} icon={<UploadOutlined/>}>点击上传</Button> : null}
           </Upload>
         </Form.Item>
-          <Form.Item label="备注信息">
+        <Form.Item name="desc" 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>
@@ -215,7 +138,4 @@ class ComForm extends React.Component {
       </Form>
     </Modal>
   )
-  }
+})
-}
-
-export default Form.create()(ComForm)

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
+export default observer(function () {
-class ComImport extends React.Component {
+  const [loading, setLoading] = useState(false);
-  constructor(props) {
+  const [password, setPassword] = useState('');
-    super(props);
+  const [fileList, setFileList] = useState([]);
-    this.state = {
-      loading: false,
-      password: null,
-      fileList: [],
-    }
-  }
 
-  handleSubmit = () => {
+  function handleSubmit() {
-    this.setState({loading: true});
+    setLoading(true);
     const formData = new FormData();
-    formData.append('file', this.state.fileList[0]);
+    formData.append('file', fileList[0]);
-    if (this.state.password) formData.append('password', this.state.password);
+    if (password) formData.append('password', password);
     http.post('/api/host/import/', formData, {timeout: 120000})
       .then(res => {
         Modal.info({
@@ -52,18 +47,17 @@ class ComImport extends React.Component {
           </Form>
         })
       })
-      .finally(() => this.setState({loading: false}))
+      .finally(() => setLoading(false))
-  };
+  }
-
+
-  handleUpload = (v) => {
+  function handleUpload(v) {
-    if (v.fileList.length === 0) {
+    if (v.fileList.length === 0) {
-      this.setState({fileList: []})
+      setFileList([])
-    } else {
+    } else {
-      this.setState({fileList: [v.file]})
+      setFileList([v.file])
+    }
   }
-  };
 
-  render() {
   return (
     <Modal
       visible
@@ -72,9 +66,9 @@ class ComImport extends React.Component {
       title="批量导入"
       okText="导入"
       onCancel={() => store.importVisible = false}
-        confirmLoading={this.state.loading}
+      confirmLoading={loading}
-        okButtonProps={{disabled: !this.state.fileList.length}}
+      okButtonProps={{disabled: !fileList.length}}
-        onOk={this.handleSubmit}>
+      onOk={handleSubmit}>
       <Alert closable showIcon type="info" message={null}
              style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}}
              description="导入或输入的密码仅作首次验证使用，并不会存储密码。"/>
@@ -84,22 +78,19 @@ class ComImport extends React.Component {
         </Form.Item>
         <Form.Item label="默认密码" help="如果excel中密码为空则使用该密码">
           <Input
-              value={this.state.password}
+            value={password}
-              onChange={e => this.setState({password: e.target.value})}
+            onChange={e => setPassword(e.target.value)}
             placeholder="请输入默认主机密码"/>
         </Form.Item>
         <Form.Item required label="导入数据">
-            <Upload name="file" accept=".xls, .xlsx" fileList={this.state.fileList} beforeUpload={() => false}
+          <Upload name="file" accept=".xls, .xlsx" fileList={fileList} beforeUpload={() => false}
-                    onChange={this.handleUpload}>
+                  onChange={handleUpload}>
             <Button>
-                <Icon type="upload"/> 点击上传
+              <UploadOutlined/> 点击上传
             </Button>
           </Upload>
         </Form.Item>
       </Form>
     </Modal>
-    )
+  );
-  }
+})
-}
-
-export default ComImport

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 { PlusOutlined, ImportOutlined } from '@ant-design/icons';
-import ComForm from './Form';
+import { Action, TableCard, AuthButton } from 'components';
-import ComImport from './Import';
 import { http, hasPermission } from 'libs';
 import store from './store';
 
@@ -48,11 +47,24 @@ class ComTable extends React.Component {
       data = data.filter(item => item['hostname'].toLowerCase().includes(store.f_host.toLowerCase()))
     }
     return (
-      <React.Fragment>
+      <TableCard
-        <Table
         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,
@@ -74,10 +86,7 @@ class ComTable extends React.Component {
             </Action>
           )}/>
         )}
-        </Table>
+      </TableCard>
-        {store.formVisible && <ComForm/>}
-        {store.importVisible && <ComImport/>}
-      </React.Fragment>
     )
   }
 }

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 { Input, Select } from 'antd';
-import { SearchForm, AuthDiv, AuthCard } from 'components';
+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">
+    <AuthDiv auth="host.host.view">
-      <SearchForm>
+      <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>
+  );
 })

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),
-]