# RM-frontend

**Repository Path**: ukiot/rm-frontend

## Basic Information

- **Project Name**: RM-frontend
- **Description**: 一个基于Vue3和Element Plus构建的现代化机器人管理系统前端项目。前端框架学习参考。


- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-07-10
- **Last Updated**: 2025-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 机器人管理系统前端

一个基于Vue3和Element Plus构建的现代化机器人管理系统前端项目。

![基础框架](images/01.gif)
## 🚀 项目特性

- **现代化技术栈**: Vue3 + TypeScript + Vite
- **UI框架**: Element Plus
- **状态管理**: Pinia
- **路由管理**: Vue Router
- **网络请求**: Axios
- **图表可视化**: ECharts
- **主题切换**: 支持亮色/暗色模式
- **响应式设计**: 适配各种设备
- **炫酷动画**: 丰富的交互效果

## 📁 项目结构

```
frontend/
├── src/
│   ├── components/         # 通用组件
│   ├── layouts/           # 布局组件
│   ├── views/             # 页面组件
│   │   ├── Login/         # 登录页面
│   │   ├── Dashboard/     # 仪表盘
│   │   ├── System/        # 系统管理
│   │   └── Robot/         # 机器人管理
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理
│   ├── utils/             # 工具函数
│   ├── styles/            # 全局样式
│   └── main.ts            # 入口文件
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md
```

## 🛠️ 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

项目将在 `http://localhost:3000` 启动。

### 构建生产版本

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 🎯 功能模块

### 1. 登录系统
- 用户身份验证
- 主题切换
- 响应式设计
- 优雅的动画效果

### 2. 仪表盘
- 实时数据统计
- 数据可视化图表
- 系统监控信息
- 活动日志记录

### 3. 系统管理
- 用户管理
- 角色权限配置
- 系统监控
- 日志管理

### 4. 机器人管理
- 机器人列表展示
- 状态监控
- 远程控制
- 数据筛选和搜索

## 🎨 主题特性

### 亮色/暗色模式
- 支持自动检测系统主题
- 手动切换主题
- 主题状态持久化
- 平滑的过渡动画

### 炫酷样式
- 渐变背景
- 悬停效果
- 加载动画
- 响应式布局

## 🔧 配置说明

### 环境变量

创建 `.env` 文件：

```env
# API基础URL
VITE_API_BASE_URL=http://localhost:8080/api

# 应用标题
VITE_APP_TITLE=机器人管理系统
```

### 主题配置

在 `src/styles/index.scss` 中自定义主题变量：

```scss
:root {
  --primary-color: #409eff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #909399;
}
```

## 📱 响应式设计

项目支持多种设备尺寸：
- 桌面端 (>= 1200px)
- 平板端 (768px - 1199px)
- 手机端 (< 768px)

## 🔐 路由守卫

- 自动检查用户登录状态
- 未登录用户重定向到登录页
- 已登录用户无法访问登录页

## 🌟 使用技巧

### 1. 登录信息
- 默认用户名：`admin`
- 默认密码：`123456`

### 2. 主题切换
- 点击顶部导航栏的主题切换按钮
- 支持亮色/暗色模式切换

### 3. 数据展示
- 仪表盘数据会自动刷新
- 机器人状态实时更新
- 系统监控数据动态变化

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 📞 联系我们

如有问题或建议，请通过以下方式联系：

- 邮箱: ukiot@ukiot.cn
- 团队: UKIOT

---

**祝您使用愉快！** 🎉