umijs+Procomponents的高级布局搭建中后台管理系统框架（二）

最新推荐文章于 2024-02-19 10:56:56 发布

lexie_0921

最新推荐文章于 2024-02-19 10:56:56 发布

阅读量678

点赞数 1

文章标签：前端 javascript 开发语言 react.js

本文链接：https://blog.csdn.net/lexie_0921/article/details/132695611

版权

介绍

本文衔接umijs+Procomponents的高级布局搭建中后台管理系统框架（一），继续搭建进阶版高级布局（含头像，搜索栏，外链等）

以下是最终布局效果

安装的依赖

"@ant-design/icons": "5.0.1",
    "@ant-design/pro-components": "2.4.3",
    "@ant-design/pro-layout": "7.4.0",
    "antd": "4.24.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "@emotion/css": "^11.10.5",
    "umi": "^3.5.38"

这里使用的是antd的4版本，因为5版本用的时候有报错（自行取舍）

顶部导航栏（头像、搜索框、外链、下拉框）

1. 头像布局，使用Prolayout的avatarProps配置，可以根据不同的layout放在不同的位置

直接往src/layouts/index的Prolayout标签里放就行了（icon和图片可以自己替换）

avatarProps={{
                src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
                size: 'small',
                title: '七妮妮',
                render: (props, dom) => {
                    return (
                        <Dropdown
                            menu={{
                                items: [
                                    {
                                        key: 'logout',
                                        icon: <LogoutOutlined />,
                                        label: '退出登录',
                                    },
                                ],
                            }}
                        >
                            {dom}
                        </Dropdown>
                    );
                },
            }}

2. 搜索栏

也是直接直接往src/layouts/index的Prolayout标签里放

actionsRender={(props) => {
                if (props.isMobile) return [];
                if (typeof window === 'undefined') return [];
                return [
                    props.layout !== 'side' && document.body.clientWidth > 1400 ? (
                        <SearchInput />
                    ) : undefined,
                    <InfoCircleFilled key="InfoCircleFilled" />,
                    <QuestionCircleFilled key="QuestionCircleFilled" />,
                    <GithubFilled key="GithubFilled" />,
                ];
            }}

这里出现一个Searchinput，是一个方法（JSX），需要自己在上面（return之前）写入：

const SearchInput = () => {
        const { token } = theme.useToken();
        return (
            <div
                key="SearchOutlined"
                aria-hidden
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginInlineEnd: 24,
                }}
                onMouseDown={(e) => {
                    e.stopPropagation();
                    e.preventDefault();
                }}
            >
                <Input
                    style={{
                        borderRadius: 4,
                        marginInlineEnd: 12,
                        backgroundColor: token.colorBgTextHover,
                    }}
                    prefix={
                        <SearchOutlined
                            style={{
                                color: token.colorTextLightSolid,
                            }}
                        />
                    }
                    placeholder="搜索方案"
                    bordered={false}
                />
                <PlusCircleFilled
                    style={{
                        color: token.colorPrimary,
                        fontSize: 24,
                    }}
                />
            </div>
        );
    };

3. 下拉框

这是一个方法（JSX），在return之前定义好

const MenuCard = () => {
        const { token } = theme.useToken();
        return (
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                <Divider
                    style={{
                        height: '1.5em',
                    }}
                    type="vertical"
                />
                <Popover
                    placement="bottom"
                    overlayStyle={{
                        width: 'calc(100vw - 24px)',
                        padding: '24px',
                        paddingTop: 8,
                        height: '307px',
                        borderRadius: '0 0 6px 6px',
                    }}
                    content={
                        <div style={{ display: 'flex', padding: '32px 40px' }}>
                            自定义内容
                        </div>
                    }
                >
                    <div
                        style={{
                            color: token.colorTextHeading,
                            fontWeight: 500,
                            cursor: 'pointer',
                            display: 'flex',
                            gap: 4,
                            paddingInlineStart: 8,
                            paddingInlineEnd: 12,
                            alignItems: 'center',
                        }}
                        className={css`
              &:hover {
                background-color: ${token.colorBgTextHover};
              }
            `}
                    >
                        <span> 企业级资产中心</span>
                        <CaretDownFilled />
                    </div>
                </Popover>
            </div>
        );
    };

然后直接往Prolayout标签里丢

 headerTitleRender={(logo, title, _) => {
                const defaultDom = (
                    <a>
                        {logo}
                        {title}
                    </a>
                );
                if (typeof window === 'undefined') return defaultDom;
                if (document.body.clientWidth < 1400) {
                    return defaultDom;
                }
                if (_.isMobile) return defaultDom;
                return (
                    <>
                        {defaultDom}
                        <MenuCard />
                    </>
                );
            }}

4. 外链（左上角那个九宫格图标）

外链的链接可以自己定义，这里为了做演示，使用的是官网的例子

首先在src/layouts下新建一个文件，这里写为defaultProps.tsx（官网名）：

import {
    ChromeFilled,
    CrownFilled,
    SmileFilled,
    TabletFilled,
} from '@ant-design/icons';

