# admin-template

**Repository Path**: liuyuhang11/admin-template

## Basic Information

- **Project Name**: admin-template
- **Description**: 后台管理系统模板......
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智慧楼宇管理系统
使用的AI工具：Cursor、Deepseek

一个现代化的智慧楼宇管理系统，提供登录认证、数据监控、设备管理等功能。

## 功能特性

### 🔐 用户认证
- 现代化的登录界面
- 记住密码功能
- 路由守卫保护
- 安全的退出登录

### 📊 数据监控
- 实时数据概览
- 能耗监控图表
- 设备状态监控
- 告警信息管理

### 🎨 界面设计
- 响应式设计，支持多设备
- 现代化UI设计
- 流畅的动画效果
- 直观的数据可视化

## 技术栈

- **前端框架**: Vue.js 2.x
- **路由管理**: Vue Router
- **状态管理**: Vuex
- **UI组件**: Element UI
- **图表库**: ECharts
- **样式**: SCSS

## 项目结构

```
src/
├── views/
│   ├── HomeView.vue          # 登录页面
│   ├── Dashboard.vue         # 仪表板页面
│   ├── ProductDetail.vue     # 产品详情页
│   └── BigScreen.vue         # 大屏展示页
├── router/
│   └── index.js             # 路由配置
├── store/
│   └── index.js             # 状态管理
├── api/
│   └── user.js              # 用户相关API
├── utils/
│   └── request.js           # 请求工具
└── styles/
    ├── index.scss           # 全局样式
    ├── variables.scss       # 样式变量
    └── mixins.scss          # 样式混入
```

## 快速开始

### 安装依赖
```bash
npm install
```

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

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

## 使用说明

### 1. 登录系统
- 访问首页 `/` 进入登录页面
- 输入用户名和密码
- 可选择"记住密码"功能
- 点击登录按钮进入系统

### 2. 仪表板功能
- **数据概览**: 查看楼宇总数、能耗、温度、设备状态等关键指标
- **实时监控**: 监控能耗变化和设备运行状态
- **告警管理**: 查看和处理系统告警信息

### 3. 退出登录
- 点击右上角的"退出登录"按钮
- 确认后返回登录页面

## 路由说明

| 路由 | 页面 | 需要认证 | 说明 |
|------|------|----------|------|
| `/` | 登录页 | 否 | 系统登录入口 |
| `/dashboard` | 仪表板 | 是 | 主要功能页面 |
| `/product` | 产品详情 | 否 | 产品介绍页面 |
| `/bigscreen` | 大屏展示 | 否 | 数据大屏展示 |

## 开发说明

### 添加新页面
1. 在 `src/views/` 目录下创建新的Vue组件
2. 在 `src/router/index.js` 中添加路由配置
3. 设置 `meta.requiresAuth` 属性控制是否需要登录

### 样式规范
- 使用SCSS编写样式
- 遵循BEM命名规范
- 响应式设计优先
- 使用CSS变量管理主题色彩

### 组件开发
- 组件名称使用多词命名
- 使用props传递数据
- 使用emit发送事件
- 添加适当的注释

## 部署说明

### 生产环境部署
1. 执行构建命令生成静态文件
2. 将 `dist` 目录部署到Web服务器
3. 配置服务器支持Vue Router的history模式

### 环境变量配置
- 创建 `.env.production` 文件配置生产环境变量
- 配置API接口地址
- 设置其他环境相关配置

## 浏览器支持

- Chrome >= 60
- Firefox >= 60
- Safari >= 12
- Edge >= 79

## 许可证

MIT License

## 联系方式

如有问题或建议，请联系开发团队。