### Install Project Dependencies (Bash)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/introduction/quick-start

Installs project dependencies using pnpm. It enables corepack to manage pnpm versions and installs all necessary packages. It also provides notes on using mirror sources or disabling corepack.

```bash
# 进入项目目录
cd react-antd-admin

# 使用项目指定的 pnpm 版本进行依赖安装
corepack enable

# 安装依赖
pnpm install
```

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

### Get Project Source Code (Shell)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/introduction/quick-start

Provides commands to obtain the project's source code using npx degit or npx giget from GitHub. This step is crucial for starting development.

```sh
npx degit condorheroblog/react-antd-admin react-antd-admin
# or npx giget@latest gh:condorheroblog/react-antd-admin react-antd-admin
```

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

### Run Development Server (Bash)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/introduction/quick-start

Starts the development server for the React Antd Admin project. This command makes the application accessible at http://localhost:3333.

```bash
pnpm run dev
```

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

### Installing Additional Icon Libraries with Iconify

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/icon

Instructions on how to install and use other icon libraries, such as MDI, with Iconify. This involves installing the corresponding '@iconify-json' package. The example shows installing '@iconify-json/mdi'. Installing '@iconify/json' provides access to all supported icon libraries.

```bash
npm install --save @iconify-json/mdi
```

```bash
npm install --save @iconify/json
```

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

### Preview Project Locally (Bash)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/build

Commands to preview the built project locally. 'pnpm run preview' starts a Vite development server, while 'live-server' can be used after changing the directory to 'build' for static file serving. Options to specify the port are also shown.

```bash
pnpm run preview
```

```bash
cd build
# Start service, default port is 8080
live-server
# Start service, specify port
live-server --port 9000
```

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

### Verify Environment Versions (Bash)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/introduction/quick-start

Checks if Node.js and Git versions meet the project's requirements. Ensures Node.js is greater than 18.18.0 and Git is any version.

```bash
# 查看 node 版本
node -v
# 查看 git 版本
git -v
```

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

### Preview Production Build (Bash)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/introduction/quick-start

Previews the production build of the React Antd Admin application. This allows you to test the deployed version locally before full release.

```bash
pnpm preview
```

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

### Vite Proxy Configuration for CORS (TypeScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/request

Provides an example of how to configure local cross-origin resource sharing (CORS) proxies using Vite. This setup routes API requests starting with '/api' to a specified backend server during development.

```typescript
const isDev = process.env.NODE_ENV === "development";
export default defineConfig({
	server: {
		port: 3333,
		// https://vitejs.dev/config/server-options#server-proxy
		proxy: {
			"/api": {
				target: "http://191.255.255.123:8888", 
				changeOrigin: true,
				rewrite: path => isDev ? path.replace(/^\/api/, "") : path,
			},
		},
	},
});
```

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

### Check and Install Dependencies with npm-check (Bash)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/upgrading

Checks for available updates for all project dependencies and automatically installs them. This command helps in keeping the project's dependencies up-to-date.

```bash
pnpm run npm-check
```

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

### Project Environment Configuration Example

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/settings

Provides examples of common project-specific environment variables configured in .env files for a Vite project. These include API base URLs, default home paths, application titles, and router modes.

```bash
# Backend API prefix
VITE_API_BASE_URL = "/api"

# Default redirect route after login
VITE_BASE_HOME_PATH = "/home"

# Website title
VITE_GLOB_APP_TITLE = "React Antd Admin"

# React Router Mode
VITE_ROUTER_MODE = hash
```

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

### Route Configuration Item Example (TypeScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/routing

Shows a simplified example of a route object configuration in TypeScript for the React Ant Design Admin project. It highlights the 'path', 'Component', and 'handle' properties, where 'handle' contains meta-information like 'order', 'title', and 'icon'.

```typescript
const routes = [
	{
		path: "/home",
		Component: ContainerLayout,
		handle: {
			order: home,
			title: $t("common.menu.home"),
			icon: createElement(HomeOutlined),
		},
	},
];
```

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

### Build Project (Bash)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/build

Executes the build command for the React Antd Admin project. After completion, a 'build' directory is generated containing the project's production-ready files.

```bash
pnpm run build
```

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

### Analyze Build Size (Bash)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/build

