Ant Design Pro

https://pro.ant.design/zh-CN/docs
Admin
Ant Design Pro is an out-of-the-box UI solution for enterprise applications, providing a complete...
Tokens:46,831
Snippets:183
Trust Score:9.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Ant Design Pro: Project Setup and Overview

Source: https://pro.ant.design/zh-CN/docs/introduction

This section provides an overview of Ant Design Pro, its documentation structure, and initial setup steps. It highlights key areas like getting started, basic usage, page development, data management, styling, backend integration, build/deployment, quality, and advanced usage.

--------------------------------

### Express Configuration for Ant Design Pro

Source: https://pro.ant.design/zh-CN/docs/deploy

This example demonstrates how to configure an Express server to serve a built Ant Design Pro application. It uses `express.static` to serve the build directory and sets up a catch-all route to serve `index.html` for client-side routing.

```JavaScript
app.use(express.static(path.join(__dirname, 'build')));


app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
```

--------------------------------

### Install umi-serve Globally

Source: https://pro.ant.design/zh-CN/docs/faq

Provides the command to install `umi-serve` globally using Yarn. `umi-serve` is a tool used to serve mock data after building a project.

```bash
$ yarn global add umi-serve

```

--------------------------------

### Install OpenAPI Plugin

Source: https://pro.ant.design/zh-CN/docs/openapi

Installs the OpenAPI plugin for Ant Design Pro using Yarn or NPM.

```bash
yarn add @umijs/plugin-openapi
```

```bash
npm i @umijs/plugin-openapi --save
```

--------------------------------

### Install React Testing Library and Jest DOM

Source: https://pro.ant.design/zh-CN/docs/test

Instructions to install the necessary libraries for testing React components with `react-testing-library` and `jest-dom` for enhanced assertions.

```bash
npm install --save @testing-library/react @testing-library/jest-dom
```

--------------------------------

### Install Ant Design Charts

Source: https://pro.ant.design/zh-CN/docs/graph

Installs the Ant Design Charts library using npm or yarn. This library provides React-wrapped G2Plot charts.

```bash
npm install @ant-design/charts --save
// yarn
yarn add @ant-design/charts
```

--------------------------------

### Serve Project with umi-serve

Source: https://pro.ant.design/zh-CN/docs/faq

Shows how to start the `umi-serve` command in the project's root directory to serve the Umi project. It displays the local and network addresses where the project can be accessed.

```bash
$ umi-serve


   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving your umi project!                        │
   │                                                    │
   │   - Local:            http://localhost:8001        │
   │   - On Your Network:  http://134.160.170.40:8001   │
   │                                                    │
   │   Copied local address to clipboard!
   │                                                    │
   └────────────────────────────────────────────────────┘

```

--------------------------------

### Import Locale Functions from Umi

Source: https://pro.ant.design/zh-CN/docs/i18n

Demonstrates how to import essential functions for internationalization from the 'umi' package, including functions to set locale, get the current locale, and format messages.

```javascript
import { setLocale, getLocale, FormattedMessage } from 'umi';
```

--------------------------------

### Node.js Proxy Setup with Express

Source: https://pro.ant.design/zh-CN/docs/proxy

Demonstrates how to set up a proxy server using Express and http-proxy-middleware to forward API requests to a target server. This is useful for handling cross-origin requests during development.

```javascript
var express = require('express');
var proxy = require('http-proxy-middleware');


var app = express();


app.use('/api', proxy({ target: 'http://www.example.org', changeOrigin: true }));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar
```

--------------------------------

### Initialize Ant Design Pro Project

Source: https://pro.ant.design/zh-CN/docs/getting-started

This snippet shows how to initialize a new Ant Design Pro project using the pro-cli. It includes installing the CLI globally and creating a new project named 'myapp'. It also presents choices for the umi version (v4 or v3) and project template (simple or complete).

```bash
# Use npm
npm i @ant-design/pro-cli -g
pro create myapp

? 🐂 Use umi@4 or umi@3 ? (Use arrow keys)
❯ umi@4
  umi@3

? 🚀 Use full or simple scaffold? (Use arrow keys)
❯ simple
  complete

# Install dependencies:
$ cd myapp && tyarn
// or
$ cd myapp && npm install
```

--------------------------------

### Ant Design Pro Development Commands

Source: https://pro.ant.design/zh-CN/docs/getting-started

