ViteReactAdmin dashboardStarter

gvray-vite — Vite Admin dashboard Template

By gvray

A React, Vite, and Ant Design admin template with built-in RBAC permissions, configurable routing, multiple themes, internationalization, Mock, and OpenAPI type synchronization, serving as a starting framework for enterprise admin projects.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews

Author preview

Visit websiteOpens in a new tab

Author-provided preview

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

Three-level RBAC permission control for menus, buttons, and APIs

Dual-token authentication with access and refresh tokens, including an expiration buffer strategy

Configurable routing with lazy loading and permission guards

Multiple theme switching among light, dark, color-weak, and grayscale modes

Built-in mock data and OpenAPI-to-TypeScript type synchronization

Covers admin modules including users, roles, menus, departments, dictionaries, and logs

Template Details

gvray-vite is an MIT-licensed admin template built with React, Vite, TypeScript, and Ant Design, using Zustand for state management, React Intl for internationalization, and React Router for configurable routing. Positioned as an enterprise admin starter template, its README lists core capabilities including three-level RBAC permission control for menus, buttons, and APIs; dual-token authentication with access and refresh tokens; multiple theme switching among light, dark, color-weak, and grayscale modes; runtime configuration; vite-plugin-mock for mock data; and OpenAPI-to-TypeScript type synchronization.

Functional modules cover identity and permissions (login authentication, user, role, permission, and menu management), organizational structure (departments and positions), system management (dictionaries, system configuration, notifications and announcements), system monitoring (service monitoring, online users, cache monitoring), and log auditing (login logs and operation logs). The project also provides the TablePro enhanced table component, a global dictionary system (DictionaryLabel, DictionarySelect, useDict), and a global ErrorBoundary.

For usage, the project requires Node.js 20.19.0 or higher (22+ recommended) and enables pnpm via corepack. The development environment includes built-in mock data, runs on port 9527 by default, and uses the test account admin/123456; the staging environment connects to the gvray-admin backend on port 9528; the production configuration uses port 9529. The README recommends starting the gvray-admin backend first to experience full functionality in the staging environment. Repository documentation includes a Roadmap, architecture notes, development guide, Docker deployment guide, theme specification, and contribution guide.

Note that the free scope is limited to the code of this MIT-licensed version; third-party assets such as demo images, fonts, and icons must be checked against their respective licenses; external services such as domains, hosting, and databases may incur separate charges.

ViteReactAdminStarter

Is it right for your project?

Use Cases

Building a foundational framework for enterprise admin systems
Constructing a SaaS management platform with an RBAC permission system
Serving as a frontend starter template for mid- and back-office management platforms
Practicing frontend architecture and permission design

Suitable For

Backend project teams needing a React and Vite tech stack
Systems requiring multi-level permission control for menus, buttons, and APIs
Development workflows wanting built-in Mock and OpenAPI type synchronization
Admin interfaces needing multiple themes and internationalization support

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Environment requires Node.js >= 20.19.0 (22+ recommended) and enabling pnpm via corepack enable
2
Run pnpm install to install dependencies
3
For development, use pnpm start:dev on port 9527 with the mock account admin/123456
4
For staging, use pnpm start:staging on port 9528, requiring connection to the gvray-admin backend
5
For production configuration, use pnpm start:prod on port 9529

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is limited to that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

The code of this version may be used, modified, used commercially, and distributed for free.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

The staging environment requires connection to the external gvray-admin backend service to experience full functionality; only the development environment includes built-in mock data and can run independently.
The staging test account and password must be obtained from the backend's initialization data and are not included with the template.
Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; they cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur separate charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

推荐先启动 **gvray-admin** 后端，再使用 `staging` 环境体验完整功能。
Original README

Staging（`pnpm start:staging`） | 请参考后端初始化数据 | 请参考后端初始化数据
Original README

https://github.com/gvray/gvray-vite/blob/main/LICENSE https://github.com/gvray/gvray-vite/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 88 / 100
Technologies: Vite · React
Website type: Admin dashboard · Starter

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2026-10-01
Screenshot last checked: 2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: e7c27cb689fcdb8828aca452c518095dfe740158e5c2d57e5de9d5ce64b2d115

2026-10-02T07:04:42.909Z

Source file / repository

# Gvray Admin

[English](README.en.md) | 简体中文

🦄 基于 **React 19**、**Vite**、**Ant Design 6**、**TypeScript** 构建的企业级后台管理系统，专注于 **现代前端架构** 与 **RBAC 权限体系** 设计，提供配置式路由、多主题、国际化、运行时配置、Mock、OpenAPI 等核心能力，可直接作为企业后台项目的 Starter Template。

<!--
keywords:
react,
react19,
vite,
vite8,
ant-design,
antd6,
typescript,
zustand,
axios,
react-intl,
react-router,
rbac,
permission,
access-control,
dashboard,
admin,
admin-template,
starter-template,
boilerplate,
mock,
openapi,
i18n,
theme
-->

## 📸 项目预览

<p align="center">
  <img src="./docs/screenshots/2026-10-01/light/demo.webp" width="49%" alt="Light Theme" />
  
  <img src="./docs/screenshots/2026-10-01/dark/demo.webp" width="49%" alt="Dark Theme" />
</p>