Runs the build analyzer tool integrated within the project. This command utilizes vite-bundle-visualizer (built on rollup-plugin-visualizer) to generate a visual representation of the project's bundle size, which is then displayed in the browser.

```bash
pnpm run analyzer
```

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

### Example JSON for Permission Codes

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/access

An example JSON structure defining a list of permission codes for fine-grained access control. These codes are typically used to represent specific actions or capabilities within the system, such as 'permission:button:get' or 'permission:button:update'.

```json
{
	"permissions": [
		"permission:button:get",
		"permission:button:update",
		"permission:button:delete",
		"permission:button:add"
	]
}
```

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

### Using CSS Modules in Vite

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/style

Demonstrates how to import and use CSS Modules in a Vite project. CSS Modules provide scoped CSS by default, preventing style conflicts. Import a `.module.css` file to get a module object containing class names.

```css
.red {
  color: red;
}
```

```jsx
import classes from "./example.module.css";
document.getElementById("foo").className = classes.red;
```

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

### User Info API Response Example (Roles as Strings)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/access

Example of a user info API response where the 'roles' field is an array of strings. This format is used to match user roles with defined route permissions.

```json
{
	"code": 200,
	"result": {
		"id": 1,
		"avatar": "https://avatars.githubusercontent.com/u/47056890",
		"username": "Admin",
		"email": "<EMAIL>",
		"phoneNumber": "1234567890",
		"description": "manager",
		"roles": [
			"admin"
		]
	},
	"message": "ok",
	"success": true
}
```

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

### Backend Route Definition Example

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/access

An example of a route definition as it might be structured for backend access control. This includes path, component, and handle properties, with the handle containing nested children that define specific page controls and button permissions.

```typescript
const accessRouter = {
	path: "/access",
	handle: {
		icon: "SafetyOutlined",
		title: "common.menu.access",
		order: access,
	},
	children: [
		{
			path: "/access/page-control",
			component: "/access/page-control/index.tsx",
			handle: {
				icon: "FileTextOutlined",
				title: "common.menu.pageControl",
			},
		},
		{
			path: "/access/button-control",
			component: "/access/button-control/index.tsx",
			handle: {
				icon: "LockOutlined",
				title: "common.menu.buttonControl",
				permissions: [
					"permission:button:get",
					"permission:button:update",
					"permission:button:delete",
					"permission:button:add",
				],
			},
		},
		{
			path: "/access/common-visible",
			component: "/access/common-visible/index.tsx",
			handle: {
				icon: "EyeOutlined",
				title: "common.menu.commonVisible",
			},
		},
	],
};
```

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

### Basic Tailwind CSS Usage

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/style

Illustrates a simple example of using Tailwind CSS for styling HTML elements. Tailwind CSS is a utility-first CSS framework that allows for rapid UI development directly in your markup.

```html
<div className="bg-red-500 text-white">Hello World</div>
```

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

### Configure taze.config.js to Disable Auto-install (JavaScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/upgrading

Modifies the taze.config.js file to disable automatic installation of dependency updates. This allows for manual review of updates before installation.

```javascript
{
	install: false
}
```

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

### Styling with react-jss and Ant Design Tokens

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/style

Shows how to use `react-jss` to create custom styles, leveraging Ant Design's design tokens for consistency. The `createUseStyles` hook provides access to tokens like `colorBgContainer` and `colorBorderSecondary`.

```typescript
import { createUseStyles } from "react-jss";

export const useStyles = createUseStyles(({ token }) => {
	return {
		tabsContainer: {
			backgroundColor: token.colorBgContainer,
			borderTop: `1px solid ${token.colorBorderSecondary}`,
			borderBottom: `1px solid ${token.colorBorderSecondary}`,
		},
	};
});
```

```jsx
import { useStyles } from "./style";

function Tabs() {
	const classes = useStyles();
	return <div className={classes.tabsContainer}>Tabs</div>;
}
```

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

### Add New Route Configuration Example (TypeScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/routing

Illustrates the process of adding a new route to the React Ant Design Admin project. This involves defining a new route object within the routing configuration, similar to the example provided for sorting routes. It emphasizes the requirement of using ContainerLayout for protected routes and nesting them within children with index = true.

