github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

improve style

pull/410/head
vapao 2021-09-28 14:37:50 +08:00
parent f26635e9ad
commit 31979fbe4e
2 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
spug_web/src/pages/host/Form.js
View File

@ -9,6 +9,7 @@ import { ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { Modal, Form, Input, TreeSelect, Button, Upload, Alert, message } from 'antd'; import { Modal, Form, Input, TreeSelect, Button, Upload, Alert, message } from 'antd';
import { http, X_TOKEN } from 'libs'; import { http, X_TOKEN } from 'libs';
import store from './store'; import store from './store';
import styles from './index.module.less';
export default observer(function () { export default observer(function () {
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -126,13 +127,13 @@ export default observer(function () {
<Input placeholder="请输入主机名称"/> <Input placeholder="请输入主机名称"/>
</Form.Item> </Form.Item>
<Form.Item required label="连接地址" style={{marginBottom: 0}}> <Form.Item required label="连接地址" style={{marginBottom: 0}}>
<Form.Item name="username" style={{display: 'inline-block', width: 'calc(30%)'}}> <Form.Item name="username" className={styles.formAddress1} style={{width: 'calc(30%)'}}>
<Input addonBefore="ssh" placeholder="用户名"/> <Input addonBefore="ssh" placeholder="用户名"/>
</Form.Item> </Form.Item>
<Form.Item name="hostname" style={{display: 'inline-block', width: 'calc(40%)'}}> <Form.Item name="hostname" className={styles.formAddress2} style={{width: 'calc(40%)'}}>
<Input addonBefore="@" placeholder="主机名/IP"/> <Input addonBefore="@" placeholder="主机名/IP"/>
</Form.Item> </Form.Item>
<Form.Item name="port" style={{display: 'inline-block', width: 'calc(30%)'}}> <Form.Item name="port" className={styles.formAddress3} style={{width: 'calc(30%)'}}>
<Input addonBefore="-p" placeholder="端口"/> <Input addonBefore="-p" placeholder="端口"/>
</Form.Item> </Form.Item>
</Form.Item> </Form.Item>
@ -146,7 +147,7 @@ export default observer(function () {
<Input.TextArea placeholder="请输入主机备注信息"/> <Input.TextArea placeholder="请输入主机备注信息"/>
</Form.Item> </Form.Item>
<Form.Item wrapperCol={{span: 17, offset: 5}}> <Form.Item wrapperCol={{span: 17, offset: 5}}>
<Alert showIcon type="info" message="首次验证时需要输入登录用户名对应的密码，该密码会用于配置密钥连接，不会存储该密码。" /> <Alert showIcon type="info" message="首次验证时需要输入登录用户名对应的密码，该密码会用于配置密钥连接，不会存储该密码。"/>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

38
spug_web/src/pages/host/index.module.less
View File

@ -1,11 +1,11 @@
.steps { .steps {
width: 350px; width: 350px;
margin: 0 auto 30px; margin: 0 auto 30px;
} }
.tagAdd { .tagAdd {
background: #fff; background: #fff;
border-style: dashed; border-style: dashed;
} }
.tagNumberInput { .tagNumberInput {
@ -29,3 +29,33 @@
.selector :global(.ant-modal-footer) { .selector :global(.ant-modal-footer) {
border-top: none border-top: none
} }
.formAddress1 {
display: inline-block;
:global(.ant-input) {
border-radius: 0;
}
}
.formAddress2 {
display: inline-block;
:global(.ant-input-group-addon) {
border-left: none;
border-radius: 0;
}
:global(.ant-input) {
border-radius: 0;
}
}
.formAddress3 {
display: inline-block;
:global(.ant-input-group-addon) {
border-left: none;
border-radius: 0;
}
}