**在线预览：**
- [vite.gvray.com](https://vite.gvray.com) · **主站**
- [GitHub Pages](https://gvray.github.io/gvray-vite) · **备用**


## ✨ 核心能力

| 能力 | 描述 |
| --- | --- |
| 🔐 RBAC 权限管理 | 菜单、按钮、API 三层权限控制 |
| 🔑 双 Token 认证 | access + refresh 双 Token 管理，带过期缓冲策略 |
| 🧭 配置式路由 | 基于 React Router 8，路由表 + 懒加载 + 权限守卫 |
| 🎨 多主题 | 支持浅色、深色、色弱、灰度等主题切换，antd 6 原生 cssVar 注入 |
| 🌍 国际化 | 基于 React Intl 的多语言支持 |
| 📖 全局字典系统 | `DictionaryLabel` / `DictionarySelect` / `useDict` 后端字典一键映射 |
| 🗂️ 状态管理 | Zustand 轻量状态管理，支持持久化与 Immer |
| 🛡️ 全局错误边界 | ErrorBoundary 捕获渲染异常，显示降级 UI |
| 🌐 数据请求 | `@gvray/request` Axios 请求管线与统一错误处理 |
| ⚙️ Runtime Config | 运行时配置，无需重新构建即可调整部分配置 |
| 🎭 Mock | vite-plugin-mock，Mock 与真实接口无缝切换 |
| 📄 OpenAPI | 自动同步接口定义与 TypeScript 类型 |
| 🏗️ TablePro 增强表格 | 内置高级搜索、分页、刷新、useTablePro Hook |
| ⚡ React Compiler | 启用 React Compiler 自动优化渲染，减少手动 memo |
| 🐳 工程化 | TypeScript、Docker、多环境配置 |

## 🎯 适用场景

适合作为以下项目的基础框架：

- 企业后台管理系统
- SaaS 管理平台
- RBAC 权限系统
- 中后台管理平台
- Admin Starter Template
- 前端架构实践项目

## 📖 文档导航

| 文档 | 说明 |
| --- | --- |
| [Roadmap](docs/roadmap.md) | 功能规划与开发进度 |
| [Architecture Documentation](docs/architecture.md) | 系统架构设计与实现 |
| [Developer Guide](docs/developer-guide.md) | 开发指南 |
| [Docker 部署指南](docs/docker.md) | Docker 化部署方案 |
| [Theme 规范](docs/theme-guidelines.md) | 主题与样式设计规范 |
| API 类型同步 | OpenAPI → TypeScript 自动生成 |
| [Contributing](docs/contributing.md) | 提交规范与贡献指南 |

## 🧩 核心功能模块

| 模块 | 功能 |
| --- | --- |
| 👤 身份与权限 | 登录认证、用户管理、角色管理、权限管理、菜单管理 |
| 🏢 组织架构 | 部门管理、岗位管理 |
| ⚙️ 系统管理 | 字典管理、系统配置、通知公告 |
| 📊 系统监控 | 服务监控、在线用户、缓存监控 |
| 📝 日志审计 | 登录日志、操作日志 |

## 🚀 快速开始

### 环境要求

- Node.js >= 20.19.0（推荐 22+）
- pnpm（通过 `corepack enable` 启用）

### 安装依赖

```bash
pnpm install
```

### 启动项目

```bash
# 开发环境（内置 Mock 数据），端口 9527
pnpm start:dev

# 测试环境（连接 gvray-admin 后端），端口 9528 — 推荐
pnpm start:staging

# 生产环境配置，端口 9529
pnpm start:prod
```

### 测试账号

| 环境 | 账号 | 密码 |
| --- | --- | --- |
| Mock（`pnpm start:dev`） | `admin` | `123456` |
| Staging（`pnpm start:staging`） | 请参考后端初始化数据 | 请参考后端初始化数据 |

> 💡 推荐先启动 **gvray-admin** 后端，再使用 `staging` 环境体验完整功能。

更多配置请参考：

- `.env.dev`
- `.env.staging`
- `.env.prod`
- [Developer Guide](docs/developer-guide.md)

后端仓库：

👉 https://github.com/gvray/gvray-admin

## 🌱 项目生态

| 仓库 | 技术栈 |
| --- | --- |
| **[gvray-admin](https://github.com/gvray/gvray-admin)** | NestJS + Prisma |
| **[gvray-react](https://github.com/gvray/gvray-react)** | React + Umi |
| **[gvray-vite](https://github.com/gvray/gvray-vite)** | React + Vite |
| **[gvray-vue](https://github.com/gvray/gvray-vue)** | Vue3 + Vite + Element Plus |
| **[gvray-next](https://github.com/gvray/gvray-next)** | Next.js |

## ❤️ 支持项目

如果这个项目对你有所帮助，欢迎点一个 **⭐ Star**。

你的支持，是项目持续迭代和完善的最大动力。

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

react-starter-kit

A full-stack SaaS monorepo starter built on Vite and React, with Bun, TypeScript, tRPC, Drizzle ORM, Better Auth, Stripe, and Cloudflare Workers. It includes email OTP, passkey, Google OAuth, organizations, subscription billing, Drizzle migrations, seed scripts, and Terraform infrastructure.

Vite · SaaS

cove

Cove is a minimal TanStack Start starter template maintained by mugnavo, integrating React, TanStack Router/Query, Tailwind CSS, shadcn/ui, Drizzle ORM with PostgreSQL, Better Auth, Vite Plus, and Nitro.

Vite · SaaS

vite-react-boilerplate

A production-ready Vite + React starter template with TypeScript, Tailwind CSS, TanStack Router/Query/Table, Storybook, React Hook Form + Zod, Vitest and Playwright testing, plus Husky/Commitizen/Commitlint commit conventions.

Vite · Starter

kiaalap

Kiaalap is a free, open-source admin template from Colorlib for education, online courses, and school management.

Vite · Admin dashboard

react-vite-admin

A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.

Vite · Admin dashboard

typescript-react_best_practices-vite_template

A Vite + React + TypeScript starter template by CodelyTV, preconfigured with Jest and React Testing Library unit tests, Cypress end-to-end tests, ESLint and Prettier using Codely's shared configuration, GitHub Actions workflows, a Makefile, and Sass.

Vite · Starter