#

vincentlu

2025-12-17 3e184efaf5155f158ea05d087d964ffe64cee04a

#

 zy-acs-flow/src/map/AreaList.jsx

@@ -75,59 +75,13 @@
                }}>
                    <Stack direction="row" p={2}>
                        <Typography variant="h6" flex="1">
                            {title || translate('page.map.devices.title')}
                            {/* {title || translate('page.map.area.title')} */}
                        </Typography>
                        <IconButton onClick={handleClose} size="small">
                            <CloseIcon />
                        </IconButton>
                    </Stack>
                    <Box p={3}>
                        <Grid container spacing={0} sx={{
                            borderTop: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
                            borderLeft: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
                        }}>
                            {items.map((item, index) => {
                                return (
                                    <Grid
                                        key={index}
                                        item
                                        xs={4}
                                        onDragStart={(e) => onDragStart(e, item.type)}
                                        draggable="true"
                                    >
                                        <Box
                                            sx={{
                                                height: '100px',
                                                display: 'flex',
                                                flexDirection: 'column',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                                p: 2,
                                                cursor: 'pointer',
                                                borderRight: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
                                                borderBottom: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
                                                borderColor: 'divider',
                                                '&:hover': {
                                                    boxShadow: themeMode === 'light' ? '0px 5px 5px rgba(0, 0, 0, 0.15)' : '0px 5px 5px rgba(63, 63, 63, 0.8)',
                                                    transition: 'all 0.3s ease !important',
                                                },
                                            }}
                                        >
                                            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70%' }}>
                                                <img src={item.src} alt={item.label} width="50px" style={{
                                                    transform: `scale(${item.scale || 1})`,
                                                }} />
                                            </Box>
                                            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30%' }}>
                                                <Typography variant="body2" sx={{ mt: 2.5, textAlign: 'center' }}>
                                                    {translate(item.label)}
                                                </Typography>
                                            </Box>
                                        </Box>
                                    </Grid>
                                )
                            })}
                        </Grid>
                    </Box>
                </Box>
            )}