使用umi+react+antd

### 如何结合 UMI、React 和 Antd 进行项目开发 #### 1. 使用 `yarn` 或 `npm` 初始化项目 通过官方推荐的方式初始化一个基于 React 和 Ant Design Pro 的 UMI 项目。以下是具体操作： ```bash $ yarn create umi my-app Select the boilerplate type: 选择 Ant Design Pro ❯ ant-design-pro Which language do you want to use? 选择你使用的语言 ❯ TypeScript / JavaScript $ cd my-app $ yarn $ yarn start ``` 运行上述命令后，可以通过浏览器访问 [http://localhost:8000](http://localhost:8000) 来查看项目的初始界面[^4]。 --- #### 2. 路由配置与页面管理 UMI 提供了一种简单的方式来定义路由结构。默认情况下，Ant Design Pro 已经集成了动态路由功能。开发者只需按照约定目录结构调整文件即可完成大部分路由设置。 例如，在 `src/pages` 文件夹下新增一个名为 `about.js` 的文件： ```javascript import { PageContainer } from '@ant-design/pro-layout'; import { Typography } from 'antd'; const AboutPage = () => { return ( <PageContainer> <Typography.Title>关于</Typography.Title> <Typography.Paragraph>这是一个简单的关于页面。</Typography.Paragraph> </PageContainer> ); }; export default AboutPage; ``` 此时无需额外修改路由配置文件，UMI 将自动识别并加载该页面作为 `/about` 路径下的内容[^3]。 --- #### 3. 表单设计与数据交互 Ant Design 提供了强大的表单组件 Form，能够快速实现复杂的输入逻辑验证以及提交流程控制。下面是一个登录表单的例子： ```jsx import React, { useState } from 'react'; import { Form, Input, Button, message } from 'antd'; const LoginForm = () => { const onFinish = (values) => { console.log('Received values of form:', values); message.success('Login successful!'); }; return ( <Form name="login_form" onFinish={onFinish}> <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]} > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; export default LoginForm; ``` 此代码片段展示了如何利用 Ant Design 的 Form 组件构建用户友好的前端表单。 --- #### 4. 自定义权限按钮封装 为了增强系统的安全性，通常需要对某些 UI 元素实施细粒度的权限校验机制。以下是如何借助自定义组件来实现这一目标的方法之一： ```jsx import React from 'react'; import { Button as AntdButton } from 'antd'; const AuthButton = ({ permissions, requiredPermissions, children, ...restProps }) => { if (!permissions.some((perm) => requiredPermissions.includes(perm))) { return null; // 如果无权，则隐藏整个按钮 } return <AntdButton {...restProps}>{children}</AntdButton>; }; // 示例调用方式 <AuthButton permissions={['admin', 'editor']} requiredPermissions={['admin']} > Delete User </AuthButton> ``` 这段代码实现了仅当用户的权限列表满足特定条件时才渲染对应的操作按钮的功能[^5]。 --- #### 5. 风格化主题定制 Ant Design 支持高度灵活的主题定制能力，允许调整全局变量以适配品牌视觉规范或其他个性化需求。编辑 `.umirc.ts` 或者 `config/config.ts` 中的相关字段即可生效。 示例配置如下所示： ```typescript export default { theme: { primaryColor: '#ff7a00', }, }; ``` 这样便能轻松更改应用中的主导航栏颜色以及其他关联样式属性。 --- ### 注意事项 尽管 react-antd-admin 曾被广泛采用，但由于其已被标记为废弃状态，建议优先考虑迁移到更现代化且持续维护更新的解决方案——即 Ant Design Pro[^2]。 ---