```typescript
import type { AppRouteRecordRaw } from "#src/router/types";
import ContainerLayout from "#src/layout/container-layout";

import { $t } from "#src/locales";
import { home } from "#src/router/extra-info";
import { HomeOutlined } from "@ant-design/icons";
import { createElement, lazy } from "react";

const Home = lazy(() => import("#src/pages/home"));

const routes: AppRouteRecordRaw[] = [
	{
		path: "/home",
		Component: ContainerLayout,
		handle: {
			order: home,
			title: $t("common.menu.home"),
			icon: createElement(HomeOutlined),
		},
		children: [
			{
				index: true,
				Component: Home,
				handle: {
					title: $t("common.menu.home"),
					icon: createElement(HomeOutlined),
				},
			},
		],
	},
];

export default routes;
```

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

### Using `$t` Helper for Type-Hinted Translations in JS/TS

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/locale

This JavaScript/TypeScript example demonstrates how to use the `$t` helper function to get translated strings in the React Antd Admin project. This usage enhances type safety and provides autocompletion within the VSCode editor, especially when interacting with the `i18n-ally` plugin.

```js
import { $t } from "#src/locales";
const title = $t("common.menu.about");
// 在 VSCode 中，`$t("common.menu.about")` 渲染为 $t(关于),

```

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

### Nginx Configuration for Gzip and Brotli Compression (Nginx)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/build

Provides Nginx configuration directives to enable gzip and brotli compression for static assets. This can significantly reduce bandwidth usage and improve load times. The configuration includes settings for enabling static gzip compression, specifying compression levels, and defining MIME types.

```nginx
http {
  # Enable gzip (dynamic compression of response content)
  gzip on;
  # Enable gzip_static (requires pre-compressed files, responds directly with pre-compressed file upon request)
  # gzip_static may cause errors if the corresponding module is not installed. Installation methods can be found separately.
  # Only enabling this will make the compressed .gz files effective.
  gzip_static on;
  gzip_proxied any;
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  # If Nginx uses multi-level proxy, this must be set to enable gzip.
  gzip_http_version 1.0;
  gzip_comp_level 2;
  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 off;
  gzip_disable "MSIE [1-6]\.";

  # Enable brotli compression
  # Requires installation of the corresponding Nginx module. Installation methods can be found separately.
  # Can coexist with gzip without conflict.
  brotli on;
  brotli_comp_level 6;
  brotli_buffers 16 8k;
  brotli_min_length 20;
  brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml;
}
```

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

### API Request Structure and Basic Usage (TypeScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/request

Defines the directory structure for API requests and provides basic usage examples for fetching, adding, updating, and deleting role data. It leverages the 'request' utility from '#src/utils/request' and includes type definitions.

```typescript
import type { RoleItemType } from "./types";
import { request } from "#src/utils/request";

export * from "./types";

/* 获取角色列表 */
export function fetchRoleList(data: any) {
	return request.get<ApiListResponse<RoleItemType>>("role-list", { searchParams: data, ignoreLoading: true }).json();
}

/* 新增角色 */
export function fetchAddRoleItem(data: RoleItemType) {
	return request.post<ApiResponse<string>>("role-item", { json: data, ignoreLoading: true }).json();
}

/* 修改角色 */
export function fetchUpdateRoleItem(data: RoleItemType) {
	return request.put<ApiResponse<string>>("role-item", { json: data, ignoreLoading: true }).json();
}

/* 删除角色 */
export function fetchDeleteRoleItem(id: number) {
	return request.delete<ApiResponse<string>>("role-item", { json: id, ignoreLoading: true }).json();
}
```

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

### User Info API Response Example (Roles as Objects)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/access

An alternative user info API response format where the 'roles' field is an array of objects, each containing 'id' and 'name'. If your API returns this format, you may need to adjust the `getUserInfo` method in `src/store/user.ts`.

```json
{
	"roles": [
		{
			"id": "1",
			"name": "admin"
		}
	]
}
```

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

### Index Route Configuration for Menu Generation

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/routing

This TypeScript example shows how to configure an index route within a parent route. By placing permissions, icons, and titles in the `handle` property of the index route, the system can automatically generate menu items with the correct information, as demonstrated for the 'Home' route.

