|
@@ -1,5 +1,5 @@
|
|
import React from 'react';
|
|
import React from 'react';
|
|
-import { Row, Col, Collapse, Grid, Divider } from 'antd';
|
|
|
|
|
|
+import { Row, Col, Collapse, Grid, Divider, Button, Space } from 'antd';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import BasicInfoForm from './components/register.form';
|
|
import BasicInfoForm from './components/register.form';
|
|
// import ProtocolList from './components/register.protocol.list';
|
|
// import ProtocolList from './components/register.protocol.list';
|
|
@@ -12,112 +12,109 @@ const { Panel } = Collapse;
|
|
const RegisterPage: React.FC = () => {
|
|
const RegisterPage: React.FC = () => {
|
|
const screens = useBreakpoint();
|
|
const screens = useBreakpoint();
|
|
|
|
|
|
- // xs: <480, sm: ≥576, md: ≥768, lg: ≥992, xl: ≥1200, xxl: ≥1600
|
|
|
|
- // 优先级:xs/sm(小屏)→ md/lg(中屏)→ xl/xxl(大屏)
|
|
|
|
- console.log(screens);
|
|
|
|
-
|
|
|
|
- if (screens.xl || screens.xxl) {
|
|
|
|
- // 大屏幕:三栏布局
|
|
|
|
- return (
|
|
|
|
- <Row className="flex-1 h-full">
|
|
|
|
- <Col
|
|
|
|
- xs={24}
|
|
|
|
- sm={24}
|
|
|
|
- md={8}
|
|
|
|
- lg={8}
|
|
|
|
- xl={8}
|
|
|
|
- xxl={8}
|
|
|
|
- style={{
|
|
|
|
- // border: '4px solid green',
|
|
|
|
- display: 'flex',
|
|
|
|
- flexDirection: 'column',
|
|
|
|
- }}
|
|
|
|
- className="h-full"
|
|
|
|
- >
|
|
|
|
- <BasicInfoForm style={{ overflow: 'auto' }} />
|
|
|
|
- </Col>
|
|
|
|
- <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} className="h-full">
|
|
|
|
- <RegisterAvailableList />
|
|
|
|
- </Col>
|
|
|
|
- <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}>
|
|
|
|
- <SelectedProtocolList />
|
|
|
|
- </Col>
|
|
|
|
- </Row>
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if (screens.md || screens.lg) {
|
|
|
|
- // 中屏幕:左右两栏,右侧上下分
|
|
|
|
- return (
|
|
|
|
- <Row className="h-full flex-1 ">
|
|
|
|
- <Col
|
|
|
|
- xs={24}
|
|
|
|
- sm={24}
|
|
|
|
- md={12}
|
|
|
|
- lg={12}
|
|
|
|
- className="h-full flex flex-column"
|
|
|
|
|
|
+ return (
|
|
|
|
+ <>
|
|
|
|
+ {screens.xl || screens.xxl ? (
|
|
|
|
+ <Row className="flex-1 h-full">
|
|
|
|
+ <Col
|
|
|
|
+ xs={24}
|
|
|
|
+ sm={24}
|
|
|
|
+ md={8}
|
|
|
|
+ lg={8}
|
|
|
|
+ xl={8}
|
|
|
|
+ xxl={8}
|
|
|
|
+ style={{
|
|
|
|
+ display: 'flex',
|
|
|
|
+ flexDirection: 'column',
|
|
|
|
+ }}
|
|
|
|
+ className="h-full"
|
|
|
|
+ >
|
|
|
|
+ <BasicInfoForm style={{ overflow: 'auto' }} />
|
|
|
|
+ </Col>
|
|
|
|
+ <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} className="h-full">
|
|
|
|
+ <RegisterAvailableList />
|
|
|
|
+ </Col>
|
|
|
|
+ <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}>
|
|
|
|
+ <SelectedProtocolList />
|
|
|
|
+ </Col>
|
|
|
|
+ </Row>
|
|
|
|
+ ) : screens.md || screens.lg ? (
|
|
|
|
+ <Row className="h-full flex-1 ">
|
|
|
|
+ <Col
|
|
|
|
+ xs={24}
|
|
|
|
+ sm={24}
|
|
|
|
+ md={12}
|
|
|
|
+ lg={12}
|
|
|
|
+ className="h-full flex flex-column"
|
|
|
|
+ >
|
|
|
|
+ <BasicInfoForm style={{ overflow: 'auto', width: '100%' }} />
|
|
|
|
+ </Col>
|
|
|
|
+ <Col xs={24} sm={24} md={12} lg={12}>
|
|
|
|
+ <Row gutter={[0, 16]}>
|
|
|
|
+ <Col span={24}>
|
|
|
|
+ <RegisterAvailableList />
|
|
|
|
+ </Col>
|
|
|
|
+ <Divider />
|
|
|
|
+ <Col span={24}>
|
|
|
|
+ <SelectedProtocolList className="" />
|
|
|
|
+ </Col>
|
|
|
|
+ </Row>
|
|
|
|
+ </Col>
|
|
|
|
+ </Row>
|
|
|
|
+ ) : (
|
|
|
|
+ <Collapse
|
|
|
|
+ accordion
|
|
|
|
+ defaultActiveKey={['1']}
|
|
|
|
+ style={{ overflow: 'auto', height: '100%' }}
|
|
>
|
|
>
|
|
- <BasicInfoForm style={{ overflow: 'auto', width: '100%' }} />
|
|
|
|
- </Col>
|
|
|
|
- <Col xs={24} sm={24} md={12} lg={12}>
|
|
|
|
- <Row gutter={[0, 16]}>
|
|
|
|
- <Col span={24}>
|
|
|
|
- <RegisterAvailableList />
|
|
|
|
- </Col>
|
|
|
|
- <Divider />
|
|
|
|
- <Col span={24}>
|
|
|
|
- <SelectedProtocolList className="" />
|
|
|
|
- </Col>
|
|
|
|
- </Row>
|
|
|
|
- </Col>
|
|
|
|
- </Row>
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if (screens.xs || screens.sm) {
|
|
|
|
- // 小屏幕:手风琴式布局
|
|
|
|
- return (
|
|
|
|
- <Collapse
|
|
|
|
- accordion
|
|
|
|
- defaultActiveKey={['1']}
|
|
|
|
- style={{ overflow: 'auto', height: '100%' }}
|
|
|
|
|
|
+ <Panel
|
|
|
|
+ header={
|
|
|
|
+ <FormattedMessage
|
|
|
|
+ id="register.basicInfoPanel"
|
|
|
|
+ defaultMessage="register.basicInfoPanel"
|
|
|
|
+ />
|
|
|
|
+ }
|
|
|
|
+ key="1"
|
|
|
|
+ >
|
|
|
|
+ <BasicInfoForm />
|
|
|
|
+ </Panel>
|
|
|
|
+ <Panel
|
|
|
|
+ header={
|
|
|
|
+ <FormattedMessage
|
|
|
|
+ id="register.protocolListPanel"
|
|
|
|
+ defaultMessage="register.protocolListPanel"
|
|
|
|
+ />
|
|
|
|
+ }
|
|
|
|
+ key="2"
|
|
|
|
+ >
|
|
|
|
+ <RegisterAvailableList />
|
|
|
|
+ </Panel>
|
|
|
|
+ <Panel
|
|
|
|
+ header={
|
|
|
|
+ <FormattedMessage
|
|
|
|
+ id="register.selectedProtocolListPanel"
|
|
|
|
+ defaultMessage="register.selectedProtocolListPanel"
|
|
|
|
+ />
|
|
|
|
+ }
|
|
|
|
+ key="3"
|
|
|
|
+ >
|
|
|
|
+ <SelectedProtocolList />
|
|
|
|
+ </Panel>
|
|
|
|
+ </Collapse>
|
|
|
|
+ )}
|
|
|
|
+ <Space
|
|
|
|
+ style={{
|
|
|
|
+ position: 'fixed',
|
|
|
|
+ bottom: '20px',
|
|
|
|
+ right: '20px',
|
|
|
|
+ zIndex: 1000,
|
|
|
|
+ }}
|
|
>
|
|
>
|
|
- <Panel
|
|
|
|
- header={
|
|
|
|
- <FormattedMessage
|
|
|
|
- id="register.basicInfoPanel"
|
|
|
|
- defaultMessage="register.basicInfoPanel"
|
|
|
|
- />
|
|
|
|
- }
|
|
|
|
- key="1"
|
|
|
|
- >
|
|
|
|
- <BasicInfoForm />
|
|
|
|
- </Panel>
|
|
|
|
- <Panel
|
|
|
|
- header={
|
|
|
|
- <FormattedMessage
|
|
|
|
- id="register.protocolListPanel"
|
|
|
|
- defaultMessage="register.protocolListPanel"
|
|
|
|
- />
|
|
|
|
- }
|
|
|
|
- key="2"
|
|
|
|
- >
|
|
|
|
- <RegisterAvailableList />
|
|
|
|
- </Panel>
|
|
|
|
- <Panel
|
|
|
|
- header={
|
|
|
|
- <FormattedMessage
|
|
|
|
- id="register.selectedProtocolListPanel"
|
|
|
|
- defaultMessage="register.selectedProtocolListPanel"
|
|
|
|
- />
|
|
|
|
- }
|
|
|
|
- key="3"
|
|
|
|
- >
|
|
|
|
- <SelectedProtocolList />
|
|
|
|
- </Panel>
|
|
|
|
- </Collapse>
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
|
|
+ <Button type="primary">注册</Button>
|
|
|
|
+ <Button type="default">检查</Button>
|
|
|
|
+ </Space>
|
|
|
|
+ </>
|
|
|
|
+ );
|
|
};
|
|
};
|
|
|
|
|
|
export default RegisterPage;
|
|
export default RegisterPage;
|