# admin-frontend

**Repository Path**: wanfangqing/admin-frontend

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-14
- **Last Updated**: 2026-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Admin System

基于 Vue 3 + Vite + TypeScript + Ant Design Vue 的后台管理系统

## 技术栈

- **框架**: Vue 3.4+
- **语言**: TypeScript 5.0+
- **构建工具**: Vite 5.0+
- **UI库**: Ant Design Vue 4.0+
- **状态管理**: Pinia 2.0+
- **路由**: Vue Router 4.0+
- **HTTP**: Axios
- **Mock**: MockJS + Vite Plugin Mock

## 特性

- 🚀 基于 Vue 3 + Vite，开发体验极佳
- 📦 基于 TypeScript，类型安全
- 🎨 基于 Ant Design Vue，组件丰富
- 🔐 基于 RBAC 的权限管理
- 🌓 支持动态路由
- 📊 支持标签页导航
- 🎯 支持按钮级权限控制
- 📝 丰富的表格、表单组件封装
- 🎭 集成 Mock 数据，支持无缝切换
- 🌍 响应式布局，支持移动端

## 项目结构

```
src/
├── api/              # 接口管理
│   ├── auth.ts       # 认证相关
│   ├── system/       # 系统管理
│   └── monitor/      # 系统监控
├── assets/           # 静态资源
├── components/       # 公共组件
│   ├── BasicTable/   # 基础表格
│   ├── BasicForm/    # 基础表单
│   ├── BasicSearch/  # 搜索筛选
│   └── BasicDialog/  # 弹窗封装
├── directives/       # 自定义指令
│   ├── permission.ts # 权限指令
│   └── debounce.ts   # 防抖指令
├── hooks/            # 组合式函数
│   ├── useTable.ts   # 表格Hook
│   ├── useForm.ts    # 表单Hook
│   └── useDialog.ts  # 弹窗Hook
├── layout/           # 布局组件
│   ├── components/   # 布局子组件
│   └── index.vue     # 主布局
├── router/           # 路由配置
│   ├── index.ts      # 路由入口
│   └── permission.ts # 权限路由
├── store/            # 状态管理
│   └── modules/      # 状态模块
├── styles/           # 全局样式
│   ├── variables.less
│   ├── mixins.less
│   └── common.less
├── utils/            # 工具函数
│   ├── index.ts
│   ├── request.ts    # 请求封装
│   └── auth.ts       # 认证工具
├── views/            # 页面视图
│   ├── dashboard/    # 首页
│   ├── system/       # 系统管理
│   ├── monitor/      # 系统监控
│   └── error/        # 错误页面
├── types/            # 类型定义
├── App.vue           # 根组件
└── main.ts           # 入口文件
```

## 安装依赖

```bash
npm install
```

## 开发模式

```bash
npm run dev
```

## 构建生产环境

```bash
npm run build
```

## 代码检查

```bash
npm run lint
```

## 核心功能

### 1. 权限管理

- 基于 RBAC 的权限模型
- 支持菜单权限和按钮级权限
- 支持动态路由生成

### 2. 组件封装

- **BasicTable**: 封装表格，支持分页、排序、筛选
- **BasicForm**: 封装表单，支持表单验证、动态字段
- **BasicSearch**: 封装搜索，支持多条件组合查询
- **BasicDialog**: 封装弹窗，支持不同类型的弹窗交互

### 3. 自定义指令

- **v-permission**: 权限控制
- **v-debounce**: 防抖
- **v-throttle**: 节流

### 4. Hooks

- **useTable**: 表格数据管理
- **useForm**: 表单数据管理
- **useDialog**: 弹窗管理

## 浏览器支持

- Chrome >= 80
- Firefox >= 75
- Safari >= 13
- Edge >= 80

## 许可证

MIT