#

luxiaotao1123

2024-12-23 e4c23543689ae96e655328b80f1b7e6015a0c865

 zy-acs-flow/src/page/settings/Settings.jsx

@@ -1,4 +1,5 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import { useNavigate } from 'react-router-dom';
import {
    Edit,
    SimpleForm,
@@ -14,24 +15,125 @@
    NumberField,
    required,
    useRecordContext,
    DeleteButton,
    useTheme,
    useAuthProvider,
} from 'react-admin';
import { useWatch, useFormContext } from "react-hook-form";
import { Stack, Grid, Box, Typography, Card, CardContent } from '@mui/material';
import { Stack, Grid, Box, Typography, Card, CardContent, Tabs, Tab } from '@mui/material';
import * as Common from '@/utils/common';
import { } from '@/config/setting';

const Settings = () => {
    const authProvider = useAuthProvider();
    const navigate = useNavigate();
    const translate = useTranslate();
    const theme = useTheme();
    const [value, setValue] = React.useState(0);

    useEffect(() => {
        authProvider.checkAuth().catch(() => {
            navigate('/login');
        });
    }, [authProvider, navigate]);

    useEffect(() => {
    }, [value]);

    return (
        <>
            <Card>
                <CardContent>
                    
            <Card sx={{ backgroundColor: 'initial' }}>
                <CardContent >
                    <Box
                        mt={2}
                        sx={{
                            flexGrow: 1,
                            bgcolor: 'background.paper',
                            display: 'flex',
                            height: 224,
                            border: `1px solid #${theme[0] === 'light' ? 'ddd' : '333'}`,
                            borderRadius: 2
                        }}
                    >
                        <Tabs
                            orientation="vertical"
                            variant="scrollable"
                            value={value}
                            onChange={(event, newValue) => {
                                setValue(newValue);
                            }}
                            indicatorColor="secondary"
                            textColor="inherit"
                            sx={{
                                borderRight: 1,
                                borderColor: 'divider',
                                width: 150,
                            }}
                        >
                            <Tab
                                label={translate('settings.base')}
                                id='vertical-tab-0'
                                aria-controls='vertical-tabpanel-0'
                            />
                            <Tab label={translate('settings.security')}
                                id='vertical-tab-1'
                                aria-controls='vertical-tabpanel-1'
                            />
                        </Tabs>
                        <BaseSettings
                            value={value}
                        />
                        <SecuritySettings
                            value={value}
                        />
                    </Box>
                </CardContent>
            </Card>
        </>
    )
}

const BaseSettings = (props) => {
    const { children, value, ...other } = props;

    return (
        <Box
            hidden={value !== 0}
            sx={{ p: 3 }}
            {...other}
        >
            <Grid container spacing={6}>
                <Grid item xs={12}>
                    {/* https://github.com/themeselection/materio-mui-nextjs-admin-template-free/blob/main/javascript-version/src/views/account-settings/account/AccountDetails.jsx */}
                    <Card>
                        <CardContent className='mbe-5'>
                            <Typography>
                                Base Settings
                            </Typography>
                        </CardContent>
                    </Card>

                </Grid>
            </Grid>
        </Box>

    )
}

const SecuritySettings = (props) => {
    const { children, value, ...other } = props;

    return (
        <Box
            hidden={value !== 1}
            sx={{ p: 3 }}
            {...other}
        >
            <Typography>
                Security Settings
            </Typography>
        </Box>

    )
}

export default Settings;