export default {
    route: {
        path: '/',
        routes: [
            {
                path: '/welcome',
                name: '欢迎',
                icon: <SmileFilled />,
                component: './Welcome',
            },
            {
                path: '/admin',
                name: '管理页',
                icon: <CrownFilled />,
                access: 'canAdmin',
                component: './Admin',
                routes: [
                    {
                        path: '/admin/sub-page1',
                        name: '一级页面',
                        icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
                        component: './Welcome',
                    },
                    {
                        path: '/admin/sub-page2',
                        name: '二级页面',
                        icon: <CrownFilled />,
                        component: './Welcome',
                    },
                    {
                        path: '/admin/sub-page3',
                        name: '三级页面',
                        icon: <CrownFilled />,
                        component: './Welcome',
                    },
                ],
            },
            {
                name: '列表页',
                icon: <TabletFilled />,
                path: '/list',
                component: './ListTableList',
                routes: [
                    {
                        path: '/list/sub-page',
                        name: '列表页面',
                        icon: <CrownFilled />,
                        routes: [
                            {
                                path: 'sub-sub-page1',
                                name: '一一级列表页面',
                                icon: <CrownFilled />,
                                component: './Welcome',
                            },
                            {
                                path: 'sub-sub-page2',
                                name: '一二级列表页面',
                                icon: <CrownFilled />,
                                component: './Welcome',
                            },
                            {
                                path: 'sub-sub-page3',
                                name: '一三级列表页面',
                                icon: <CrownFilled />,
                                component: './Welcome',
                            },
                        ],
                    },
                    {
                        path: '/list/sub-page2',
                        name: '二级列表页面',
                        icon: <CrownFilled />,
                        component: './Welcome',
                    },
                    {
                        path: '/list/sub-page3',
                        name: '三级列表页面',
                        icon: <CrownFilled />,
                        component: './Welcome',
                    },
                ],
            },
            {
                path: 'https://ant.design',
                name: 'Ant Design 官网外链',
                icon: <ChromeFilled />,
            },
        ],
    },
    location: {
        pathname: '/',
    },
    appList: [
        {
            icon: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
            title: 'Ant Design',
            desc: '杭州市较知名的 UI 设计语言',
            url: 'https://ant.design',
        },
        {
            icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
            title: 'AntV',
            desc: '蚂蚁集团全新一代数据可视化解决方案',
            url: 'https://antv.vision/',
            target: '_blank',
        },
        {
            icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
            title: 'Pro Components',
            desc: '专业级 UI 组件库',
            url: 'https://procomponents.ant.design/',
        },
        {
            icon: 'https://img.alicdn.com/tfs/TB1zomHwxv1gK0jSZFFXXb0sXXa-200-200.png',
            title: 'umi',
            desc: '插件化的企业级前端应用框架。',
            url: 'https://umijs.org/zh-CN/docs',
        },

        {
            icon: 'https://gw.alipayobjects.com/zos/bmw-prod/8a74c1d3-16f3-4719-be63-15e467a68a24/km0cv8vn_w500_h500.png',
            title: 'qiankun',
            desc: '可能是你见过最完善的微前端解决方案🧐',
            url: 'https://qiankun.umijs.org/',
        },
        {
            icon: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
            title: '语雀',
            desc: '知识创作与分享工具',
            url: 'https://www.yuque.com/',
        },
        {
            icon: 'https://gw.alipayobjects.com/zos/rmsportal/LFooOLwmxGLsltmUjTAP.svg',
            title: 'Kitchen ',
            desc: 'Sketch 工具集',
            url: 'https://kitchen.alipay.com/',
        },
        {
            icon: 'https://gw.alipayobjects.com/zos/bmw-prod/d3e3eb39-1cd7-4aa5-827c-877deced6b7e/lalxt4g3_w256_h256.png',
            title: 'dumi',
            desc: '为组件开发场景而生的文档工具',
            url: 'https://d.umijs.org/zh-CN',
        },
    ],
};

然后在src/layouts/index页面引入

import defaultProps from './defaultProps';

使用也和上面一样，直接在Prolayout标签里面写上就行

{...defaultProps}

完成了这些之后，打开浏览器就会出现进阶版的布局啦~

补充

底部有时候会需要用到类似copyright的说明，这里也补充一下

menuFooterRender={(props) => {
                if (props?.collapsed) return undefined;
                return (
                    <div
                        style={{
                            textAlign: 'center',
                            paddingBlockStart: 12,
                        }}
                    >
                        <div>© 这里是copyright~~~</div>
                        <div>2023 lexie12138出品</div>
                    </div>
                );
            }}

这个方法就不需要定义了，直接在标签里写入就行

当然，写完后会是个超级长的页面，可以自己拆分组件的，有问题欢迎留言~如果有帮到你，请留下你的赞哦~~~

lexie_0921

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
umijs+Procomponents的高级布局搭建中后台管理系统框架（二）

本文衔接umijs+Procomponents的高级布局搭建中后台管理系统框架（一），继续搭建进阶版高级布局（含头像，搜索栏，外链等）以下是最终布局效果。
复制链接

扫一扫