# wangsong-react-admin

**Repository Path**: vmaps/wangsong-react-admin

## Basic Information

- **Project Name**: wangsong-react-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-26
- **Last Updated**: 2026-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WangSong React Admin - 管理系统

基于 **React 18** + **Vite** + **TypeScript** + **Zustand** + **TanStack Query** 的现代化后台管理系统。

## 📚 文档

- **[CHANGELOG.md](./CHANGELOG.md)** - 项目变更日志（重构历史、优化记录）

---

## 🎯 技术栈

- **React 18** - 最新版本
- **Vite** - 快速构建工具
- **TypeScript** - 类型安全
- **Zustand** - 轻量级状态管理
- **TanStack Query (v5)** - 服务端状态管理
- **React Router v7** - 路由管理
- **Axios** - HTTP 客户端（带全局错误处理）
- **Tailwind CSS** - 原子化 CSS
- **shadcn/ui** - 高质量 UI 组件库

## 📦 项目结构

```
src/
├── api/              # API 接口层（按模块分组）
├── components/       # 组件库
│   ├── ui/          # UI 基础组件（shadcn/ui）
│   └── auth/        # 认证相关组件
├── hooks/           # 自定义 Hooks
├── pages/           # 页面组件
├── store/           # Zustand Store
├── services/        # 服务层（Axios 配置）
├── utils/           # 工具函数
├── types/           # TypeScript 类型定义
├── router/          # 路由配置
├── providers/       # Context Providers
└── config/          # 配置文件
```

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:5173

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## ✅ 完成情况

### 第 1 步：项目初始化与环境搭建 ✅
- ✅ Vite + React 18 + TypeScript 项目创建
- ✅ Zustand + TanStack Query + React Router 安装
- ✅ Tailwind CSS + shadcn/ui 配置
- ✅ 基础路由结构配置
- ✅ Axios + API 服务 + 环境变量配置
- ✅ API 接口定义（auth, user, role, resources）

### 第 2 步：状态管理与认证体系 ✅
- ✅ Zustand Store 创建 (token, permissions)
- ✅ 本地存储持久化实现
- ✅ TanStack Query 全局错误处理配置
- ✅ Axios 拦截器实现（Token 注入、登录异常处理）
- ✅ 认证 Hook (useAuth) 创建
- ✅ 认证守卫组件 (ProtectedRoute) 实现

### 第 3 步：登录页面 ✅
- ✅ Login 登录表单组件实现
- ✅ 表单验证逻辑实现
- ✅ 集成 useAuth Hook 进行登录
- ✅ 登录成功跳转和错误提示

### 第 4 步：布局组件 ✅
- ✅ Layout 主框架组件创建
- ✅ 侧边栏菜单实现（基于权限显示）
- ✅ 顶栏和用户下拉菜单
- ✅ 路由配置更新集成 Layout

### 第 5 步：用户管理模块 ✅
- ✅ UserList 用户列表组件实现
- ✅ 搜索和分页功能实现
- ✅ 删除用户功能实现
- ✅ UserAdd 新增用户表单实现
- ✅ UserEdit 编辑用户表单实现
- ✅ 权限控制集成

### 第 6 步：角色与资源管理 ✅
- ✅ RoleList/RoleAdd/RoleEdit 角色管理
- ✅ ResourcesList/ResourcesAdd/ResourcesEdit 资源管理
- ✅ 树形结构展示与操作
- ✅ 权限分配功能

### 第 7 步：UI 组件升级 ✅
- ✅ Label, Loading, Skeleton, FormItem 组件
- ✅ 所有表单页面使用 FormItem 重构
- ✅ 所有列表页面添加 Skeleton 加载状态
- ✅ 代码量减少约 100+ 行

## 📋 未来规划

详见 [CHANGELOG.md](./CHANGELOG.md#-未来规划)

---

### 核心特性

- ✅ **RBAC 权限系统** - 完整的基于角色的访问控制
- ✅ **响应式 UI** - 基于 Tailwind CSS + shadcn/ui
- ✅ **TypeScript** - 100% 类型安全
- ✅ **统一 CRUD Hooks** - useAdd, useUpdate, useDelete
- ✅ **全局导航** - GlobalNavigator 工具类
- ✅ **智能加载** - Skeleton 骨架屏优化体验

### 主要功能模块

- **用户管理** - 用户 CRUD、角色分配
- **角色管理** - 角色 CRUD、权限分配
- **资源管理** - 树形结构资源管理
- **认证系统** - 登录/登出、权限获取、路由守卫

### 环境变量

修改 `src/config/index.ts` 中的 `API_BASE_URL` 来配置后端 API 地址。

当前配置：`http://127.0.0.1:8081`

## 🎨 UI 组件

项目使用 **shadcn/ui** 组件库，提供以下基础组件：

- Button, Input, Card, Table
- Dialog, DropdownMenu
- Checkbox, Select, RadioGroup
- Label, FormItem, Loading, Skeleton
- Toast, ConfirmDialog

更多组件详见 [CHANGELOG.md](./CHANGELOG.md)

## 📄 License

ISC