#

vincentlu

2025-12-17 b8d973c793763ab7eff09ce685642caca3a7c0ed

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

@@ -10,8 +10,6 @@
    List,
    ListItemButton,
    ListItemText,
    ListItemAvatar,
    Avatar,
    CircularProgress,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
@@ -39,6 +37,8 @@
        setLoading(true);
        fetchAreaList(zoneId)
            .then((list) => {
                console.log(list);
                
                setAreas(Array.isArray(list) ? list : []);
            })
            .finally(() => setLoading(false));
@@ -57,8 +57,7 @@
            sx={{ zIndex: 100, opacity: 0.95 }}
        >
            {open && (
                <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{
                }}>
                <Box pt={12} width={{ xs: '100vw', sm: width }} height={'calc(100vh - 200px)'} mt={{ xs: 2, sm: 1 }}>
                    <Stack direction="row" alignItems="center" px={3} py={2}>
                        <Typography variant="h6" flex={1}>
                            {translate('page.map.action.areaList')}
@@ -87,28 +86,51 @@
                                        sx={{
                                            borderRadius: 2,
                                            mb: 1,
                                            px: 2,
                                            py: 1.5,
                                            background:
                                                themeMode === 'light'
                                                    ? 'linear-gradient(145deg, #f8f9fa, #ffffff)'
                                                    : 'linear-gradient(145deg, #2d3436, #353b48)',
                                            border: `1px solid ${theme.palette.divider}`,
                                            display: 'flex',
                                            gap: 1.5,
                                            alignItems: 'center',
                                            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
                                            boxShadow:
                                                themeMode === 'light'
                                                    ? '0 2px 8px rgba(0,0,0,0.07)'
                                                    : '0 2px 8px rgba(255,255,255,0.12)',
                                                    ? '0 6px 12px rgba(0,0,0,0.06)'
                                                    : '0 6px 12px rgba(0,0,0,0.25)',
                                            '&:hover': {
                                                transform: 'translateY(-2px)',
                                                boxShadow:
                                                    themeMode === 'light'
                                                        ? '0 12px 24px rgba(0,0,0,0.08)'
                                                        : '0 12px 24px rgba(0,0,0,0.35)',
                                            },
                                        }}
                                    >
                                        <ListItemAvatar>
                                            <Avatar
                                                variant="rounded"
                                                sx={{
                                                    bgcolor: area.color ? Number(area.color) : theme.palette.grey[400],
                                                    color: theme.palette.getContrastText(
                                                        area.color ? Number(area.color) : theme.palette.grey[400]
                                                    ),
                                                }}
                                            >
                                                {area.name?.slice(0, 1)?.toUpperCase() || 'A'}
                                            </Avatar>
                                        </ListItemAvatar>
                                        <Box
                                            sx={{
                                                width: 12,
                                                height: 12,
                                                borderRadius: '50%',
                                                bgcolor: area.color ? Number(area.color) : theme.palette.info.light,
                                                border: `1px solid ${theme.palette.common.white}`,
                                                boxShadow: '0 0 4px rgba(0,0,0,0.2)',
                                            }}
                                        />
                                        <ListItemText
                                            primary={area.name || translate('page.map.area.form.name')}
                                            secondary={area.code ? `${translate('page.map.area.form.code')}: ${area.code}` : ''}
                                            // secondary={area.code ? `${translate('page.map.area.form.code')}: ${area.code}` : ''}
                                            primaryTypographyProps={{
                                                fontWeight: 600,
                                                fontSize: 16,
                                            }}
                                            secondaryTypographyProps={{
                                                color: theme.palette.text.secondary,
                                                fontSize: 12,
                                            }}
                                        />
                                    </ListItemButton>
                                ))}