This section outlines the essential commands for developing with Ant Design Pro. It covers starting the development server, building the project for deployment, analyzing bundle size, linting code for quality, automatically fixing lint errors, and removing i18n code.

```bash
start
build
analyze
lint
lint:fix
i18n-remove
```

--------------------------------

### Mock Data Example

Source: https://pro.ant.design/zh-CN/docs/faq

An example of mock data in JSON format, likely used for API requests during development. This data includes user information with keys, names, ages, and addresses.

```json
[
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

```

--------------------------------

### Egg.js Configuration for Ant Design Pro

Source: https://pro.ant.design/zh-CN/docs/deploy

This snippet shows how to configure an Egg.js application to serve an Ant Design Pro project. It includes controller logic for rendering the application and router configuration to handle all routes by directing them to the home controller.

```javascript
// controller
exports.index = function* () {
  yield this.render('App.jsx', {
    context: {
      user: this.session.user,
    },
  });
};


// router
app.get('home', '/*', 'home.index');
```

--------------------------------

### Unit Test Example with Jest

Source: https://pro.ant.design/zh-CN/docs/test

Demonstrates a basic unit test using Jest to verify the functionality of a sum function. It shows how to use `expect()` for assertions and `toEqual()` to compare values.

```javascript
import sum from './sum';

it('sums numbers', () => {
  expect(sum(1, 2)).toEqual(3);
  expect(sum(2, 2)).toEqual(4);
});
```

--------------------------------

### Ant Design Table Pagination Configuration

Source: https://pro.ant.design/zh-CN/docs/type-script

Provides an example of configuring pagination for an Ant Design table, including setting `pageSize`, `total`, and an `onChange` handler. It imports `TablePaginationConfig`.

```typescript
import { TablePaginationConfig } from 'antd/es/table/Table';


const pagination: TablePaginationConfig = {
  pageSize: 20,
  total: 2000,
  onChange: (current) => {}, 
};
```

--------------------------------

### Install Sass Loader and Node Sass

Source: https://pro.ant.design/zh-CN/docs/faq

This command installs the necessary dependencies (`node-sass` and `sass-loader`) to enable Sass support in an Ant Design Pro project. These packages are required for processing Sass files into CSS.

```bash
npm i node-sass sass-loader --save
```

--------------------------------

### Generated Mock Data

Source: https://pro.ant.design/zh-CN/docs/openapi

Example of mock data generated by the OpenAPI plugin for the `/api/rule` endpoint.

```javascript
import { Request, Response } from 'express';


export default {
  'GET /api/rule': (req: Request, res: Response) => {
    res.status(200).send({
      data: [
        {
          key: 86,
          disabled: false,
          href: 'https://ant.design',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
          name: '罗秀兰',
          owner: 'Garcia',
          desc: '斯达种整消建难风可却再日等果明此。',
          callNo: 96,
          status: 89,
          updatedAt: 'PpVmJ50',
          createdAt: 'FbRG',
          progress: 100,
        },
      ],
      total: 98,
      success: false,
    });
  },
};
```

--------------------------------

### Spring Boot Integration for Ant Design Pro

Source: https://pro.ant.design/zh-CN/docs/deploy

This section outlines how to integrate Ant Design Pro with a Spring Boot application. It involves building the project, copying the build output to the Spring Boot static resources directory, and optionally configuring a controller to handle routing for `browserHistory`.

```bash
$ npm run build
```

```java
@RequestMapping("/api/**")
public ApiResult api(HttpServletRequest request, HttpServletResponse response){
    return apiProxy.proxy(request, response);
}


@RequestMapping(value="/**", method=HTTPMethod.GET)
public String index(){
    return "index"
}
```

--------------------------------

### Nginx Configuration for Ant Design Pro

Source: https://pro.ant.design/zh-CN/docs/deploy

This Nginx configuration is designed to serve Ant Design Pro applications. It includes settings for gzip compression, serving static files, and handling client-side routing with `browserHistory` by redirecting unmatched requests to `index.html`. It also includes a proxy configuration for API requests.

```Nginx
server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";


    root /usr/share/nginx/html;


    location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/index.html /index.html;

        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;


    }
    location /api {
        proxy_pass https://ant-design-pro.netlify.com;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

server {
  # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
  listen 443 ssl http2 default_server;

  # 证书的公私钥
  ssl_certificate /path/to/public.crt;
  ssl_certificate_key /path/to/private.key;

  location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/index.html /index.html;

  }
  location /api {
      proxy_pass https://ant-design-pro.netlify.com;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $http_host;
      proxy_set_header   X-Real-IP         $remote_addr;
  }
}
```

