| | |
| | | return ( |
| | | <Box |
| | | sx={{ |
| | | margin: '0 -8px', // 抵消父容器的左右内边距 |
| | | margin: '0 -8px', |
| | | height: '100%', |
| | | display: 'flex', |
| | | flexDirection: 'column', |
| | | }} |
| | | > |
| | | {/* 菜单栏 */} |
| | | <Box |
| | | sx={{ |
| | | display: 'flex', |
| | | alignItems: 'center', |
| | | backgroundColor: '#f5f5f5', // 浅色背景 |
| | | backgroundColor: '#f5f5f5', |
| | | color: '#000', |
| | | padding: '0 16px', |
| | | height: '64px', // 固定高度 |
| | | flexShrink: 0, |
| | | height: '64px', |
| | | flexShrink: 0, // keep height |
| | | }} |
| | | > |
| | | {/* 左侧搜索框 */} |
| | | <TextField |
| | | variant="outlined" |
| | | size="small" |
| | |
| | | borderRadius: 1, |
| | | }} |
| | | /> |
| | | {/* 占位符,推动右侧内容 */} |
| | | <Box sx={{ flexGrow: 1 }} /> |
| | | {/* 模式选择下拉框 */} |
| | | <Select |
| | | value={mode} |
| | | onChange={handleModeChange} |
| | |
| | | <MenuItem value="edit">编辑模式</MenuItem> |
| | | <MenuItem value="configuration">配置模式</MenuItem> |
| | | </Select> |
| | | {/* 功能按钮 */} |
| | | <Button |
| | | variant="contained" |
| | | color="primary" |
| | |
| | | 模拟AGV运行 |
| | | </Button> |
| | | </Box> |
| | | {/* 地图区域 */} |
| | | <Box |
| | | sx={{ |
| | | flexGrow: 1, |
| | | flexGrow: 1, // fill remaining of map space |
| | | position: 'relative', |
| | | backgroundColor: '#fff', // 地图区域背景色 |
| | | backgroundColor: '#fff', |
| | | }} |
| | | > |
| | | {/* 地图占位符 */} |
| | | <Box |
| | | sx={{ |
| | | width: '100%', |
| | |
| | | backgroundColor: '#e0e0e0', |
| | | }} |
| | | /> |
| | | {/* Speed Dial组件 */} |
| | | <SpeedDial |
| | | ariaLabel="SpeedDial 示例" |
| | | sx={{ position: 'absolute', bottom: 16, right: 16 }} |