#

Junjie

2024-07-09 0b86f0390c17ca06758cc436596774e56687a875

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
98
99
100
101
102
import { GridContent } from '@ant-design/pro-components';
import { Menu } from 'antd';
import React, { useLayoutEffect, useRef, useState } from 'react';
import { FormattedMessage, useIntl } from '@umijs/max';
import BaseView from './components/base';
import SecurityView from './components/security';
import useStyles from './style.style';
 
const Settings = () => {
    const intl = useIntl();
    const { styles } = useStyles();
    const [initConfig, setInitConfig] = useState({
        mode: 'inline',
        selectKey: 'base',
    });
 
    const menuMap = {
        base: intl.formatMessage({ id: 'personal.base.setting', defaultMessage: '基本设置' }),
        security: intl.formatMessage({ id: 'personal.security.setting', defaultMessage: '安全设置' }),
    };
    
    const getMenu = () => {
        return Object.keys(menuMap).map((item) => ({ key: item, label: menuMap[item] }));
    };
 
    const dom = useRef();
 
    const resize = () => {
        requestAnimationFrame(() => {
            if (!dom.current) {
                return;
            }
            let mode = 'inline';
            const { offsetWidth } = dom.current;
            if (dom.current.offsetWidth < 641 && offsetWidth > 400) {
                mode = 'horizontal';
            }
            if (window.innerWidth < 768 && offsetWidth > 400) {
                mode = 'horizontal';
            }
            setInitConfig({
                ...initConfig,
                mode: mode,
            });
        });
    };
 
    useLayoutEffect(() => {
        if (dom.current) {
            window.addEventListener('resize', resize);
            resize();
        }
        return () => {
            window.removeEventListener('resize', resize);
        };
    }, [dom.current]);
 
    const renderChildren = () => {
        const { selectKey } = initConfig;
        switch (selectKey) {
            case 'base':
                return <BaseView />;
            case 'security':
                return <SecurityView />;
            default:
                return null;
        }
    };
 
    return (
        <GridContent>
            <div
                className={styles.main}
                ref={(ref) => {
                    if (ref) {
                        dom.current = ref;
                    }
                }}
            >
                <div className={styles.leftMenu}>
                    <Menu
                        mode={initConfig.mode}
                        selectedKeys={[initConfig.selectKey]}
                        onClick={({ key }) => {
                            setInitConfig({
                                ...initConfig,
                                selectKey: key,
                            });
                        }}
                        items={getMenu()}
                    />
                </div>
                <div className={styles.right}>
                    <div className={styles.title}>{menuMap[initConfig.selectKey]}</div>
                    {renderChildren()}
                </div>
            </div>
        </GridContent>
    );
};
 
export default Settings;