--------------------------------

### Get Initial State in Ant Design Pro V5

Source: https://pro.ant.design/zh-CN/docs/upgrade-v5

This TypeScript code snippet demonstrates how to fetch user data and settings to initialize the application state in Ant Design Pro V5. It handles routing to the login page if the user is not authenticated.

```TypeScript
import { history } from 'umi';
import { Settings as ProSettings } from '@ant-design/pro-layout';
import { queryCurrent } from '@/services/user';
import defaultSettings from '../config/defaultSettings';


export async function getInitialState(): Promise<{
  currentUser?: API.CurrentUser;
  settings?: ProSettings;
}> {
  // 如果是登录页面，不执行
  if (history.location.pathname !== '/user/login') {
    try {
      const currentUser = await queryCurrent();
      return {
        currentUser,
        settings: defaultSettings,
      };
    } catch (error) {
      history.push('/user/login');
    }
  }
  return {
    settings: defaultSettings,
  };
}
```

--------------------------------

### Configure Runtime Loading State

Source: https://pro.ant.design/zh-CN/docs/title-landing

This example shows how to configure a custom loading component for `getInitialState` in `src/app.tsx`. This is useful when initial data fetching, like user information, is slow, ensuring a loading indicator is displayed.

```javascript
/** 获取用户信息比较慢的时候会展示一个 loading */
export const initialStateConfig = {
  loading: <PageLoading />,
};
```

--------------------------------

### Configure Multiple Environment Build Scripts

Source: https://pro.ant.design/zh-CN/docs/environment-manage

Provides examples of `package.json` scripts for building the application across different environments (dev, test, pre, prod) by setting the `REACT_APP_ENV` and `UMI_ENV` variables.

```JSON
{
{/** 省略... */}
"scripts": {
  "analyze": "cross-env ANALYZE=1 umi build",
  "build": "umi build",
  "build:dev": "cross-env REACT_APP_ENV=dev UMI_ENV=dev umi build",
  "build:test": "cross-env REACT_APP_ENV=test UMI_ENV=test umi build",
  "build:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=pre umi build",
  "build:prod": "cross-env REACT_APP_ENV=prod UMI_ENV=prod umi build",
  "deploy": "npm run site && npm run gh-pages",
  "dev": "npm run start:dev",
  {/** 省略... */}
  "start": "cross-env REACT_APP_ENV=dev UMI_ENV=dev umi dev",
  "start:dev": "cross-env REACT_APP_ENV=dev UMI_ENV=dev MOCK=none umi dev",
  "start:no-mock": "cross-env REACT_APP_ENV=dev UMI_ENV=dev MOCK=none umi dev",
  "start:no-ui": "cross-env REACT_APP_ENV=dev UMI_ENV=dev UMI_UI=none umi dev",
  "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=pre MOCK=none umi dev",
  "start:test": "cross-env REACT_APP_ENV=test UMI_ENV=test MOCK=none umi dev",
  {/** 省略... */}
},
	{/** 省略... */}
}
```

--------------------------------

### React Component Test with React Testing Library

Source: https://pro.ant.design/zh-CN/docs/test

Example of testing React component behavior using `react-testing-library`. It demonstrates rendering a component and asserting the presence of specific text, as well as using snapshot testing for UI changes.

```javascript
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

it('renders welcome message', () => {
  render(<App />);
  expect(screen.getByText('Learn React')).toBeInTheDocument();
});

it('renders', () => {
  const { asFragment } = render(<App text="Hello!" />);
  expect(asFragment()).toMatchSnapshot();
});
```

--------------------------------

### Configure Hash History in Umi

Source: https://pro.ant.design/zh-CN/docs/deploy

This snippet shows how to configure Umi's history type to 'hash' in `config/config.ts`. Hash history is recommended for simpler deployments as it avoids server-side URL handling issues.

```JavaScript
export default {
  history: { type: 'hash' }, // 默认是 browser
};
```

--------------------------------

### Use useRequest Hook for Network Requests

Source: https://pro.ant.design/zh-CN/docs/upgrade-v5

This example demonstrates the usage of the `useRequest` hook in Umi V5 for making network requests. It simplifies data fetching by providing built-in loading and error states, along with a `run` function for re-fetching.

