U 优化系统设置 - 报警服务设置提示信息。

pull/103/head
zypo 2020-05-15 15:52:30 +08:00
parent fbe4bd0899
commit 08ea420205
2 changed files with 21 additions and 12 deletions

View File

@ -4,13 +4,14 @@
* Released under the MIT License.
*/
import React from 'react';
import { observer } from 'mobx-react';
import { Button, Form, Input, Radio, message } from 'antd';
import {observer} from 'mobx-react';
import {Button, Form, Input, Radio, message, Popover} from 'antd';
import styles from './index.module.css';
import { http } from 'libs';
import {http} from 'libs';
import store from './store';
import lds from 'lodash';
@observer
class AlarmSetting extends React.Component {
constructor(props) {
@ -48,21 +49,29 @@ class AlarmSetting extends React.Component {
}
};
render() {
const {getFieldDecorator} = this.props.form;
const {mode, spug_key} = this.state;
const spugWx = <img src="http://image.qbangmang.com/spug-weixin.jpeg" alt='spug'/>;
return (
<React.Fragment>
<div className={styles.title}>报警服务设置</div>
<Form style={{maxWidth: 400}}>
<Form style={{maxWidth: 340}}>
<Form.Item
colon={false}
label="调用凭据"
help={<span>该凭据用于调用spug内置的报警服务请关注公众号<span style={{color: '#008dff'}}>Spug运维</span></span>}>
help={<span>如需要使用Spug内置的邮件和微信报警服务请关注公众号
<span style={{color: '#008dff', cursor: 'pointer'}}>
<Popover content={spugWx}>
<span>Spug运维</span>
</Popover>
</span>
我的页面获取调用凭据否则请留空</span>}>
<Input
value={spug_key}
onChange={e => this.setState({spug_key: e.target.value})}
placeholder="请输入"/>
placeholder="请输入Spug微信公众号获取到的Token"/>
</Form.Item>
<Form.Item colon={false} label="邮件服务" help="用于通过邮件方式发送报警信息">
<Radio.Group
@ -80,7 +89,7 @@ class AlarmSetting extends React.Component {
{required: true, message: '请输入邮件服务器地址'}
]
})(
<Input placeholder="请输入,例如smtp.exmail.qq.com"/>
<Input placeholder="例如smtp.exmail.qq.com"/>
)}
</Form.Item>
<Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="端口">
@ -89,7 +98,7 @@ class AlarmSetting extends React.Component {
{required: true, message: '请输入邮件服务端口'}
]
})(
<Input placeholder="请输入,例如465"/>
<Input placeholder="例如465"/>
)}
</Form.Item>
<Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="邮箱账号">
@ -98,7 +107,7 @@ class AlarmSetting extends React.Component {
{required: true, message: '请输入邮箱账号'}
]
})(
<Input placeholder="请输入,例如dev@exmail.com"/>
<Input placeholder="例如dev@exmail.com"/>
)}
</Form.Item>
<Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="密码/授权码">
@ -107,12 +116,12 @@ class AlarmSetting extends React.Component {
{required: true, message: '请输入邮箱账号对应的密码或授权码'}
]
})(
<Input.Password placeholder="请输入邮箱账号对应的密码或授权码"/>
<Input.Password placeholder="请输入对应的密码或授权码"/>
)}
</Form.Item>
<Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} label="发件人昵称">
{getFieldDecorator('nickname', {initialValue: this.setting['nickname']})(
<Input placeholder="请输入"/>
<Input placeholder="请输入发件人昵称"/>
)}
</Form.Item>
</div>

View File

@ -32,7 +32,7 @@ export default observer(function () {
<Input
value={lds.get(store.settings, 'api_key.value')}
onChange={e => lds.set(store.settings, 'api_key.value', e.target.value)}
placeholder="请输入"/>
placeholder="请输入自定义Token"/>
</Form.Item>
<Form.Item>
<Button type="primary" loading={store.loading} onClick={handleSubmit}>保存设置</Button>