# admin-system

**Repository Path**: zangzh/admin-system

## Basic Information

- **Project Name**: admin-system
- **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-09-28
- **Last Updated**: 2025-09-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Admin System

基于 Vue 3 + Vite 构建的管理系统前端项目，采用 Element Plus 组件库和 Windi CSS 样式框架。

## 技术栈

- Vue 3
- Vite
- Element Plus
- Windi CSS
- Vue Router
- Pinia (状态管理)
- MockJS (开发环境数据模拟)

## 目录结构

```
src/
├── assets/               # 静态资源文件
├── components/           # 公共组件
├── pages/                # 页面组件
│   ├── 404.vue           # 404页面
│   ├── about.vue         # 关于页面
│   ├── index.vue         # 主布局页面
│   ├── home.vue          # 首页
│   ├── login.vue         # 登录页面
│   ├── users.vue         # 用户管理页面
│   ├── roles.vue         # 角色管理页面
│   └── permissions.vue   # 权限管理页面
├── routers/              # 路由配置
│   └── index.js          
├── services/             # 服务层，封装API调用
├── stores/               # Pinia状态管理
├── mock/                 # Mock数据模拟
└── App.vue               # 根组件
├── main.js               # 入口文件
```

## 开发指南

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 项目特点

- 使用 Element Plus 组件库提供丰富的 UI 组件
- 集成 Windi CSS 实现原子化 CSS 样式
- 采用 Vue Router 实现前端路由管理
- 响应式布局适配不同屏幕尺寸
- 主界面采用上中下布局结构（顶部导航栏、左侧菜单、右侧主显示区域、底部页脚）
- 使用 MockJS 实现开发环境数据模拟
- 采用浅色主题设计，提供更舒适的视觉体验

## 功能模块

### 登录模块
- 用户登录验证
- 登录状态管理

### 主界面布局
- 顶部导航栏：系统Logo、用户信息展示
- 左侧菜单栏：系统功能导航，支持收缩和展开
- 右侧主显示区域：具体内容展示
- 底部页脚：版权信息

### 路由系统
- 嵌套路由实现主界面布局与内容页面分离
- 默认路由重定向机制
- 动态路由切换不刷新整个页面

### 菜单功能
- 支持手动收缩和展开左侧菜单
- 支持响应式自动收缩，当屏幕宽度小于等于768px时自动收缩菜单
- 菜单状态记忆功能，大屏幕下恢复用户设置状态

### 用户管理模块
- 用户列表展示，支持分页
- 用户创建功能，包含表单验证
- 用户编辑功能，支持数据回显和更新
- 用户删除功能，包含确认提示
- 使用MockJS模拟后端API，支持完整的CRUD操作

## 约定规范

### Git提交信息规范
遵循Commitizen规范，格式为 `<type>(<scope>): <subject>`：
- `type`：提交类型，如feat(新功能)、fix(修复)、docs(文档)、style(格式)、refactor(重构)等
- `scope`：影响范围，如login(登录)、main(主界面)等
- `subject`：简要描述，使用中文

示例：
- `feat(main): 实现主界面布局和嵌套路由功能`
- `fix(login): 修复登录验证问题`
- `feat(menu): 添加菜单收缩和响应式支持`
- `feat(users): 实现用户管理功能，支持增删改查操作`