前言

Ant Design 定义了基础的设计规范，对应也提供了大量的基础组件。但是对于中后台类应用，提供更高程度的抽象，提供更上层的设计规范，并且对应提供相应的组件使得开发者可以快速搭建出高质量的页面。

在 ProComponents 中内置了一系列的设计规范，预设了常用的逻辑。在这个基础上提供了灵活的支持，比如对于 ProTable 来说你也可以把它完全当做 Ant Design 的 Table 来用，对于 ProForm 来说你也可以直接使用 Ant Design 的基础组件或者你的自定义组件。我们希望通过 Pro 系列组件提供快速高效搭建高质量中后台应用的能力，进一步扩展 Ant Design 的能力，欢迎使用并提出宝贵的意见。

安装依赖

yarn add @ant-design/pro-components

使用ProLayout创建后台管理页面

ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。与 PageContainer 配合使用可以自动生成面包屑，页面标题，并且提供低成本方案接入页脚工具栏。

创建BasicLayout

import React, { useState, FC, useEffect } from 'react';
import {
  type ProLayoutProps,
  type MenuDataItem,
  ProLayout,
  PageContainer,
} from '@ant-design/pro-components';
import { Outlet } from 'react-router-dom';

import { getSiderMenuList } from '@/services/global';

const BasicLayout: FC<ProLayoutProps> = (props) => {
  const [menuData, setMenuData] = useState<Array<MenuDataItem>>([]);

  useEffect(() => {
    getSiderMenuList().then((res) => {
      setMenuData(res);
    });
  }, []);

  return (
    <ProLayout
      {...props}
      collapsed={false}
      collapsedButtonRender={false}
      logo={false}
      title="知雀"
      fixedHeader
      navTheme="light"
      layout="mix"
      menuDataRender={() => menuData}
    >
      <PageContainer
        style={{ minHeight: 'calc(100vh - .92rem)' }}
        pageHeaderRender={false}
      >
        <Outlet />
      </PageContainer>
    </ProLayout>
  );
};

export default BasicLayout;

上述代码中，我们使用 Ant Design Pro Components 库创建了应用程序的基本布局。这个组件是一个包含侧边菜单和固定头部的基本布局。它通过 @/services/global 模块的 getSiderMenuList 函数获取菜单数据，并根据数据动态渲染菜单项。

状态和效果

• 该组件使用 useState 钩子来管理 menuData 状态，该状态保存一个菜单项的数组。
• 使用 useEffect 钩子在组件挂载时调用 getSiderMenuList 函数来获取菜单数据。一旦数据获取成功，它会使用 setMenuData 设置状态。

菜单项渲染

• menuItemRender 函数用于自定义如何渲染每个菜单项。
• 它检查菜单项是否是一个 URL（isUrl），如果是，则渲染一个带有外部链接的锚点（<a>）元素。否则，它使用 Link 组件进行内部导航。

渲染 ProLayout

• 使用 Ant Design Pro 中的 ProLayout 组件来定义应用程序的整体布局。
• 通过传递一些属性，如 title、fixedHeader、layout、menuDataRender、menuItemRender、pageTitleRender 和 loading 来根据需求自定义布局。

页面容器

• 使用 PageContainer 组件来包装页面内容。它确保内容至少达到视口的高度（minHeight: '100vh'）。

子组件

• 使用 useOutlet 钩子来渲染嵌套的路由或组件，这些组件位于 PageContainer 内部。

加载状态的状态

• 使用 useState 钩子来管理加载状态。loading 最初被设置为 true，表示组件最初处于加载状态。

const [loading, setLoading] = useState(true);

位置和导航

• 使用 useLocation 钩子获取当前 URL 中的路径名。
• 使用 useNavigate 钩子获取 navigate 函数，可以使用它在代码中程序化地导航到不同的路由。

const { pathname } = useLocation();
const navigate = useNavigate();

权限检查的 Effect

• 使用 useEffect 钩子在组件挂载时或 pathname 改变时执行权限检查。
• 使用当前的 pathname 调用 checkPermission 函数。它返回一个解析为布尔值（pass）的 promise。
• 如果权限未被授予（!pass），则导航到 ‘403’ 路由，并使用 { replace: true } 选项替换当前路由。
• 如果发生错误，导航到 ‘503’ 路由，并同样使用 { replace: true } 选项替换当前路由。
• 无论如何最终，通过 setLoading(false) 将加载状态设置为 false。

useEffect(() => {
    checkPermission({
      pathname,
    })
      .then((pass) => {
        if (!pass) {
          navigate('403', { replace: true });
        }
      })
      .catch(() => {
        navigate('503', { replace: true });
      })
      .finally(() => {
        setLoading(false);
      });
  }, [pathname, navigate]);

此部分代码确保在进行权限检查时显示加载状态，然后根据权限结果进行导航，最终在检查完成后将加载状态设置为 false。

添加错误边界

import React, { Component, ReactNode } from 'react';
import { Result } from 'antd';

interface ErrorBoundaryProps {
  children: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  errorInfo?: React.ErrorInfo;
}

