# xlcig-admin

**Repository Path**: leheya/xlcig-admin

## Basic Information

- **Project Name**: xlcig-admin
- **Description**: 基于 React + Ant Design + TypeScript 构建的企业级管理系统。 适用于前端项目 企业级电商项目
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 0
- **Created**: 2025-07-10
- **Last Updated**: 2026-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, antdesign

## README

# XLCIG 企业级管理后台

基于 React + Ant Design + TypeScript 构建的企业级管理系统。
适用于前端项目 [企业级电商项目](https://gitee.com/leheya/xlweb)

## 功能特性

- 🔐 **身份认证** - JWT Token 认证，角色权限管理
- 📊 **仪表盘** - 数据可视化，实时统计
- 🎨 **现代化UI** - 基于 Ant Design 5.x，支持主题定制
- 📱 **响应式设计** - 适配各种设备尺寸
- 🚀 **高性能** - Vite 构建，快速开发体验
- 🎯 **TypeScript** - 类型安全，开发效率更高

## 技术栈

- **前端框架**: React 18
- **UI组件库**: Ant Design 5.x
- **路由管理**: React Router 6
- **状态管理**: Zustand
- **样式方案**: Tailwind CSS + CSS-in-JS
- **构建工具**: Vite
- **开发语言**: TypeScript
- **代码规范**: ESLint + Prettier

- [前端直达](https://gitee.com/leheya/xlweb)
- [后端直达](https://gitee.com/leheya/xlcigbackend)

## 在线地址 

-  [https://admin.xlCig.cn](https://admin.xlCig.cn)

账号密码 ： xlcig xl010520 已禁用删除

## 📸 项目展示

<div align="center">
<img src="src/assets/ExampleDiagram/5.png" alt="" width="800"/>
</div>

<div align="center">
<img src="src/assets/ExampleDiagram/1.png" alt="" width="800"/>
</div>

<div align="center">
<img src="src/assets/ExampleDiagram/2.png" alt="" width="800"/>
</div>

<div align="center">
<img src="src/assets/ExampleDiagram/3.png" alt="" width="800"/>
</div>

<div align="center">
<img src="src/assets/ExampleDiagram/4.png" alt="" width="800"/>
</div>


## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

### 3. 构建生产版本

```bash
npm run build
```

### 4. 预览生产版本

```bash
npm run preview
```

## 登录信息

- **演示账号**: admin
- **密码**: 123456
- **租户**: 可选择默认租户、演示租户或测试租户

## 项目结构

```
src/
├── components/          # 公共组件
│   └── Layout/         # 布局组件
├── config/             # 配置文件
│   └── menu.ts         # 菜单配置
├── pages/              # 页面组件
│   ├── Dashboard/      # 仪表盘
│   ├── Login/          # 登录页
│   └── NotFound/       # 404页面
├── stores/             # 状态管理
│   ├── authStore.ts    # 认证状态
│   └── appStore.ts     # 应用配置
├── types/              # 类型定义
│   └── index.ts        # 公共类型
├── App.tsx             # 应用根组件
├── main.tsx            # 应用入口
└── index.css           # 全局样式
```


## 权限管理

### 角色权限

- 超级管理员：系统级别权限
- 普通用户：基础功能权限

### 菜单权限
- 基于角色的菜单显示
- 动态路由加载
- 细粒度权限控制

## 开发指南

### 添加新页面

1. 在 `src/pages` 目录下创建页面组件
2. 在 `src/config/menu.ts` 中添加菜单项
3. 在 `src/App.tsx` 中添加路由配置

### 状态管理

使用 Zustand 进行状态管理，主要包括：

- `authStore`: 用户认证状态
- `appStore`: 应用配置状态

### 样式开发

- 使用 Tailwind CSS 进行快速样式开发
- 自定义 CSS 类在 `src/index.css` 中定义
- 支持企业级设计系统

## 部署说明

### 环境变量

创建 `.env.production` 文件：

```env
VITE_API_BASE_URL=https://your-api-domain.com
VITE_APP_TITLE=XLCIG 管理后台
```

### 构建部署

```bash
# 构建
npm run build

# 部署到服务器
# 将 dist 目录内容上传到 Web 服务器
```

## 浏览器支持

- Chrome >= 88
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 许可证

MIT License

## 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 更新说明

目前暂不搭配多租户系统，后期再更新。有任何疑问请联系我 18569795073@163.com

---