```JavaScript
import { useRequest } from 'umi';


export default () => {
  const { data, error, loading } = useRequest(() => {
    return services.getUserList('/api/test');
  });
  if (loading) {
    return <div>loading...</div>;
  }
  if (error) {
    return <div>{error.message}</div>;
  }
  return <div>{data.name}</div>;
};
```

--------------------------------

### Define Locale Messages

Source: https://pro.ant.design/zh-CN/docs/i18n

This example shows how to define locale-specific messages in separate JavaScript files for Chinese (zh-CN) and English (en-US). The 'navbar.lang' key is used to display the language name.

```javascript
// zh-CN.ts

export default {
  'navbar.lang': '中文',
};

// en-US.ts

export default {
  'navbar.lang': 'English',
};
```

--------------------------------

### Switch Locale with setLocale and getLocale

Source: https://pro.ant.design/zh-CN/docs/i18n

This React component example demonstrates how to dynamically switch the application's locale between 'zh-CN' and 'en-US' using the exposed `setLocale` and `getLocale` APIs from 'umi'. It includes a button to trigger the language change.

```javascript
import { setLocale, getLocale, FormattedMessage } from 'umi';

class SelectLang extends React.Component {
  changLang = () => {
    const locale = getLocale();
    if (!locale || locale === 'zh-CN') {
      setLocale('en-US');
    } else {
      setLocale('zh-CN');
    }
  };
  render() {
    <Button
      size="small"
      ghost={theme === 'dark'}
      style={{
        margin: '0 8px',
      }}
      onClick={() => {
        this.changLang();
      }}>
      <FormattedMessage id="navbar.lang" />
    </Button>;
  }
}
```

--------------------------------

### Generated API Request Function

Source: https://pro.ant.design/zh-CN/docs/openapi

Example of a generated API request function for fetching a rule list, including TypeScript typings.

```typescript
// requestLibPath 的配置
import { request } from 'umi';


/** 获取规则列表 GET /api/rule */
export async function rule(params: API.PageParams, options?: { [key: string]: any }) {
  return request<API.RuleList>('/api/rule', {
    method: 'GET',
    params: {
      ...params,
    },
    ...(options || {}),
  });
}
```

--------------------------------

### Ant Design Form Instance and Props

Source: https://pro.ant.design/zh-CN/docs/type-script

Demonstrates importing `FormInstance` and `FormItemProps` from 'antd/es/form' for managing form state and properties. It shows how to create a form instance using `Form.useForm()` and store it in a ref.

```typescript
import { FormInstance, FormItemProps } from 'antd/es/form';


const [form] = Form.useForm();


//  保存 ref
const ref = useRef<FormInstance>();
ref.current = form;
```

--------------------------------

### Define Application Layouts and Routes (JavaScript)

Source: https://pro.ant.design/zh-CN/docs/new-page

Illustrates how to define the application's routing structure, including nested routes for layouts and pages. It shows the configuration for user and basic layouts, and a new custom layout.

```javascript
export default [
 // user
 {
  path: '/user',
  component: '../layouts/UserLayout',
  routes:[...]
 },
 // app
 {
  path: '/',
  component: '../layouts/BasicLayout',
  routes:[...]
 },
 // new
 {
  path: '/new',
  component: '../layouts/new_page',
  routes:[...]
 },
]
```

--------------------------------

### Configure OpenAPI with Custom Request Path

Source: https://pro.ant.design/zh-CN/docs/openapi

Demonstrates configuring OpenAPI to use a custom request path, for example, from a local utility.

```typescript
openAPI: {
   requestLibPath: "import request from '@utils/request'",
   // 这里使用 copy 的 url
   schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json",
   mock: false,
 }
```

--------------------------------

### Analyze Build File Size with npm

Source: https://pro.ant.design/zh-CN/docs/build

This command builds the project and analyzes the size distribution of dependent modules, which is useful for code optimization. The command automatically opens a webpage in the browser displaying the size distribution data.

```bash
npm run analyze
```

--------------------------------

### Generated TypeScript API Definitions

Source: https://pro.ant.design/zh-CN/docs/openapi

Example of generated TypeScript type definitions for API responses, including list items and total counts.

