https://github.com/zhangxiaowei6/zx-admin
ZX-Admin 是一套开源的多平台多租户企业级管理后台，基于 React 18 + TypeScript + Ant Design 构建。
https://github.com/zhangxiaowei6/zx-admin
ant-design pro-components react ts vite zustand
Last synced: 3 months ago
JSON representation
ZX-Admin 是一套开源的多平台多租户企业级管理后台，基于 React 18 + TypeScript + Ant Design 构建。
- Host: GitHub
- URL: https://github.com/zhangxiaowei6/zx-admin
- Owner: zhangxiaowei6
- License: mit
- Created: 2026-03-09T11:04:08.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-03-12T19:12:23.000Z (3 months ago)
- Last Synced: 2026-03-12T19:26:01.089Z (3 months ago)
- Topics: ant-design, pro-components, react, ts, vite, zustand
- Language: TypeScript
- Homepage:
- Size: 408 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.en.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# ZX-Admin
Multi-platform multi-tenant enterprise admin dashboard, built with React 18 + TypeScript + Ant Design, designed for SaaS scenarios.
[](https://github.com/zhangxiaowei6/ZX-Admin)
[](https://github.com/zhangxiaowei6/ZX-Admin)
[](LICENSE)
[Live Demo](https://zhangxiaowei6.github.io/ZX-Admin/) | Test account: `admin` / `zx@123` | [Changelog](./CHANGELOG.md) | [中文](./README.md)
---
## Features
- **Dual-Level Multi-Tenancy**: Platform and tenant sides share one codebase, supporting seamless multi-platform switching
- **Enterprise-Grade Security**: Request signing (X-Sign + Timestamp + Nonce), optional AES encryption, cross-tab logout sync
- **Highly Configurable**: 20+ auto-persisted settings — theme, layout, form, table preferences, all adjustable in real-time
- **Modern Stack**: Vite 5 + Zustand + React Query, instant HMR, lightweight state management
---
## Tech Stack
[](https://react.dev)
[](https://www.typescriptlang.org/)
[](https://vitejs.dev)
[](https://ant.design)
[](https://zustand-demo.pmnd.rs/)
[](https://tanstack.com/query)
[](https://reactrouter.com)
[](https://tailwindcss.com)
[](https://nodejs.org)
---
## Quick Start
**Requirements**: Node.js >= 18.0.0
```bash
git clone https://github.com/zhangxiaowei6/ZX-Admin.git
cd ZX-Admin
npm install
cp .env.example .env.local # fill in your config if needed
npm run dev
```
Open http://localhost:3000 and log in with `admin` / `zx@123`.
---
## Commands
| Command | Description |
|---------|-------------|
| `npm run dev` | Start dev server (port 3000, with Mock API) |
| `npm run build` | Build for production |
| `npm run build:demo` | Build demo version |
| `npm run preview` | Preview production build |
| `npm run preview:demo` | Build and preview demo version |
| `npm run lint` | Run ESLint |
---
## Environment Variables
```bash
# .env.development
VITE_API_BASE_URL= # Empty = use Mock; set to backend URL to connect real API
VITE_CRYPTO_ENABLED=false # Enable AES encryption
VITE_APP_KEY=merchant-admin # Signing key (must match backend)
VITE_APP_SECRET=dev-secret # Signing secret (change in production)
VITE_BASE_PATH=/ # Deployment sub-path
```
To connect a real backend, create `.env.development.local` (not committed to git):
```bash
VITE_API_BASE_URL=http://your-backend-url.com
VITE_CRYPTO_ENABLED=true
VITE_APP_KEY=your-app-key
VITE_APP_SECRET=your-app-secret
```
> Signing algorithm: `src/utils/sign.ts`. Encryption algorithm: `src/utils/crypto.ts`.
---
## Project Structure
```
ZX-Admin/
├── mock/ # Mock server (platform / tenant)
├── src/
│ ├── api/ # API layer
│ ├── components/ # Shared and layout components
│ ├── config/ # Default settings (defaultSettings.json)
│ ├── constants/ # Global constants and menu config
│ ├── hooks/ # Custom hooks
│ ├── locales/ # i18n translations (zh-CN/en-US/ja-JP)
│ ├── pages/ # Page components
│ ├── routes/ # Routes and guards
│ ├── services/ # Business logic (role/menu tree utils)
│ ├── stores/ # Zustand stores
│ ├── types/ # TypeScript types
│ └── utils/ # Utility functions
├── .env.example
├── .env.development
├── .env.production
├── vite.config.ts
└── package.json
```
---
## Deployment
**Nginx**
```bash
npm run build
# Deploy dist/ to your web server
```
```nginx
server {
listen 80;
server_name your-domain.com;
root /path/to/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
gzip on;
gzip_types text/plain text/css application/json application/javascript;
}
```
**Docker**
```dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```
```bash
docker build -t zx-admin .
docker run -d -p 80:80 zx-admin
```
---
## FAQ
**How to switch to a real API?**
Create `.env.development.local` with `VITE_API_BASE_URL` set, then restart the dev server.
**Login fails?**
In Mock mode, ensure `VITE_API_BASE_URL` is empty and use `admin` / `zx@123`. For real backend, verify Key/Secret match and that CORS is enabled.
**How to customize theme colors?**
Click the ⚙️ icon in the top-right corner. All settings persist automatically in `localStorage`.
**How to add a new menu?**
- Platform menu: edit `src/constants/menu/platformMenu.tsx`
- Tenant menu: edit `src/constants/menu/tenantMenu.tsx`
**How to resolve CORS issues?**
In development, configure a proxy in `vite.config.ts`. In production, use Nginx reverse proxy or configure CORS on the backend.
**How to disable AES encryption?**
Set `VITE_CRYPTO_ENABLED=false`. Request signing cannot be disabled; to modify the logic edit `src/utils/sign.ts`.
---
## Adding a Business Module
Using "Notice Management" as an example:
1. **Register route**: Add entry in `src/routes/modules/platform.tsx`
2. **Add menu item**: Add entry in `src/constants/menu/platformMenu.tsx`
3. **Create page**: Create `src/pages/Platform/Notice/index.tsx`
4. **Define API**: Create `src/api/modules/platform/notice.ts`
5. **Create hook** (optional): Create `src/pages/Platform/Notice/hooks/useNotice.ts`
6. **Add mock**: Create `mock/platform/notice.ts` and import it in `mock/index.ts`
No framework code needs to be modified.
---
## Browser Support
Chrome 90+ / Firefox 88+ / Edge 90+ / Safari 14+
> Requires View Transition API and BroadcastChannel API. IE is not supported.
---
## Contributing
1. Fork this repository
2. Create a branch: `git checkout -b feature/AmazingFeature`
3. Commit: `git commit -m 'feat: add some feature'`
4. Push: `git push origin feature/AmazingFeature`
5. Open a Pull Request
Commits follow [Conventional Commits](https://www.conventionalcommits.org/). See [CONTRIBUTING.en.md](CONTRIBUTING.en.md) for details.
---
## License
[MIT](LICENSE) © 2026 zhangxiaowei6