dros/src/pages/patient/register.tsx

import React from 'react';
import { Row, Col, Card, Collapse, Grid, Divider } from 'antd';
import BasicInfoForm from './components/register.form';
import ProtocolList from './components/register.protocol.list';
import SelectedProtocolList from './components/register.selected.protocol.list';

const { useBreakpoint } = Grid;
const { Panel } = Collapse;


const RegisterPage: React.FC = () => {
    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'>
                <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}  className='flex-1 border border-green-500 h-8'>
                    <BasicInfoForm style={{ flex: 1 }} />
                </Col>
                <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}>
                    <ProtocolList />
                </Col>
                <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}>
                    <SelectedProtocolList />
                </Col>
            </Row>
        );
    }

    if (screens.md || screens.lg) {
        // 中屏幕：左右两栏，右侧上下分
        return (
            <Row gutter={16} style={{ margin: 16 }}>
                <Col xs={24} sm={24} md={12} lg={12}>
                    <BasicInfoForm />
                </Col>
                <Col xs={24} sm={24} md={12} lg={12}>
                    <Row gutter={[0, 16]}>
                        <Col span={24}>
                            <ProtocolList />
                        </Col>
                        <Divider />
                        <Col span={24}>
                            <SelectedProtocolList className="" />
                        </Col>
                    </Row>
                </Col>
            </Row>
        );
    }

    if (screens.xs || screens.sm) {
        // 小屏幕：手风琴式布局
        return (
            <Collapse accordion defaultActiveKey={['1']} style={{ margin: 16 }}>
                <Panel header="基本信息表单区域" key="1">
                    <BasicInfoForm />
                </Panel>
                <Panel header="待选择协议列表区域" key="2">
                    <ProtocolList />
                </Panel>
                <Panel header="已选择协议列表区域" key="3">
                    <SelectedProtocolList />
                </Panel>
            </Collapse>
        );
    }
};

export default RegisterPage;