IoT Smart Control - 智能家居控制系统

一个现代化的智能家居控制前端演示项目，支持空调控制、照明控制、能源监控和设备状态管理。

功能特性

🏠 仪表盘

• 实时显示设备在线状态统计
• 能耗趋势图表展示
• 快捷控制面板
• 设备状态概览

❄️ 空调控制

• 多设备管理
• 温度调节（16°C - 30°C）
• 运行模式切换（制冷/制热/自动/送风/除湿）
• 风速控制（低/中/高/自动）
• 摆风开关
• 定时功能
• 能耗信息展示

💡 照明控制

• 多房间灯光管理
• 亮度调节
• 色温调节
• 颜色选择
• 场景模式（日常/阅读/观影/睡眠/派对）
• 一键开关所有灯光

⚡ 能源监控

• 实时能耗数据
• 时/日/月能耗趋势图表
• 设备能耗分布饼图
• 节能提醒通知
• 费用概览

📱 设备状态

• 设备在线/离线/警告状态
• 房间筛选
• 设备类型筛选
• 信号强度显示
• 电池电量监控
• 设备详情弹窗

技术栈

• React 18 - 前端框架
• TypeScript - 类型安全
• Vite - 构建工具
• Redux Toolkit - 状态管理
• Ant Design - UI组件库
• ECharts - 数据可视化
• Tailwind CSS - 样式框架
• Framer Motion - 动画库
• React Router - 路由管理
• Axios - HTTP请求库

项目结构

src/
├── api/                  # API接口定义
│   └── index.ts
├── components/           # 可复用组件
│   ├── Charts/          # 图表组件
│   ├── Control/         # 控制组件
│   ├── Device/          # 设备组件
│   └── Layout/          # 布局组件
├── config/               # 配置文件
│   └── index.ts
├── hooks/               # 自定义Hooks
├── pages/               # 页面组件
├── store/               # Redux状态管理
├── utils/               # 工具函数
│   └── request.ts       # Axios封装
├── App.tsx
├── main.tsx
└── index.css

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000 查看应用

构建生产版本

npm run build

预览生产版本

npm run preview

---

⚙️ 服务器配置说明

配置文件位置

项目使用环境变量文件进行配置，配置文件位于项目根目录：

文件	用途
.env	默认配置
.env.development	开发环境配置
.env.production	生产环境配置

配置项说明

打开 .env.production 文件，可以看到以下配置项：

# 服务器域名
VITE_DOMAIN=ashai.com.cn

# 服务器端口
VITE_PORT=8888

# 应用部署路径前缀（必须以/开头和结尾）
VITE_BASE_PATH=/demo/

# API请求路径前缀
VITE_API_PREFIX=/demo/api

# 是否使用HTTPS (true/false)
VITE_USE_HTTPS=false

# 请求超时时间（毫秒）
VITE_TIMEOUT=30000

# 应用程序标题（未设置时使用默认值"loT Smart Control - 智能控制系统"）
VITE_APP_TITLE=loT Smart Control - 智能控制系统

如何修改域名和端口

方法一：修改环境变量文件（推荐）

1. 打开 .env.production 文件
2. 修改 VITE_DOMAIN 为新的域名
3. 修改 VITE_PORT 为新的端口
4. 修改 VITE_BASE_PATH 为新的部署路径
5. 重新执行 npm run build 打包

示例：修改为新的服务器地址

# 修改前
VITE_DOMAIN=ashai.com.cn
VITE_PORT=8888
VITE_BASE_PATH=/demo/

# 修改后
VITE_DOMAIN=myserver.example.com
VITE_PORT=9000
VITE_BASE_PATH=/iot-app/

方法二：修改代码配置文件

如果需要更灵活的配置，可以修改 src/config/index.ts 文件中的默认值：

const getConfig = (): AppConfig => {
  if (typeof __APP_CONFIG__ !== 'undefined') {
    return __APP_CONFIG__
  }
  
  // 修改这里的默认值
  return {
    domain: 'ashai.com.cn',      // 修改域名
    port: '8888',                 // 修改端口
    basePath: '/demo/',           // 修改部署路径
    apiPrefix: '/demo/api',       // 修改API前缀
    useHttps: false,              // 是否使用HTTPS
    timeout: 30000,               // 超时时间
  }
}

