# mtd-admin-web

**Repository Path**: yuannuoxin/mtd-admin-web

## Basic Information

- **Project Name**: mtd-admin-web
- **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-04-14
- **Last Updated**: 2026-04-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MTD Admin Web

基于 Vue 3 + TypeScript + Element Plus 的后台管理系统前端项目。

## 技术栈

- **框架**: Vue 3.5
- **语言**: TypeScript 5.9
- **UI 组件库**: Element Plus 2.13
- **构建工具**: Vite 5.4
- **状态管理**: Pinia 2.3
- **路由**: Vue Router 4.4
- **HTTP 客户端**: Axios 1.7

## 功能特性

- ✅ 用户登录认证
- ✅ 用户管理（增删改查、角色分配）
- ✅ 角色管理（增删改查、权限分配）
- ✅ 权限管理（目录/菜单/按钮/接口，树形结构）
- ✅ 动态路由和菜单
- ✅ 基于角色的访问控制（RBAC）
- ✅ 按钮级别权限控制

## 项目结构

```
src/
├── api/              # API 接口定义
│   ├── auth.ts       # 认证相关
│   ├── user.ts       # 用户管理
│   ├── role.ts       # 角色管理
│   ├── permission.ts # 权限管理
│   └── request.ts    # Axios 封装
├── router/           # 路由配置
├── stores/           # Pinia 状态管理
│   └── user.ts       # 用户状态
├── types/            # TypeScript 类型定义
│   └── common.ts     # 公共枚举和类型
├── views/            # 页面组件
│   ├── Login.vue              # 登录页
│   ├── Layout.vue             # 布局容器
│   ├── Dashboard.vue          # 仪表盘
│   ├── UserManagement.vue     # 用户管理
│   ├── RoleManagement.vue     # 角色管理
│   └── PermissionManagement.vue # 权限管理
├── App.vue           # 根组件
└── main.ts           # 入口文件
```

## 快速开始

### 环境要求

- Node.js >= 18
- Deno（可选，用于依赖管理）

### 安装依赖

```bash
npm install
# 或
deno install
```

### 开发环境运行

```bash
npm run dev
# 或
deno task dev
```

访问 http://localhost:5173

### 构建生产版本

```bash
npm run build
# 或
deno task build
```

### 预览生产构建

```bash
npm run preview
# 或
deno task preview
```

## 配置说明

### 代理配置

在 `vite.config.ts` 中配置后端 API 代理：

```typescript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    },
    '/system': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}
```

### 环境变量

创建 `.env.local` 文件配置环境变量：

```env
VITE_API_BASE_URL=http://localhost:8080
```

## 核心功能说明

### 权限类型

系统支持四种权限类型（定义在 `src/types/common.ts`）：

- **目录** (DIRECTORY = 4): 菜单分组
- **菜单** (MENU = 1): 页面路由
- **按钮** (BUTTON = 2): 操作按钮
- **接口** (API = 3): API 接口权限

### 状态管理

所有实体使用统一的状态枚举：

- **启用** (ENABLED = 1)
- **禁用** (DISABLED = 0)

### 权限控制

- 菜单级别：根据用户权限动态生成侧边栏菜单
- 按钮级别：使用 `v-if` 和权限码控制按钮显示

## 开发规范

- 使用 TypeScript 严格模式
- 组件采用 `<script setup>` 语法
- API 接口统一定义在 `src/api/` 目录
- 类型定义放在对应的 `.ts` 文件或 `src/types/` 目录
- 使用枚举替代魔法数字

## 浏览器支持

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

## License

MIT