前端项目实战叁佰肆拾react-admin和material ui-mui/lab简单demo

import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import TabPanel from "@mui/lab/TabPanel";
import { useState } from "react";
 
const Spacer = () => <Box m = {1}>&nbsp;</Box>
const LineShow = () => {
    const [value, setValue] = useState('1');
    const handleChange = (event: React.SyntheticEvent, newValue: string) => {
        setValue(newValue);
    }
 
    return(
        <Show resource = 't_lps_line'>
            <Box width={'calc(100vw - 450px)'} >
                <Card elevation={0}>
                    <CardContent>
                        <Grid container spacing={1} >
                            <Grid item xs = {48} sm = {48} md ={24} >
                                <Divider textAlign="left">产线基本信息</Divider>
                                <Grid container spacing={1}>
                                    <Grid item xs ={6} sm = {6} md = {3} >
                                        <Labeled source = '编码'>
                                            <TextField source = 'code'/>
                                        </Labeled>
                                    </Grid>
                                    <Grid item xs ={6} sm = {6} md = {3} >
                                        <Labeled source = '名称'>
                                            <TextField source = 'name' />
                                        </Labeled>
                                    </Grid>
                                    <Grid item xs ={6} sm = {16} md = {3} >
                                        <Labeled source = '工厂编号'>
                                            <TextField source = 'plant_id' />
                                        </Labeled>
                                    </Grid>
                                    <Grid item xs ={6} sm = {6} md = {3} >
                                        <Labeled source = '产线说明'>
                                            <TextField source = 'description' />
                                        </Labeled>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </CardContent>
                    <Divider>
                        <Chip label = '产线资源配置' />    
                    </Divider>
                </Card>
                <Box sx={{ width: '100%', typography: 'body1' }}>
                    <TabContext value={value}>
                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                        <TabList onChange={handleChange} aria-label="lab API tabs example">
                            <Tab label="产线员工" value="1" />
                            <Tab label="产线设备" value="2" />
                            <Tab label="产线其他" value="3" />
                        </TabList>
                        </Box>
                        <TabPanel value="1"><LineEmpInfo/></TabPanel>
                        <TabPanel value="2">Item Two</TabPanel>
                        <TabPanel value="3">Item Three</TabPanel>
                    </TabContext>
                </Box>
            </Box>
        </Show>
    )