export default class ErrorBoundary extends Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  componentDidMount() {
    window.addEventListener('unhandledrejection', (event) => {
      console.error('Unhandled Promise Rejection:', event.reason);
      this.setState({
        hasError: false,
      });
    });
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    this.setState({
      hasError: true,
      errorInfo,
    });
    console.error('出错啦：', error, errorInfo);
  }

  render() {
    const { children } = this.props;
    const { hasError, errorInfo } = this.state;
    if (hasError) {
      return (
        <Result
          status="500"
          title="浏览器运行错误，请联系管理员"
          subTitle={JSON.stringify(errorInfo)}
        />
      );
    }
    return children;
  }
}

实现登录功能

import React from 'react';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { Icon } from '@/components';
import { Button, theme } from 'antd';

import { accountLogin } from '@/services/oauth/login';
import { setAccessToken } from '@/utils/token';
import { useNavigate } from 'react-router-dom';
import styles from './index.less';

const Login: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const navigate = useNavigate();

  return (
    <div className={styles.loginForm} style={{ background: colorBgContainer }}>
      <div>
        <LoginForm
          title="知雀"
          subTitle="后台管理系统"
        >
          <ProFormText
            name="username"
            fieldProps={{
              placeholder: '请输入用户名',
              prefix: <Icon type="user" className="prefixIcon" />,
            }}
            rules={[{ required: true, message: '请输入用户名' }]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              placeholder: '请输入密码',
              prefix: <Icon type="lock" className="prefixIcon" />,
            }}
            rules={[{ required: true, message: '请输入密码' }]}
          />
          <div className={styles.loginAction}>
            <Button type="link" className={styles.resetPassword}>
              忘记密码？
            </Button>
          </div>
        </LoginForm>
      </div>
    </div>
  );
};

export default Login;

这段代码定义了一个名为 Login 的 React 函数组件。它看起来是一个使用 Ant Design Pro 组件创建的登录页面，包括一个登录表单。

导入模块

• 该组件从不同的模块导入了各种组件和工具。特别地，它使用了来自 @ant-design/pro-components 的 LoginForm 和 ProFormText 组件用于登录表单。

import React from 'react';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { Icon } from '@/components';
import { Button, theme } from 'antd';
import { accountLogin } from '@/services/oauth/login';
import { setAccessToken } from '@/utils/token';
import { useNavigate } from 'react-router-dom';
import styles from './index.less';

主题配置

• 使用 theme.useToken() 钩子访问主题令牌，特别是 colorBgContainer 属性，它设置了登录表单的背景颜色。

const {
  token: { colorBgContainer },
} = theme.useToken();

路由

• 使用 react-router-dom 中的 useNavigate 钩子获取导航函数。它将在登录成功后用于导航到不同的路由。

const navigate = useNavigate();

登录表单

• 该组件渲染了一个来自 Ant Design Pro 组件的 LoginForm，并设置了标题和副标题。

<LoginForm
  title="知雀"
  subTitle="后台管理系统"
>

表单字段

• 使用两个 ProFormText 组件分别用于用户名和密码字段。它们包括占位符、前缀图标和验证规则。

<ProFormText
  name="username"
  // 其他属性
/>
<ProFormText.Password
  name="password"
  // 其他属性
/>

样式

• 该组件使用了一个 CSS 模块（styles）进行样式设置，登录表单的背景颜色基于主题令牌进行设置。

<div className={styles.loginForm} style={{ background: colorBgContainer }}>

忘记密码链接

• 表单底部包含一个用于重置或找回密码的链接。

<Button type="link" className={styles.resetPassword}>
  忘记密码？
</Button>

该组件提供了一个清晰和样式化的登录表单，并具有在登录成功后导航到不同路由的必要功能。

实现登录

async (formData) => {
     return accountLogin(formData)
       .then(({ accessToken }) => {
         setAccessToken(accessToken);
         navigate('/console', { replace: true });
         return Promise.resolve(true);
       })
       .catch(() => {
         return Promise.resolve(false);
       });
   }}

1. 通过 accountLogin(formData) 异步调用登录服务，该服务返回一个 Promise。
2. 如果登录成功（.then(({ accessToken }) => { ... })），将获取的访问令牌设置为应用程序的访问令牌，然后使用 navigate('/console', { replace: true }) 进行页面导航到’/console’路由，并使用 { replace: true } 选项替换当前路由。
3. 如果登录失败（.catch(() => { ... })），则返回一个解析为 false 的 Promise。

整体而言，这个异步函数用于处理登录逻辑。如果登录成功，它设置访问令牌并将用户重定向到’/console’路由。如果登录失败，它返回一个解析为 false 的 Promise。这个函数的结构适用于一些异步操作，例如处理用户认证。

结语

本文主要介绍了如何创建一个后台管理模板，主要目标是在用户提供的登录凭据进行验证后，有效地管理用户会话并将其导航到应用程序的主要部分。通过异步处理和适当的用户反馈，代码提供了良好的用户体验和可维护性。