```typescript
declare namespace API {
  type RuleListItem = {
    key?: number;
    disabled?: boolean;
    href?: string;
    avatar?: string;
    name?: string;
    owner?: string;
    desc?: string;
    callNo?: number;
    status?: number;
    updatedAt?: string;
    createdAt?: string;
    progress?: number;
  };


  type RuleList = {
    data?: RuleListItem[];
    /** 列表的内容总数 */
    total?: number;
    success?: boolean;
  };
}
```

--------------------------------

### Defining Component Props with React.FC

Source: https://pro.ant.design/zh-CN/docs/type-script

Provides an example of defining a React functional component using `React.FC` (Functional Component) with extended props.

```JavaScript
const WrapComponent: React.FC<ExtendedProps> = (props) => {
  // return ...
};


export default WrapComponent;
```

--------------------------------

### Display Formatted Messages

Source: https://pro.ant.design/zh-CN/docs/i18n

Illustrates how to use the FormattedMessage component from 'umi' to display localized strings defined in the locale files. The 'id' prop links to the message key.

```javascript
import { FormattedMessage } from 'umi';


export default () => {
  return (
    <div>
      <FormattedMessage id="navbar.lang" />
    </div>
  );
};
```

--------------------------------

### Ant Design Pro: Web Technologies Overview

Source: https://pro.ant.design/zh-CN/docs/introduction

This section outlines essential web technologies used in Ant Design Pro development. It covers Node.js for the development environment, Webpack for bundling, React Router for routing, proxy for cross-domain issues, dva for data flow, fabric for linting, TypeScript for type safety, Ant Design for UI components, Ant Design Charts for data visualization, ProComponents for template components, and useModel for simple data management.

--------------------------------

### Use IconFont in Menu Configuration (JavaScript)

Source: https://pro.ant.design/zh-CN/docs/new-page

Shows how to specify an icon for a menu item using an iconFont name, which must start with 'icon-'. This is configured within the route definition.

```javascript
{
path: '/home',
name: 'home',
icon: 'icon-home', // 需要以 icon- 开头
component: './home',
};
```

--------------------------------

### Simple Line Chart with Ant Design Charts

Source: https://pro.ant.design/zh-CN/docs/graph

Demonstrates how to use the Line component from Ant Design Charts to create a simple line chart. It includes sample data and configuration for the chart's appearance and behavior.

```javascript
import React from 'react';
import { Line } from '@ant-design/charts';


const Page: React.FC = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];
  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };
  return <Line {...config} />;
};
export default Page;
```

--------------------------------

### ESLint: Avoid Nested Ternary Operators

Source: https://pro.ant.design/zh-CN/docs/lint

Illustrates the 'no-nested-ternary' ESLint rule, which prohibits nested ternary expressions. Provides examples of incorrect and correct usage for better readability.

```javascript
// 🔴 错误的用法
var thing = foo ? bar : baz === qux ? quxx : foobar;


foo ? (baz === qux ? quxx() : foobar()) : bar();


// ✅ 正确的用法
var thing = foo ? bar : foobar;


var thing;


if (foo) {
  thing = bar;
} else if (baz === qux) {
  thing = quxx;
} else {
  thing = foobar;
}
```

--------------------------------

### Ant Design Pro Project Folder Structure

Source: https://pro.ant.design/zh-CN/docs/folder

This snippet details the standard directory structure for an Ant Design Pro project, including configurations, mock data, public assets, source code organization (components, pages, services, etc.), tests, and project metadata.

```bash
├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json
```

--------------------------------

### Ant Design Pro Script Configuration for Environment Switching

Source: https://pro.ant.design/zh-CN/docs/proxy

Illustrates how to configure npm scripts in package.json to easily switch between different development environments (dev, pre, test) by setting the SERVE_ENV environment variable using cross-env.

```json
{
"scripts": {
  "start:dev": "cross-env SERVE_ENV=dev umi dev",
  "start:pre": "cross-env SERVE_ENV=pre umi dev",
  "start:test": "cross-env SERVE_ENV=test umi dev"
}
}
```

--------------------------------

### Assign Access Permissions to Routes

Source: https://pro.ant.design/zh-CN/docs/layout

Assign access control rules to specific routes by using the `access` property in the route configuration in `config/route.ts`. This example uses the `readArticle` access rule.

```javascript
export default [
  {
    path: '/overview',
    component: 'Overview/index',
    name: 'overview',
    icon: 'testicon',
    access: 'readArticle',
  },
];
```

