# LTD-admin-element

**Repository Path**: ltd_1/ltd-admin-element

## Basic Information

- **Project Name**: LTD-admin-element
- **Description**: LTD-admin-element 是一个基于 Element UI 的后台管理模板，提供丰富的组件和简洁的界面，帮助开发者快速搭建企业级应用。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-17
- **Last Updated**: 2026-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

# LTD Admin

一款基于 Vue 3 + Element Plus 的后台管理快速开发框架

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
[![Vue.js](https://img.shields.io/badge/Vue-3.5-42b883?logo=vue.js)](https://vuejs.org/)
[![Element Plus](https://img.shields.io/badge/Element%20Plus-2.9-409eff?logo=element-plus)](https://element-plus.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-3178c6?logo=typescript)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Vite-6-646cff?logo=vite)](https://vitejs.dev/)

</div>

---

## 简介

LTD Admin 是一个基于 Vue 3 Composition API 的后台管理系统快速开发框架，对接若依（RuoYi）后端框架，提供开箱即用的布局系统、权限管理、主题定制和代码生成能力。

## 特性

- **多布局模式**：经典布局、横向菜单、混合菜单、分栏布局，一键切换
- **主题定制**：动态主题色切换 + 暗黑模式支持
- **多页签导航**：TagsView 标签页，支持 keep-alive 页面状态缓存
- **权限管理**：路由级 + 按钮级权限控制，动态路由加载
- **国际化**：vue-i18n 中英文切换
- **全局配置面板**：可视化配置布局、主题、页签、页脚等
- **代码生成器**：根据数据库表结构快速生成 CRUD 页面
- **系统管理**：用户、角色、菜单、部门、字典、参数管理
- **系统监控**：在线用户、定时任务、服务监控

## 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | ^3.5 | Composition API + `<script setup>` |
| Vite | ^6.x | 下一代前端构建工具 |
| TypeScript | ^5.7 | 类型安全 |
| Element Plus | ^2.9 | UI 组件库 |
| Pinia | ^3.x | 状态管理 |
| Vue Router | ^4.5 | 路由管理 |
| Axios | ^1.8 | HTTP 请求 |
| SCSS | ^1.83 | CSS 预处理器 |
| vue-i18n | ^10.x | 国际化 |

## 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0 或 pnpm >= 8.0.0

### 安装

```bash
# 克隆仓库
git clone https://gitee.com/ltd_1/ltd-admin-element.git

# 进入项目目录
cd ltd-admin-element

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

浏览器访问 http://localhost:5173

### 构建部署

```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

## 目录结构

```
src/
├── api/              # 接口定义
├── assets/           # 静态资源
├── components/       # 全局公共组件
├── composables/      # 组合式函数 (Hooks)
├── directives/       # 自定义指令
├── hooks/            # 全局 Hooks
├── i18n/             # 国际化配置
├── layout/           # 布局组件
├── plugins/          # 插件注册
├── router/           # 路由配置
├── store/            # Pinia 状态管理
├── template/         # 代码生成模板
├── utils/            # 工具函数
└── views/            # 页面视图
```

## 布局模式

| 经典布局 | 横向菜单 | 混合菜单 | 分栏布局 |
|---------|---------|---------|---------|
| 侧边栏 + 顶栏 | 顶部横向菜单 | 一级顶部 + 二级侧边 | 侧边栏分栏 |

通过右上角齿轮图标打开全局配置面板，实时切换布局模式。

## 对接后端

本框架对接 [若依分离版](https://gitee.com/y_project/RuoYi-Vue) 后端，主要对接内容：

- JWT Token 认证
- 动态路由加载（菜单接口）
- 权限标识验证
- 字典数据接口
- 文件上传接口

修改 `.env.development` 中的 `VITE_APP_PROXY_TARGET` 为你的后端地址即可。

## 浏览器支持

| 浏览器 | 版本 |
|--------|------|
| Chrome | >= 87 |
| Firefox | >= 78 |
| Safari | >= 14 |
| Edge | >= 88 |

## 参与贡献

请阅读 [CONTRIBUTING.md](./CONTRIBUTING.md) 了解如何参与贡献。

## 开源协议

本项目采用 [MIT 许可证](./LICENSE) 开源协议。