```typescript
import type { AppRouteRecordRaw } from "#src/router/types";
import ContainerLayout from "#src/layout/container-layout";

import { $t } from "#src/locales";
import { home } from "#src/router/extra-info";
import { HomeOutlined } from "@ant-design/icons";
import { createElement, lazy } from "react";

const Home = lazy(() => import("#src/pages/home"));

const routes: AppRouteRecordRaw[] = [
	{
		path: "/home",
		Component: ContainerLayout,
		handle: {
			order: home,
			title: $t("common.menu.home"),
			icon: createElement(HomeOutlined),
		},
		children: [
			{
				index: true,
				Component: Home,
				handle: {
					title: $t("common.menu.home"), 
					icon: createElement(HomeOutlined), 
				},
			},
		],
	},
];

export default routes;
```

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

### Using RemixIcon in React with Iconify

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/icon

Shows how to use icons from the RemixIcon library within a React project by leveraging the Iconify plugin. Icons are imported using a virtual path format like '~icons/ri/icon-name'. Ensure '@iconify-json/ri' is installed.

```typescript
import SunLineIcon from "~icons/ri/sun-line";
```

```tsx
<SunLineIcon className="text-3xl"></SunLineIcon>;
```

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

### Using Ant Design Icons in React

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/icon

Demonstrates how to import and use icons from the Ant Design Icons library within a React application. Ensure the '@ant-design/icons' package is installed. Icons can be used directly as components.

```typescript
import {
	HomeOutlined,
	SettingFilled,
	SmileOutlined,
} from "@ant-design/icons";
// <HomeOutlined />
// <SettingFilled />
// <SmileOutlined />
```

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

### Creating Icons with a Helper Function

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/icon

Illustrates a method for creating icon components using a `createIconifyIcon` helper function. This approach centralizes icon creation and can be used for defining custom icons or icons that might not be directly available through standard Iconify paths. Examples include 'svg:moon' and 'svg:sun'.

```typescript
import { createIconifyIcon } from "#src/icons/create-icon";

export const MoonIcon = createIconifyIcon("svg:moon");
export const SunIcon = createIconifyIcon("svg:sun");
export const FollowSystemIcon = createIconifyIcon("svg:follow-system");
```

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

### Define Built-in Theme Types in React Antd Admin

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/theme

Provides a detailed type definition for the available built-in theme options in the React Antd Admin project. This list enumerates all selectable themes based on antd's color schemes.

```typescript
export type BuiltinThemeType =
  | "red"
  | "volcano"
  | "orange"
  | "gold"
  | "yellow"
  | "lime"
  | "green"
  | "cyan"
  | "blue"
  | "geekblue"
  | "purple"
  | "magenta"
  | "gray";
```

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

### Define Mock API Endpoint with vite-plugin-fake-server (TypeScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/mock

Defines a mock API endpoint '/user-info' using vite-plugin-fake-server. It simulates GET requests with a 1-second delay and returns different user data based on the authorization header. The response is formatted using a utility function.

```typescript
import { defineFakeRoute } from "vite-plugin-fake-server/client";

import { ADMIN_TOKEN } from "./constants";
import { resultSuccess } from "./utils";

export default defineFakeRoute([
	{
		url: "/user-info",
		timeout: 1000,
		method: "get",
		response: ({ headers }) => {
			if (headers.authorization?.split?.(" ")?.[1] === ADMIN_TOKEN) {
				return resultSuccess({
					id: 1,
					avatar: "https://avatars.githubusercontent.com/u/47056890",
					username: "Admin",
					email: "<EMAIL>",
					phoneNumber: "1234567890",
					description: "manager",
					roles: ["admin"],
				});
			}
			else {
				return resultSuccess({
					id: 2,
					avatar: "https://avatar.vercel.sh/avatar.svg?text=Common",
					username: "Tom",
					email: "<EMAIL>",
					phoneNumber: "9876543210",
					description: "employee",
					roles: ["common"],
				});
			}
		},
	},
]);

```

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

### Nested JSON Structure for Internationalization Keys

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/locale

This JSON example demonstrates the preferred nested key structure for internationalization files in the React Antd Admin project. Using nested keys improves organization and readability compared to a flat structure, especially for complex translations.

```json
{
	"a": {
		"b": {
			"c": "..."
		}
	}
}
```

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

### Ky Download Progress Callback (TypeScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/request

Demonstrates how to use the `onDownloadProgress` option with the Ky library to track file download progress. This callback function provides details about the download status, including percentage, transferred bytes, and total bytes.