--------------------------------

### Express CORS Configuration

Source: https://pro.ant.design/zh-CN/docs/proxy

Provides code examples for configuring Cross-Origin Resource Sharing (CORS) headers in an Express.js application. This allows specified origins to access your API resources.

```javascript
res.header('Access-Control-Allow-Origin', '你的项目地址，用*将会带来安全问题');
res.header('Access-Control-Allow-Headers', '*');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
```

--------------------------------

### Configure @umijs/plugin-locale

Source: https://pro.ant.design/zh-CN/docs/i18n

This snippet shows how to enable and configure the @umijs/plugin-locale plugin in your umi project's config file. It sets the default locale and enables base navigator support.

```javascript
plugins: [
...,
locale: {
  enable: true,
  default: 'zh-CN',
  baseNavigator: true,
},
...,
]
```

--------------------------------

### Ant Design Pro: Umi Plugins for Enhanced Functionality

Source: https://pro.ant.design/zh-CN/docs/introduction

Details the various Umi plugins integrated into Ant Design Pro to enhance functionality. These include plugins for access control, analytics, Ant Design integration, initial state management, layout configuration, internationalization, data flow (model), and request handling. It also mentions customizing Webpack configurations via `chainWebpack`.

--------------------------------

### Configure Ant Design Theme Programmatically (Less)

Source: https://pro.ant.design/zh-CN/docs/dynamic-theme

Demonstrates how to programmatically configure Ant Design's theme, specifically the primary color, using the `ConfigProvider.config` method when using Less.

```javascript
import { ConfigProvider } from 'antd';


ConfigProvider.config({
  theme: {
    primaryColor: '#25b864',
  },
});
```

--------------------------------

### ESLint: Avoid Mixed Operators

Source: https://pro.ant.design/zh-CN/docs/lint

Illustrates the 'no-mixed-operators' rule, which requires parentheses for clarity when using consecutive, different operators in expressions. Shows examples of ambiguous code and how to clarify it with parentheses.

```javascript
// 🔴  错误的用法
var foo = (a && b) || c || d;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a + b * c;


// ✅ 正确的用法
var foo = (a && b) || c || d;
var foo = a || b || c;
var foo = a && b && c;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 || c > 0 || d + 1 === 0);
var foo = (a + b) * c;
```

--------------------------------

### Replace Ant Design Less Imports for Theming

Source: https://pro.ant.design/zh-CN/docs/dynamic-theme

Provides guidance on replacing Ant Design's default Less imports with a reference import to enable dynamic theming when using Less.

```less
-- @import '~antd/es/style/themes/default.less';
++ @import (reference) '~antd/es/style/themes/index';
```

--------------------------------

### Define Access Control Rules

Source: https://pro.ant.design/zh-CN/docs/layout

Create an `accessFactory` function in `src/access.ts` to define access control rules based on the initial state. This example checks if the user's name matches 'haha'.

```typescript
import { InitialState } from 'umi';


export default function accessFactory(initialState: InitialState) {
  return {
    readArticle: initialState.name === 'haha',
  };
}
```

--------------------------------

### Basic CSS Styling with Less

Source: https://pro.ant.design/zh-CN/docs/less

Demonstrates how to define basic CSS styles using a Less file and apply them to a React component. It shows how UmiJS processes Less files for styling.

```less
.page {
  height: 100vh;
}
```

```javascript
import styles from 'index.less'; // 告诉 umi 编译这个 less


const Page = () => {
  // 附加样式到 className 中
  return <div className={styles.page}>this is a page</div>;
};
```

--------------------------------

### 路由和菜单权限控制 (config/config.ts)

Source: https://pro.ant.design/zh-CN/docs/authority-management

通过在路由配置项中添加 access 属性，并指向 src/access.ts 中定义的鉴权函数，可以实现路由和菜单的权限控制。当鉴权函数返回 false 时，路由将被禁用并从菜单中移除。

```typescript
// config/config.ts
import { defineConfig } from 'umi';


export default defineConfig({
  routes: [
    {
      path: '/foo',
      name: 'foo',
      // ...
      access: 'normalRouteFilter', // 会调用 src/access.ts 中返回的 normalRouteFilter 进行鉴权
    },
    {
      path: '/admin',
      name: 'admin',
      // ...
      access: 'adminRouteFilter', // 会调用 src/access.ts 中返回的 adminRouteFilter 进行鉴权
    },
  ],
  // ...
});

```