配置项详细说明

配置项	说明	示例值
VITE_DOMAIN	服务器域名，不含协议和端口	ashai.com.cn
VITE_PORT	服务器端口号	8888
VITE_BASE_PATH	应用部署的基础路径，必须以 / 开头和结尾	/demo/
VITE_API_PREFIX	API请求的路径前缀	/demo/api
VITE_USE_HTTPS	是否使用HTTPS协议	true 或 false
VITE_TIMEOUT	HTTP请求超时时间（毫秒）	30000
VITE_APP_TITLE	应用程序标题，显示在浏览器标签页，未设置时使用默认值	loT Smart Control - 智能控制系统

应用程序标题配置

VITE_APP_TITLE 用于自定义浏览器标签页显示的应用程序标题。

配置方法

在 .env.development 或 .env.production 文件中设置：

# 设置自定义标题
VITE_APP_TITLE=IoT Smart Control - 智能控制系统

默认值机制

如果未配置 VITE_APP_TITLE 或将其留空，应用程序将使用默认标题 "loT Smart Control - 智能控制系统"。

适用场景

场景	建议配置
开发环境	可设置为项目名称，便于开发者识别
测试环境	可设置为"测试环境 - xxx"以区分
生产环境	设置为正式的产品名称
多租户部署	可根据不同客户动态设置不同标题

注意事项

1. 环境区分：开发环境使用 .env.development，生产环境使用 .env.production
2. 重新启动：修改环境变量后需要重启开发服务器或重新构建
3. 编码问题：标题支持中文字符，无需额外编码处理
4. HTML 预设：index.html 中设置了默认标题作为初始值，JavaScript 加载后会覆盖

访问路径示例

根据默认配置，构建后的访问路径为：

类型	URL
应用首页	http://ashai.com.cn:8888/demo/
API基础路径	http://ashai.com.cn:8888/demo/api

使用配置的API

在代码中使用配置好的API：

import { getApiBaseUrl, getServerBaseUrl, getBasePath } from '@/config'

// 获取API基础URL
console.log(getApiBaseUrl())      // http://ashai.com.cn:8888/demo/api

// 获取服务器基础URL
console.log(getServerBaseUrl())   // http://ashai.com.cn:8888

// 获取应用部署路径
console.log(getBasePath())        // /demo/

API请求示例

import { deviceApi, airConditioningApi, lightingApi, energyApi } from '@/api'

// 获取设备列表
const devices = await deviceApi.getList()

// 设置空调温度
await airConditioningApi.setTemperature('ac-1', 24)

// 设置灯光亮度
await lightingApi.setBrightness('light-1', 80)

// 获取能耗数据
const energyData = await energyApi.getDailyData()

部署注意事项

1. 路径匹配：确保 VITE_BASE_PATH 与服务器上的部署路径一致
2. 跨域配置：如果前后端分离部署，需要配置CORS
3. HTTPS：生产环境建议启用HTTPS，设置 VITE_USE_HTTPS=true
4. 重新打包：每次修改配置后都需要重新执行 npm run build

---

响应式设计

项目支持多种屏幕尺寸：

• 桌面端 (>1200px): 完整侧边栏，多列布局
• 平板端 (768px - 1200px): 可折叠侧边栏，双列布局
• 移动端 (<768px): 抽屉式菜单，单列布局

Mock数据

所有数据均为模拟数据，包括：

• 空调设备列表和状态
• 照明设备列表和状态
• 能耗历史数据
• 设备状态信息

演示说明

1. 点击侧边栏导航切换不同功能模块
2. 在空调控制页面可以调节温度、切换模式等
3. 在照明控制页面可以调节亮度、色温、颜色等
4. 在能源监控页面可以查看能耗趋势和分布
5. 在设备状态页面可以查看所有设备状态

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

许可证

MIT License