12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- import React, { useState } from 'react';
- import { Row, Col, Button, Drawer, Grid } from 'antd';
- import { SettingOutlined } from '@ant-design/icons';
- import WorklistTable from './components/WorklistTable';
- import OperationPanel from './components/OperationPanel';
- const { useBreakpoint } = Grid;
- const WorklistPage: React.FC = () => {
- const screens = useBreakpoint();
- const [drawerVisible, setDrawerVisible] = useState(false);
- return (
- <div className="p-4">
- {screens.xs ? (
- <>
- <WorklistTable />
- <Button
- type="primary"
- shape="circle"
- icon={<SettingOutlined />}
- className="fixed bottom-6 right-6 z-50"
- onClick={() => setDrawerVisible(true)}
- />
- <Drawer
- title="操作面板"
- placement="left"
- onClose={() => setDrawerVisible(false)}
- open={drawerVisible}
- width={300}
- >
- <OperationPanel />
- </Drawer>
- </>
- ) : (
- <Row gutter={16}>
- <Col span={screens.lg ? 18 : screens.md ? 20 : 24}>
- <WorklistTable />
- </Col>
- <Col span={screens.lg ? 6 : screens.md ? 4 : 0}>
- <OperationPanel />
- </Col>
- </Row>
- )}
- </div>
- );
- };
- export default WorklistPage;
|