--------------------------------

### Switch Ant Design CSS Import for UMD

Source: https://pro.ant.design/zh-CN/docs/dynamic-theme

Demonstrates how to switch the Ant Design CSS import from the default file to the variable version for UMD packages to enable dynamic theming.

```javascript
-- import 'antd/dist/antd.min.css';
++ import 'antd/dist/antd.variable.min.css';
```

--------------------------------

### Integrate Custom Layout in Umi Configuration

Source: https://pro.ant.design/zh-CN/docs/layout

To use a custom layout, create a layout file (e.g., `BaseLayout.tsx`) in `src/layouts/` and reference it in your `config.ts`. This example shows how to set the `BaseLayout` as the main layout component.

```typescript
import { defineConfig } from 'umi';

export const config = defineConfig({
  // added configuration
  routes: {
    path: '/',
    component: '.../layouts/BaseLayout',
  },
});
```

--------------------------------

### Initialize Global Initial Data with getInitialState

Source: https://pro.ant.design/zh-CN/docs/initial-state

This snippet demonstrates how to initialize global data before the application loads using the `getInitialState` function in `src/app.ts`. This is useful for fetching user information or other essential data.

```javascript
export async function getInitialState() {
  return {
    userName: 'xxx',
  };
}
```

--------------------------------

### Nginx CORS Configuration

Source: https://pro.ant.design/zh-CN/docs/proxy

Illustrates how to configure Nginx to handle CORS requests by setting appropriate headers. This example includes settings for allowing credentials, methods, and origins, and handles OPTIONS requests.

```nginx
location ^~ /api {
  proxy_set_header Origin '';
  add_header Access-Control-Allow-Credentials true;
  add_header Access-Control-Allow-Headers $http_access_control_request_headers;
  add_header Access-Control-Allow-Methods POST,GET,OPTIONS,DELETE,PUT,HEAD,PATCH;
  add_header Access-Control-Allow-Origin $http_origin;
  add_header Access-Control-Expose-Headers $http_access_control_request_headers;


  if ($request_method = 'OPTIONS') {
    return 204;
  }
  if ($request_method != 'OPTIONS'){
    proxy_pass "你的项目地址";
  }
}
```

--------------------------------

### Integrate SettingDrawer for Dynamic Theme Customization

Source: https://pro.ant.design/zh-CN/docs/dynamic-theme

Shows how to integrate the `SettingDrawer` component in `src/app.tsx` to allow users to dynamically change theme settings, including enabling dark theme.

```javascript
childrenRender: (children, props) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          {children}
          {!props.location?.pathname?.includes('/login') && (
            <SettingDrawer
              enableDarkTheme
              settings={initialState?.settings}
              onSettingChange={(settings) => {
                setInitialState((preInitialState) => ({
                  ...preInitialState,
                  settings,
                }));
              }}
            />
          )}
        </>
      );
    },
```

--------------------------------

### Rendering an SVG Component in React

Source: https://pro.ant.design/zh-CN/docs/adding-images-fonts-and-files

Provides an example of how to render an SVG element directly within a React component. This approach is recommended for managing SVGs, often after converting them into components using external tools.

```javascript
return (
  <svg width={300} height={300}>
    <rect
      width="100%"
      height="100%"
      style={{ fill: 'purple', strokeWidth: 1, stroke: 'rgb(0,0,0)' }}
    />
  </svg>
);
```

--------------------------------

### Configure Backend Proxy with Umi

Source: https://pro.ant.design/zh-CN/docs/faq

This snippet shows how to configure the proxy settings in `config.js` for Ant Design Pro projects using umi. It specifies the target server, whether to change the origin, and how to rewrite paths for API requests. This is useful for routing requests to a backend server during development.

```javascript
{
  proxy: {
    '/server/api/': {
      target: 'https://preview.pro.ant.design/',
      changeOrigin: true,
      pathRewrite: { '^/server': '' }, // /server/api/currentUser -> /api/currentUser
    },
  },
}
```

--------------------------------

### Create a Simple Model in Ant Design Pro

Source: https://pro.ant.design/zh-CN/docs/simple-model

Demonstrates how to create a basic model in Ant Design Pro by defining a default exported function in a file within the `src/models` directory. The filename serves as the model's namespace.

```typescript
// demo.ts
export default () => 'Hello World';
```
Tokens:
Raw