```typescript
import ky from "ky";

const response = await ky("https://example.com", {
	onDownloadProgress: (progress, chunk) => {
		// Example output:
		// `0% - 0 of 1271 bytes`
		// `100% - 1271 of 1271 bytes`
		console.log(`${progress.percent * 100}% - ${progress.transferredBytes} of ${progress.totalBytes} bytes`);
	}
});
```

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

### Vite Environment Variable Loading Order

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/settings

Illustrates the order in which Vite loads environment files. Files specific to a mode (e.g., .env.production) take precedence over general files (e.g., .env). Locally modified files (e.g., .env.local) are ignored by Git.

```bash
.env                # In all environments
.env.local          # In all environments, ignored by git
.env.[mode]         # Only in the specified mode
.env.[mode].local   # Only in the specified mode, ignored by git
```

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

### Apply CSS for Grayscale Mode

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/theme

Shows the CSS filter used to apply grayscale to an element. Setting the filter to `grayscale(100%)` removes all color saturation, rendering the element in shades of gray.

```css
filter : grayscale(100%)
```

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

### Configure Color Blind Mode Default in React Antd Admin

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/theme

Sets the default preference for color-blind mode in the React Antd Admin project. By default, color-blind mode is disabled (`false`) and can be configured in `preferences.ts`.

```typescript
export const DEFAULT_PREFERENCES = {
	colorBlindMode: false, 
} satisfies PreferencesState;
```

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

### Configure Grayscale Mode Default in React Antd Admin

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/theme

Sets the default preference for grayscale mode in the React Antd Admin project. By default, grayscale mode is disabled (`false`) and can be enabled via the `preferences.ts` file.

```typescript
export const DEFAULT_PREFERENCES = {
	colorGrayMode: false, 
} satisfies PreferencesState;
```

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

### Apply CSS for Color Blind Mode

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/theme

Demonstrates the CSS filter used to enable color-blind mode. This filter inverts the colors of the element, which can help users with certain types of color vision deficiency perceive content more clearly.

```css
filter: invert(100%)
```

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

### Defining and Accessing Vite Environment Variables

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/settings

Shows how to define custom environment variables in .env files, which must be prefixed with VITE_. It also demonstrates how to access these variables within the application code using `import.meta.env`.

```typescript
VITE_SOME_KEY = 123;

// Accessing the variable in code:
console.log(import.meta.env.VITE_SOME_KEY); // 123
```

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

### Configure Website Update Checks (TypeScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/monitoring-updates

Defines default preferences for the version monitor, including the interval for checking updates and whether the feature is enabled. These settings can be found in the `preferences.ts` file.

```typescript
/**
 * Default preferences
 */
export const DEFAULT_PREFERENCES = {
	/* ================== Version Monitor ================== */
	checkUpdatesInterval: 1,
	enableCheckUpdates: true,
} satisfies PreferencesState;

```

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

### Handle Dynamic Content with Interpolation in `react-i18next`

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/locale

This TypeScript/React example shows how to use interpolation in `react-i18next` to include dynamic values within translated strings. The `t` function accepts an object with key-value pairs to replace placeholders in the translation text, such as displaying a countdown timer.

```tsx
// 例如：common.json 文件内容如下：
// {
// 	"sendText": "{{ second }} 秒后重新获取",
// }
import { useTranslation } from "react-i18next";
export default function Login() {
	const { t } = useTranslation();
	return (
		<div>
			{t("common.sendText", { second: 60 })}
		</div>
	);
}
```

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

### Route Directory Structure

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/routing

This bash snippet outlines the directory structure for routing configuration within the React Antd Admin project. It shows the organization of constants, utilities, types, guards, and different route categories (core, external, modules, static).

```bash
src/router
├── constants.ts                   # 路由常量
├── utils                          # 路由工具
├── types                          # 路由类型
│   │   ├── guard                  # 路由守卫
│   │   │   ├── auth-guard.tsx     # 权限守卫
│   │   │   └── index.ts           # 路由守卫聚合
├── index.ts                       # 路由配置文件
├── extra-info
│   ├── order                      # 路由顺序决定菜单排序
│   └── index.ts                   # 聚合导出
└── routes
    ├── core                       # 核心路由
    ├── external                   # 外部路由
    ├── modules                    # 动态路由
    ├── static                     # 静态路由
    └── index.ts                   # 聚合路由
```

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

