# react-admin-sample

**Repository Path**: galosys/react-admin-sample

## Basic Information

- **Project Name**: react-admin-sample
- **Description**: react-admin-app,(react+material ui)示例
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-17
- **Last Updated**: 2026-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Admin Sample

基于 react-admin v5 + React 19 + MUI 7 + TypeScript 的完整后台管理示例。

## 功能特性

### 资源管理
| 资源 | 列表 | 创建 | 编辑 | 详情 |
|------|------|------|------|------|
| 文章 | ✅ 搜索/筛选/分页 | ✅ | ✅ | - |
| 用户 | ✅ 响应式布局 | - | - | ✅ |
| 评论 | ✅ 关联文章筛选 | - | - | ✅ |

### 已实现功能
- **多级折叠菜单** — 自定义 Menu 组件，支持无限层级嵌套
- **国际化** — 全中文界面 (ra-language-chinese)
- **认证登录** — 简易 authProvider，任意用户名登录
- **自定义主题** — 紫色主色调 MUI 主题
- **全局错误边界** — 异常捕获 + 错误详情 + 重试
- **环境变量校验** — 启动时验证必填配置
- **ESLint + Prettier** — 代码规范自动化
- **Docker 部署** — 多阶段构建 + Nginx SPA 路由
- **CI/CD** — GitHub Actions 自动构建

## 快速开始

```bash
# 安装依赖
npm install --legacy-peer-deps

# 开发环境
npm run dev        # → http://localhost:5173

# 代码检查
npm run lint
npm run format

# 生产构建
npm run build
npm run preview
```

访问后输入任意用户名即可登录。

## 环境变量

创建 `.env` 文件：

```env
VITE_JSON_SERVER_URL=https://jsonplaceholder.typicode.com
```

## Docker 部署

```bash
docker build -t react-admin-sample .
docker run -p 8080:80 react-admin-sample
# → http://localhost:8080
```

## 技术栈

| 类别 | 选型 |
|------|------|
| 框架 | react-admin 5.14, React 19 |
| UI | MUI 7, Emotion |
| 构建 | Vite 7, TypeScript 5 |
| 国际化 | ra-i18n-polyglot, ra-language-chinese |
| 数据源 | JSONPlaceholder (REST API) |
| 格式化工 | ESLint, Prettier |
| 部署 | Docker, Nginx, GitHub Actions |

## 项目结构

```
src/
├── App.tsx                     # Admin 入口 + 资源注册
├── main.tsx                    # 应用入口
├── dataProvider.ts             # REST API 适配
├── authProvider.ts             # 认证
├── env.ts                      # 环境变量校验
├── i18nProvider.ts             # 中文国际化
├── Dashboard.tsx               # 首页统计
├── theme/theme.ts              # MUI 主题 (紫色)
├── layout/
│   ├── MyMenu.tsx              # 多级折叠菜单
│   ├── MyLayout.tsx            # 自定义布局
│   ├── MyLoginPage.tsx         # 登录页 (密码显隐)
│   ├── MyErrorPage.tsx         # 全局错误边界
│   └── MyUrlField.tsx          # 自定义链接字段
└── resources/
    ├── posts/   (List, Edit, Create)
    ├── users/   (List, Show)
    └── comments/(List, Show)
```

## License

[MIT](LICENSE)