简述#

XinAdmin 前端采用 React 19 + TypeScript + Vite 技术栈构建，使用 Ant Design 作为 UI 组件库，并结合 Zustand 状态管理库实现现代化的前端架构。系统具备响应式布局、动态路由加载以及统一的 API 请求处理机制。

架构特点#

• 状态管理: 基于 Zustand 的状态管理模式，提供全局状态管理和局部状态管理

• 组件化设计: 使用 Ant Design 组件库，结合自定义业务组件，实现高度复用性

• 动态路由: 基于 React Router 的动态路由系统，支持权限控制的路由加载

• API 管理: 统一的 Axios 请求封装，提供标准化的接口调用方式

• 国际化支持: 内置 i18next 国际化方案，支持多语言切换

开发流程概览#

典型的前端功能开发流程如下：

1. 模型定义: 定义 TypeScript 接口和类型
2. API 接口封装: 创建 API 请求方法
3. 状态管理: 实现 Zustand Store 的状态管理逻辑
4. 页面组件开发: 创建 React 页面组件并集成业务逻辑

接下来我们将详细介绍每个开发环节的具体实现。

模型定义#

XinAdmin 前端使用 TypeScript 定义数据结构和接口，确保类型安全和更好的开发体验。领域模型文件通常存储在 src/domain/ 目录下。

模型示例#

以下是一个典型的用户领域模型示例：

// src/domain/iSysUser.ts

/**
 * 系统用户领域模型
 */
export default interface ISysUser {
  /** 用户ID */
  id?: number;
  /** 用户名 */
  username?: string;
  /** 昵称 */
  nickname?: string;
  /** 邮箱 */
  email?: string;
  /** 手机号 */
  mobile?: string;
  /** 状态 */
  status?: number;
}

API接口封装#

XinAdmin 前端采用统一的 API 封装模式，通过 Axios 进行 HTTP 请求处理，实现了请求拦截、响应拦截、错误处理等功能。API 文件通常存储在 src/api/ 目录下。

API封装示例#

以下是一个用户管理 API 的实现示例：

// src/api/sys/sysUser.ts

import createAxios from '@/utils/request';

/** 后台用户登录 */
export async function login(data) {
  return createAxios({
    url: '/admin/login',
    method: 'post',
    data,
  });
}

状态管理#

XinAdmin 前端使用 Zustand 作为状态管理解决方案，提供了轻量级且高效的状态管理能力。状态管理文件通常存储在 src/stores/ 目录下，采用 Slice 模式组织不同的状态模块。

状态管理示例#

以下是认证状态管理的实现示例：

// src/stores/example/index.ts

import { create } from 'zustand';

export const useExampleStore = create()(
  devtools(
    persist(
      () => ({
        info: {},
        getUser: () => null
      })
    ),
    { name: 'store' }
  )
);

页面组件开发#

XinAdmin 前端使用 React 组件模型开发页面，结合 Ant Design 组件库实现用户界面。页面组件通常存储在 src/pages/ 目录下，通过动态导入实现按需加载。

以下是一个简单的页面组件示例：

// src/pages/dashboard/analysis.tsx

import React from 'react';
import { Card, Row, Col } from 'antd';

const ExamplePage: React.FC = () => {

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card title="分析面板">
            <p>欢迎！</p>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default ExamplePage;