#

vincentlu

2025-02-10 80a82efcb42ba4b6f24768e780b1b3f51e3141f4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React, { useState, useRef, useEffect, useMemo } from "react";
import { useNavigate } from 'react-router-dom';
import {
    useTranslate,
    useAuthProvider,
} from 'react-admin';
import { useWatch, useFormContext } from "react-hook-form";
import { Stack, Grid, Box, Typography, Card, CardContent, Tabs, Tab, useTheme } from '@mui/material';
import * as Common from '@/utils/common';
import BaseSettings from "./BaseSettings";
import SecuritySettings from "./SecuritySettings"
import { queryUserInfo } from '@/api/auth';
 
const Index = () => {
    const authProvider = useAuthProvider();
    const navigate = useNavigate();
    const translate = useTranslate();
    const theme = useTheme();
 
    const [value, setValue] = useState(0);
    const [userInfo, setUserInfo] = useState(null);
 
    useEffect(() => {
        authProvider.checkAuth().catch(() => {
            navigate('/login');
        });
    }, [authProvider, navigate]);
 
    useEffect(() => {
        queryUserInfo().then(res => {
            setUserInfo(res);
        })
    }, []);
 
    return (
        <>
            <Card sx={{ backgroundColor: 'initial' }}>
                <CardContent >
                    <Box
                        mt={2}
                        sx={{
                            flexGrow: 1,
                            bgcolor: 'background.paper',
                            display: 'flex',
                            border: `1px solid #${theme.palette.mode === 'light' ? 'ddd' : '333'}`,
                            borderRadius: 2,
                            pt: 1,
                            pb: 1,
                        }}
                    >
                        <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>
 
                        {value === 0 && (
                            <BaseSettings
                                value={value}
                                userInfo={userInfo}
                            />
                        )}
                        {value === 1 && (
                            <SecuritySettings
                                value={value}
                                userInfo={userInfo}
                            />
                        )}
 
                    </Box>
                </CardContent>
            </Card>
        </>
    )
}
 
export default Index;