新建德森项目分支

skyouc

2024-12-21 c635d78b479510ebe2556a420948effcd30a0731

 zy-asrs-flow/src/pages/account/setting/index.jsx

@@ -1,102 +1,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;
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;