style migrate v3

spug_web/src/pages/exec/task/ExecConsole.js

@@ -5,7 +5,15 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Collapse, Tooltip, Icon } from 'antd';
+import {
+  CaretRightOutlined,
+  CheckCircleTwoTone,
+  LoadingOutlined,
+  WarningTwoTone,
+  FullscreenOutlined,
+  FullscreenExitOutlined
+} from '@ant-design/icons';
+import { Modal, Collapse, Tooltip } from 'antd';
 import { X_TOKEN } from 'libs';
 import OutView from './OutView';
 import styles from './index.module.css';
@@ -54,14 +62,14 @@ class ExecConsole extends React.Component {
   genExtra = (outputs) => {
     let latest, icon;
     if (outputs['status'] === -2) {
-      return <Icon type="loading" style={{fontSize: 20, color: '#108ee9'}}/>
+      return <LoadingOutlined style={{fontSize: 20, color: '#108ee9'}}/>;
     } else if (outputs['status'] === 0) {
       latest = outputs['info'][outputs['info'].length - 1];
-      icon = <Icon type="check-circle" style={{fontSize: 20}} theme="twoTone" twoToneColor="#52c41a"/>
+      icon = <CheckCircleTwoTone style={{fontSize: 20}} twoToneColor="#52c41a"/>
     } else {
       latest = outputs['error'][outputs['error'].length - 1]
       icon = <Tooltip title={`退出状态码：${outputs['status']}`}>
-        <Icon type="warning" style={{fontSize: 20}} theme="twoTone" twoToneColor="red"/>
+        <WarningTwoTone style={{fontSize: 20}} twoToneColor="red"/>
       </Tooltip>
     }
     return (
@@ -80,7 +88,7 @@ class ExecConsole extends React.Component {
         title={[
           <span key="1">执行控制台</span>,
           <div key="2" className={styles.fullscreen} onClick={() => store.isFullscreen = !store.isFullscreen}>
-            <Icon type={store.isFullscreen ? 'fullscreen-exit' : 'fullscreen'}/>
+            {store.isFullscreen ? <FullscreenExitOutlined/> : <FullscreenOutlined/>}
           </div>
         ]}
         footer={null}
@@ -91,7 +99,7 @@ class ExecConsole extends React.Component {
           accordion
           defaultActiveKey={[0]}
           className={styles.collapse}
-          expandIcon={({isActive}) => <Icon type="caret-right" style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
+          expandIcon={({isActive}) => <CaretRightOutlined style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
           {Object.entries(store.outputs).map(([key, item], index) => (
             <Collapse.Panel
               key={index}

spug_web/src/pages/exec/task/HostSelector.js

@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
+import { SyncOutlined } from '@ant-design/icons';
 import { Modal, Table, Input, Button, Select } from 'antd';
 import { SearchForm } from 'components';
 import store from '../../host/store';
@@ -92,7 +93,7 @@ class HostSelector extends React.Component {
             {selectedRows.length} 台
           </SearchForm.Item>
           <SearchForm.Item span={4}>
-            <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
+            <Button type="primary" icon={<SyncOutlined />} onClick={store.fetchRecords}>刷新</Button>
           </SearchForm.Item>
         </SearchForm>
         <Table

spug_web/src/pages/exec/task/TemplateSelector.js

@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
+import { SyncOutlined } from '@ant-design/icons';
 import { Modal, Table, Input, Button, Select } from 'antd';
 import { SearchForm } from 'components';
 import store from '../template/store';
@@ -82,7 +83,7 @@ class TemplateSelector extends React.Component {
             <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
           </SearchForm.Item>
           <SearchForm.Item span={8}>
-            <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
+            <Button type="primary" icon={<SyncOutlined />} onClick={store.fetchRecords}>刷新</Button>
           </SearchForm.Item>
         </SearchForm>
         <Table

spug_web/src/pages/exec/task/index.js

@@ -5,8 +5,9 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Form, Button, Tag } from 'antd';
-import { ACEditor, AuthCard } from 'components';
+import { PlusOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import { Form, Button, Card, Tag } from 'antd';
+import { ACEditor, AuthDiv, Breadcrumb } from 'components';
 import HostSelector from './HostSelector';
 import TemplateSelector from './TemplateSelector';
 import ExecConsole from './ExecConsole';
@@ -34,32 +35,40 @@ class TaskIndex extends React.Component {
   render() {
     const {body, token} = this.state;
     return (
-      <AuthCard auth="exec.task.do">
-        <Form>
-          <Form.Item label="执行主机">
-            {store.hosts.map(item => (
-              <Tag
-                closable
-                color="#108ee9"
-                key={item.id}
-                onClose={() => store.hosts = store.hosts.filter(x => x.id !== item.id)}>
-                {item.name}({item.hostname}:{item.port})</Tag>
-            ))}
-          </Form.Item>
-          <Button icon="plus" onClick={store.switchHost}>从主机列表中选择</Button>
-          <Form.Item label="执行命令">
-            <ACEditor mode="sh" value={body} height="300px" onChange={body => this.setState({body})}/>
-          </Form.Item>
-          <Form.Item>
-            <Button icon="plus" onClick={store.switchTemplate}>从执行模版中选择</Button>
-          </Form.Item>
-          <Button icon="thunderbolt" type="primary" onClick={this.handleSubmit}>开始执行</Button>
-        </Form>
+      <AuthDiv auth="exec.task.do">
+        <Breadcrumb>
+          <Breadcrumb.Item>首页</Breadcrumb.Item>
+          <Breadcrumb.Item>批量执行</Breadcrumb.Item>
+          <Breadcrumb.Item>执行任务</Breadcrumb.Item>
+        </Breadcrumb>
+        <Card>
+          <Form layout="vertical">
+            <Form.Item label="执行主机" style={{marginBottom: 12}}>
+              {store.hosts.map(item => (
+                <Tag
+                  closable
+                  color="#108ee9"
+                  key={item.id}
+                  onClose={() => store.hosts = store.hosts.filter(x => x.id !== item.id)}>
+                  {item.name}({item.hostname}:{item.port})</Tag>
+              ))}
+            </Form.Item>
+            <Button style={{marginBottom: 24}} icon={<PlusOutlined/>} onClick={store.switchHost}>从主机列表中选择</Button>
+            <Form.Item label="执行命令">
+              <ACEditor mode="sh" value={body} height="300px" onChange={body => this.setState({body})}/>
+            </Form.Item>
+            <Form.Item>
+              <Button icon={<PlusOutlined/>} onClick={store.switchTemplate}>从执行模版中选择</Button>
+            </Form.Item>
+            <Button icon={<ThunderboltOutlined/>} type="primary" onClick={this.handleSubmit}>开始执行</Button>
+          </Form>
+        </Card>
         {store.showHost && <HostSelector onCancel={store.switchHost} onOk={hosts => store.hosts = hosts}/>}
-        {store.showTemplate && <TemplateSelector onCancel={store.switchTemplate} onOk={v => this.setState({body: body + v})}/>}
+        {store.showTemplate &&
+        <TemplateSelector onCancel={store.switchTemplate} onOk={v => this.setState({body: body + v})}/>}
         {store.showConsole && <ExecConsole token={token} onCancel={store.switchConsole}/>}
-      </AuthCard>
-    )
+      </AuthDiv>
+    );
   }
 }