### Request Whitelist Configuration (TypeScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/request

Illustrates how to configure a request whitelist to exclude certain API endpoints from requiring an authentication token. This is set within the 'src/utils/request/index.ts' file.

```typescript
// 请求白名单, 请求白名单内的接口不需要携带 token
const requestWhiteList = ["/login"];
```

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

### Resolve Peer Dependency Incompatibilities in package.json (JSON)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/upgrading

Uses the 'overrides' field in package.json to explicitly define compatible versions for peer dependencies that may cause conflicts. This is useful for libraries like react-scroll, react-scrollama, and rooks when facing issues with react@19.

```json
{
	"overrides": {
		"react-pdf": {
			"react": "$react",
			"react-dom": "$react-dom"
		},
		"react-scroll": {
			"@types/react": "$react",
			"react": "$react",
			"react-dom": "$react-dom"
		},
		"react-scrollama": {
			"react": "$react",
			"react-dom": "$react-dom"
		},
		"rooks": {
			"react": "$react",
			"react-dom": "$react-dom"
		}
	}
}
```

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

### Using SVG Files as Images in React

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/icon

Demonstrates how to use SVG files as regular images in React. SVG files intended for image use should be placed in the 'src/assets/svg' directory. They can be imported either as React components for direct rendering or as URLs for use in `<img>` tags. This functionality relies on vite-plugin-svgr.

```typescript
import Logo from "#src/assets/svg/logo.svg?react";
// <Logo />
```

```typescript
import logo from "#src/assets/svg/logo.svg?url";
// <img src={logo} alt="logo" />
```

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

### Configure Custom Primary Theme Color in React Antd Admin

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/theme

Sets the default preferences for custom theme configuration in React Antd Admin. It specifies 'custom' as the built-in theme type and defines a primary theme color using a hexadecimal color code.

```typescript
export const DEFAULT_PREFERENCES = {
	builtinTheme: "custom", 
	themeColorPrimary: "#1677ff"
} satisfies PreferencesState;
```

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

### Configure Built-in Themes in React Antd Admin

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/theme

Defines the available built-in themes for the React Antd Admin project. These themes are derived from antd's color palettes, with the sixth color in each palette recommended as the primary theme color. The default theme is 'blue'.

```typescript
export type BuiltinThemeType = "red" | "volcano" | "orange" | "gold" | "yellow" | "lime" | "green" | "cyan" | "blue" | "geekblue" | "purple" | "magenta" | "gray" | "custom";
export const DEFAULT_PREFERENCES = { builtinTheme: "blue" } satisfies PreferencesState;
```

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

### Configure vite-plugin-fake-server in Vite Config (TypeScript)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/fundamentals/mock

Configures the vite-plugin-fake-server plugin within the Vite build process. It sets the base URL for mocked API requests to '/api', enables production mocking, and sets a default request timeout of 1000ms. To disable production mocking, set `enableProd: false`.

```typescript
import { vitePluginFakeServer } from "vite-plugin-fake-server";

export default defineConfig({
	plugins: [
		react(),
		vitePluginFakeServer({
			basename: "/api",
			enableProd: false, 
			timeout: 1000,
		}),
	],
});

```

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

### React Antd Admin Translation File Structure (Bash)

Source: https://condorheroblog.github.io/react-antd-admin/docs/zh/guide/advanced/locale

This bash snippet illustrates the typical directory structure for translation files in the React Antd Admin project. It shows how language-specific JSON files are organized within locale folders, categorizing translations for access control, common elements, forms, settings, and individual pages.

```bash
├── locales
│   ├── README.md
│   ├── en-US
│   │   ├── access.json                # 演示访问权限相关
│   │   ├── authority.json             # 权限相关，例如登录页面等
│   │   ├── common.json                # 通用字段，例如菜单、按钮文字、信息提示等
│   │   ├── form.json                  # 表单相关，例如表单字段、校验信息等
│   │   ├── preferences.json           # 偏好设置相关，例如主题、字体大小等
│   │   ├── widgets.json               # 偏好设置里的控件，例如系统更新等
│   │   ├── -----------                # 以下为页面级别的翻译文件
│   │   ├── system.json                # 系统管理页面
│   │   ├── home.json                  # 首页
│   │   ├── about.json                 # 关于页面
│   │   └── personal-center.json       # 个人中心

```