fix issue

spug_web/src/App.js

@@ -14,7 +14,7 @@ class App extends Component {
     return (
       <Switch>
         <Route path="/" exact component={Login} />
-        <Route path="/ssh/:id" exact component={WebSSH} />
+        <Route path="/ssh" exact component={WebSSH} />
         <Route component={Layout} />
       </Switch>
     );

spug_web/src/components/Breadcrumb.js

@@ -27,7 +27,10 @@ export default class extends React.Component {
         <Breadcrumb>
           {this.props.children}
         </Breadcrumb>
-        <div className={styles.title}>{title}</div>
+        <div className={styles.title}>
+          <span>{title}</span>
+          {this.props.extra}
+        </div>
       </div>
     )
   }

spug_web/src/components/index.module.less

@@ -141,6 +141,8 @@
   border-bottom: 1px solid #e8e8e8;
 
   .title {
+    display: flex;
+    justify-content: space-between;
     margin-bottom: 9px;
     font-size: 20px;
     line-height: 50px;

spug_web/src/pages/host/Detail.js

@@ -22,7 +22,7 @@ export default observer(function () {
         <Descriptions.Item label="所属分组">
           <List >
             {group_ids.map(g_id => (
-              <List.Item style={{padding: '6px 0'}}>{store.groups[g_id]}</List.Item>
+              <List.Item key={g_id} style={{padding: '6px 0'}}>{store.groups[g_id]}</List.Item>
             ))}
           </List>
         </Descriptions.Item>

spug_web/src/pages/host/Table.js

@@ -3,7 +3,7 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
 import { PlusOutlined, ImportOutlined } from '@ant-design/icons';
@@ -11,17 +11,12 @@ import { Action, TableCard, AuthButton } from 'components';
 import { http, hasPermission } from 'libs';
 import store from './store';
 
-@observer
+function ComTable() {
-class ComTable extends React.Component {
+  useEffect(() => {
-  componentDidMount() {
     store.fetchRecords()
-  }
+  }, [])
 
-  handleConsole = (info) => {
+  function handleDelete(text) {
-    window.open(`/ssh/${info.id}`)
-  };
-
-  handleDelete = (text) => {
     Modal.confirm({
       title: '删除确认',
       content: `确定要删除【${text['name']}】?`,
@@ -33,9 +28,8 @@ class ComTable extends React.Component {
           })
       }
     })
-  };
+  }
 
-  render() {
   return (
     <TableCard
       rowKey="id"
@@ -71,17 +65,15 @@ class ComTable extends React.Component {
       <Table.Column hide width={100} title="端口" dataIndex="port"/>
       <Table.Column title="备注信息" dataIndex="desc"/>
       {hasPermission('host.host.edit|host.host.del|host.host.console') && (
-          <Table.Column width={200} title="操作" render={info => (
+        <Table.Column width={160} 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.del" onClick={() => handleDelete(info)}>删除</Action.Button>
-              <Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
           </Action>
         )}/>
       )}
     </TableCard>
   )
-  }
 }
 
-export default ComTable
+export default observer(ComTable)

spug_web/src/pages/host/index.js

@@ -5,7 +5,8 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Row, Col } from 'antd';
+import { Row, Col, Button } from 'antd';
+import { RobotOutlined } from '@ant-design/icons';
 import { AuthDiv, Breadcrumb } from 'components';
 import Group from './Group';
 import ComTable from './Table';
@@ -16,9 +17,13 @@ import Selector from './Selector';
 import store from './store';
 
 export default observer(function () {
+  function openTerminal() {
+    window.open('/ssh')
+  }
+
   return (
     <AuthDiv auth="host.host.view">
-      <Breadcrumb>
+      <Breadcrumb extra={<Button type="primary" icon={<RobotOutlined/>} onClick={openTerminal}>Web 终端</Button>}>
         <Breadcrumb.Item>首页</Breadcrumb.Item>
         <Breadcrumb.Item>主机管理</Breadcrumb.Item>
       </Breadcrumb>