From 822d9d9494cc575c1bcdbaa51d68da817236c0b8 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 12 十月 2024 08:13:56 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/settings/index.jsx | 10 +
zy-acs-flow/src/map/settings/MapSettings.jsx | 8
zy-acs-flow/src/map/settings/CopyDrawer.jsx | 346 ++++++++++++++++++++++++++-----------------------
zy-acs-flow/src/map/player.js | 4
zy-acs-flow/src/map/MapPage.jsx | 5
5 files changed, 203 insertions(+), 170 deletions(-)
diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 527f79d..b05430e 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -92,6 +92,11 @@
window.removeEventListener('resize', handleResize);
Tool.patchRaLayout('');
};
+ }, [])
+
+ useEffect(() => {
+ player.setTheme(themeMode);
+ Tool.setThemeMode(themeMode);
}, [themeMode])
const switchMode = (mode) => {
diff --git a/zy-acs-flow/src/map/player.js b/zy-acs-flow/src/map/player.js
index 63f6d2c..0ba0145 100644
--- a/zy-acs-flow/src/map/player.js
+++ b/zy-acs-flow/src/map/player.js
@@ -390,6 +390,10 @@
this.app.destroy(true, { children: true });
}
+ setTheme = (themeMode) => {
+ this.app.renderer.background.color = themeMode === 'dark' ? 0x2f3542 : 0xf1f2f6;
+ }
+
}
const generateApp = (dom, themeMode) => {
diff --git a/zy-acs-flow/src/map/settings/CopyDrawer.jsx b/zy-acs-flow/src/map/settings/CopyDrawer.jsx
index 2229124..f72ab02 100644
--- a/zy-acs-flow/src/map/settings/CopyDrawer.jsx
+++ b/zy-acs-flow/src/map/settings/CopyDrawer.jsx
@@ -5,11 +5,12 @@
Grid,
Typography,
TextField,
- Slider,
+ Card,
+ CardContent,
Button,
Select,
MenuItem,
- InputLabel,
+ useTheme,
FormControl,
Stack,
Divider,
@@ -79,6 +80,9 @@
const { open, onCancel, sprite, value, width = PAGE_DRAWER_WIDTH, handleOnCopy } = props;
const notify = useNotification();
const translate = useTranslate();
+ const theme = useTheme();
+ const themeMode = theme.palette.mode;
+
const deviceType = sprite?.data?.type;
const incrementOptions = incrementOptionsMap[deviceType]
@@ -137,173 +141,189 @@
</Stack>
<Box p={3}>
- <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
- <Grid container spacing={1.4}>
- <Grid item xs={6}>
- <Controller
- name="copyDirect"
- control={control}
- render={({ field }) => (
- <TextField
- {...field}
- label={translate('page.map.settings.map.copy.direction')}
- InputProps={{
- readOnly: true,
- }}
- fullWidth
- />
- )}
- />
- </Grid>
- <Grid item xs={6}>
- <Controller
- name="copyCount"
- control={control}
- render={({ field }) => (
- <TextField
- {...field}
- label={translate('page.map.settings.map.copy.count')}
- InputProps={{
- readOnly: true,
- }}
- fullWidth
- />
- )}
- />
- </Grid>
-
- <Grid item xs={12}>
- <Controller
- name="gap"
- control={control}
- render={({ field }) => (
- <TextField
- {...field}
- label={translate('page.map.settings.map.copy.field.gap')}
- type="number"
- sx={{ width: '50%' }}
- fullWidth
- inputProps={{
- min: 0,
- step: 1,
- }}
- />
- )}
- />
- </Grid>
-
- <Grid item xs={12} mt={2} mb={1}>
- <Divider />
- </Grid>
-
- <Grid item xs={12}>
- <Controller
- name="autoIncrement"
- control={control}
- rules={{ validate: (value) => validateIncrement(value, deviceType, sprite, translate) }}
- render={({ field }) => (
- <FormControlLabel
- control={
- <Switch
+ <Card sx={{
+ p: 2,
+ transition: '0.3s',
+ boxShadow: themeMode === 'light'
+ ? '0px 2px 8px rgba(0, 0, 0, 0.1)'
+ : '0px 2px 2px rgba(255, 255, 255, 0.1)',
+ '&:hover': {
+ boxShadow: themeMode === 'light'
+ ? '0px 4px 16px rgba(0, 0, 0, 0.2)'
+ : '0px 4px 8px rgba(255, 255, 255, 0.2)',
+ },
+ borderRadius: '8px',
+ }}>
+ <CardContent>
+ <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
+ <Grid container spacing={1.4}>
+ <Grid item xs={6}>
+ <Controller
+ name="copyDirect"
+ control={control}
+ render={({ field }) => (
+ <TextField
{...field}
- checked={field.value || false}
- onChange={(e) => field.onChange(e.target.checked)}
+ label={translate('page.map.settings.map.copy.direction')}
+ InputProps={{
+ readOnly: true,
+ }}
+ fullWidth
/>
- }
- label={translate('page.map.settings.map.copy.field.autoIncrement')}
+ )}
/>
+ </Grid>
+ <Grid item xs={6}>
+ <Controller
+ name="copyCount"
+ control={control}
+ render={({ field }) => (
+ <TextField
+ {...field}
+ label={translate('page.map.settings.map.copy.count')}
+ InputProps={{
+ readOnly: true,
+ }}
+ fullWidth
+ />
+ )}
+ />
+ </Grid>
+
+ <Grid item xs={12}>
+ <Controller
+ name="gap"
+ control={control}
+ render={({ field }) => (
+ <TextField
+ {...field}
+ label={translate('page.map.settings.map.copy.field.gap')}
+ type="number"
+ sx={{ width: '50%' }}
+ fullWidth
+ inputProps={{
+ min: 0,
+ step: 1,
+ }}
+ />
+ )}
+ />
+ </Grid>
+
+ <Grid item xs={12} mt={2} mb={1}>
+ <Divider />
+ </Grid>
+
+ <Grid item xs={12}>
+ <Controller
+ name="autoIncrement"
+ control={control}
+ rules={{ validate: (value) => validateIncrement(value, deviceType, sprite, translate) }}
+ render={({ field }) => (
+ <FormControlLabel
+ control={
+ <Switch
+ {...field}
+ checked={field.value || false}
+ onChange={(e) => field.onChange(e.target.checked)}
+ />
+ }
+ label={translate('page.map.settings.map.copy.field.autoIncrement')}
+ />
+ )}
+ />
+ {errors.autoIncrement && (
+ <Typography color="error">
+ {errors.autoIncrement.message}
+ </Typography>
+ )}
+ </Grid>
+
+ {(!!incrementOptions?.length && autoIncrement) && (
+ <Grid item xs={12}>
+ <FormControl fullWidth>
+ <FormLabel sx={{ mb: 1 }}>
+ {translate('page.map.settings.map.copy.field.incrementValue')}
+ </FormLabel>
+ <Controller
+ name='incrementValue'
+ control={control}
+ render={({ field }) => (
+ <ToggleButtonGroup
+ {...field}
+ value={field.value}
+ exclusive
+ onChange={(event, value) => {
+ if (value !== null) {
+ field.onChange(value);
+ }
+ }}
+ fullWidth
+ >
+ {incrementOptions.map((option, idx) => (
+ <ToggleButton key={idx} value={option.value}>
+ {translate(option.label)}
+ </ToggleButton>
+ ))}
+ </ToggleButtonGroup>
+ )}
+ />
+ </FormControl>
+ </Grid>
)}
- />
- {errors.autoIncrement && (
- <Typography color="error">
- {errors.autoIncrement.message}
- </Typography>
- )}
- </Grid>
- {(!!incrementOptions?.length && autoIncrement) && (
- <Grid item xs={12}>
- <FormControl fullWidth>
- <FormLabel sx={{ mb: 1 }}>
- {translate('page.map.settings.map.copy.field.incrementValue')}
- </FormLabel>
- <Controller
- name='incrementValue'
- control={control}
- render={({ field }) => (
- <ToggleButtonGroup
- {...field}
- value={field.value}
- exclusive
- onChange={(event, value) => {
- if (value !== null) {
- field.onChange(value);
- }
- }}
- fullWidth
- >
- {incrementOptions.map((option, idx) => (
- <ToggleButton key={idx} value={option.value}>
- {translate(option.label)}
- </ToggleButton>
- ))}
- </ToggleButtonGroup>
- )}
- />
- </FormControl>
+ {autoIncrement && (
+ <Grid item xs={12}>
+ <FormControl fullWidth>
+ <FormLabel sx={{
+ mb: 1
+ }}>
+ {translate('page.map.settings.map.copy.field.incrementMode')}
+ </FormLabel>
+ <Controller
+ name="incrementMode"
+ control={control}
+ render={({ field }) => (
+ <ToggleButtonGroup
+ {...field}
+ value={field.value}
+ exclusive
+ onChange={(event, value) => {
+ if (value !== null) {
+ field.onChange(value);
+ }
+ }}
+ fullWidth
+ >
+ <ToggleButton value="ascending">
+ {translate('page.map.settings.map.copy.field.ascend')}
+ </ToggleButton>
+ <ToggleButton value="descending">
+ {translate('page.map.settings.map.copy.field.descend')}
+ </ToggleButton>
+ </ToggleButtonGroup>
+ )}
+ />
+ </FormControl>
+ </Grid>
+ )}
+
+ <Grid item xs={12} mt={2}>
+ <Divider />
+ </Grid>
+
+ <Grid item xs={12} mt={2}>
+ <Stack direction="row" spacing={2}>
+ <Button variant="contained" color="primary" type="submit">
+ {translate('ra.action.confirm')}
+ </Button>
+ </Stack>
+ </Grid>
+
</Grid>
- )}
-
- {autoIncrement && (
- <Grid item xs={12}>
- <FormControl fullWidth>
- <FormLabel sx={{
- mb: 1
- }}>
- {translate('page.map.settings.map.copy.field.incrementMode')}
- </FormLabel>
- <Controller
- name="incrementMode"
- control={control}
- render={({ field }) => (
- <ToggleButtonGroup
- {...field}
- value={field.value}
- exclusive
- onChange={(event, value) => {
- if (value !== null) {
- field.onChange(value);
- }
- }}
- fullWidth
- >
- <ToggleButton value="ascending">
- {translate('page.map.settings.map.copy.field.ascend')}
- </ToggleButton>
- <ToggleButton value="descending">
- {translate('page.map.settings.map.copy.field.descend')}
- </ToggleButton>
- </ToggleButtonGroup>
- )}
- />
- </FormControl>
- </Grid>
- )}
-
- <Grid item xs={12} mt={2}>
- <Divider />
- </Grid>
-
- <Grid item xs={12} mt={2}>
- <Stack direction="row" spacing={2}>
- <Button variant="contained" color="primary" type="submit">
- {translate('ra.action.confirm')}
- </Button>
- </Stack>
- </Grid>
-
- </Grid>
- </Box>
+ </Box>
+ </CardContent>
+ </Card>
</Box>
</Box>
)}
diff --git a/zy-acs-flow/src/map/settings/MapSettings.jsx b/zy-acs-flow/src/map/settings/MapSettings.jsx
index d470e19..e414696 100644
--- a/zy-acs-flow/src/map/settings/MapSettings.jsx
+++ b/zy-acs-flow/src/map/settings/MapSettings.jsx
@@ -27,10 +27,10 @@
const { control, handleSubmit, reset, watch } = useForm({
defaultValues: {
- x: sprite?.position.x || 0,
- y: sprite?.position.y || 0,
- scaleX: sprite?.scale.x || 1,
- scaleY: sprite?.scale.y || 1,
+ x: sprite?.position?.x || 0,
+ y: sprite?.position?.y || 0,
+ scaleX: sprite?.scale?.x || 1,
+ scaleY: sprite?.scale?.y || 1,
rotation: (sprite?.rotation * 180) / Math.PI || 0,
copyDirection: 'right',
copyCount: 1,
diff --git a/zy-acs-flow/src/map/settings/index.jsx b/zy-acs-flow/src/map/settings/index.jsx
index 56096a3..c132d95 100644
--- a/zy-acs-flow/src/map/settings/index.jsx
+++ b/zy-acs-flow/src/map/settings/index.jsx
@@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect } from 'react';
import { useTranslate } from "react-admin";
-import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, CardHeader, Divider } from '@mui/material';
+import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, Divider } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
import MapSettings from './MapSettings';
@@ -53,9 +53,13 @@
<Box p={3}>
<Card sx={{
transition: '0.3s',
- boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)',
+ boxShadow: themeMode === 'light'
+ ? '0px 2px 8px rgba(0, 0, 0, 0.1)'
+ : '0px 2px 2px rgba(255, 255, 255, 0.1)',
'&:hover': {
- boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',
+ boxShadow: themeMode === 'light'
+ ? '0px 4px 16px rgba(0, 0, 0, 0.2)'
+ : '0px 4px 8px rgba(255, 255, 255, 0.2)',
},
borderRadius: '8px',
}}>
--
Gitblit v1.9.1