# admin-project

**Repository Path**: willes/admin-project

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-10
- **Last Updated**: 2025-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Admin Project

一个基于 Vue 3 + TypeScript + Vite 构建的现代化后台管理系统，集成了丰富的功能组件和开发工具。

## ✨ 特性

- 🚀 **现代化技术栈**：Vue 3 + TypeScript + Vite
- 🎨 **优雅的 UI**：Element Plus 组件库
- 🔒 **完善的权限管理**：动态路由 + 按钮级权限控制
- 🌓 **主题切换**：支持明暗主题无缝切换
- 📱 **响应式设计**：适配各种屏幕尺寸
- ⚡ **高性能**：Vite 构建，按需加载
- 📊 **丰富的组件**：内置 ProTable、DeptTree、ReIcon 等实用组件
- 📝 **规范的代码**：严格的 ESLint、Prettier、Stylelint 配置
- 🔧 **便捷的开发**：完善的开发工具链和自动化脚本

## 🛠️ 技术栈

| 技术         | 版本    | 说明         |
| ------------ | ------- | ------------ |
| Vue          | 3.5.22  | 前端框架     |
| TypeScript   | 5.9.3   | 类型系统     |
| Vite         | 7.1.12  | 构建工具     |
| Element Plus | 2.12.0  | UI 组件库    |
| Pinia        | 3.0.4   | 状态管理     |
| Vue Router   | 4.6.3   | 路由管理     |
| ECharts      | 6.0.0   | 图表库       |
| VXE Table    | 4.17.27 | 表格组件     |
| Axios        | 1.13.2  | HTTP 客户端  |
| Tailwind CSS | 4.1.16  | CSS 框架     |
| Sass         | 1.93.2  | CSS 预处理器 |

## 📦 快速开始

### 环境要求

- Node.js: ^20.19.0 || >=22.13.0
- pnpm: >=9

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
# 或
pnpm serve
```

访问 http://localhost:3000 (默认端口，可在 `.env` 中配置)

### 构建生产版本

```bash
# 测试环境
pnpm build:test

# 开发环境
pnpm build:dev

# 生产环境
pnpm build:prod
```

### 预览构建结果

```bash
pnpm preview
```

### 类型检查

```bash
pnpm typecheck
```

### 代码检查与格式化

```bash
# ESLint 检查并修复
pnpm lint:eslint

# Prettier 格式化
pnpm lint:format

# Stylelint 检查并修复
pnpm lint:stylelint

# 运行所有检查
pnpm lint
```

## 📁 目录结构

```
├── build/           # 构建配置
├── mock/            # 模拟数据
├── src/             # 源代码
│   ├── api/         # API 请求
│   ├── assets/      # 静态资源
│   ├── components/  # 公共组件
│   ├── config/      # 配置文件
│   ├── directives/  # 自定义指令
│   ├── hooks/       # 自定义 Hooks
│   ├── layout/      # 布局组件
│   ├── plugins/     # 插件配置
│   ├── router/      # 路由配置
│   ├── store/       # 状态管理
│   ├── style/       # 样式文件
│   ├── utils/       # 工具函数
│   ├── views/       # 页面视图
│   ├── App.vue      # 根组件
│   └── main.ts      # 入口文件
├── types/           # TypeScript 类型定义
└── ...              # 配置文件
```

## 🔑 主要功能

### 权限管理

- 基于角色的访问控制 (RBAC)
- 动态路由生成
- 按钮级权限控制
- 菜单权限管理

### 主题系统

- 明暗主题切换
- 可定制主题色
- 主题配置持久化

### 布局系统

- 垂直布局
- 水平布局
- 混合布局
- 响应式布局

### 组件库

- ProTable：高级表格组件
- DeptTree：部门树组件
- ReIcon：图标组件
- ReSegmented：分段控制器
- ReText：文本组件

### 开发工具

- 自动导入组件
- SVG 图标支持
- 代码检查与格式化
- Git 钩子
- 模拟数据

## 📋 开发规范

### 代码规范

- **TypeScript**：严格使用类型定义
- **ESLint**：遵循 `eslint-config-standard`
- **Prettier**：统一代码格式
- **Stylelint**：规范样式编写

### 提交规范

- 使用 Husky 进行提交前检查
- 遵循 Conventional Commits 规范
- 提交信息格式：`type(scope): description`

### 命名规范

- 组件名：大驼峰命名（如 `ProTable`）
- 文件命名：短横线分隔（如 `user-list.vue`）
- 变量名：小驼峰命名（如 `userInfo`）
- 常量名：全大写加下划线（如 `API_BASE_URL`）

## 🚀 构建与部署

### 构建配置

- 支持多环境构建（test、dev、prod）
- 静态资源分类打包
- 代码压缩与优化
- CDN 配置支持

### 部署方式

1. 构建生产版本：`pnpm build:prod`
2. 将 `dist` 目录部署到服务器
3. 配置 Nginx 或其他 Web 服务器

### 工具类

@willes/utils 是一个工具类库，提供了一些常用的工具函数，如打印、消息提示、日期格式化等。
详细文档请参考 [@willes/utils 文档](https://willes-utils.netlify.app/)

## 🤝 贡献

欢迎提交 Issues 和 Pull Requests！

## 📄 许可证

MIT License

## 📧 联系方式

作者：weiwei

---

**Admin Project** - 一个现代化的后台管理系统模板，助力您快速构建企业级应用！