8.1 KiB

Raw Permalink Blame History

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 - 智能控制系统

如何修改域名和端口

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

打开 .env.production 文件
修改 VITE_DOMAIN 为新的域名
修改 VITE_PORT 为新的端口
修改 VITE_BASE_PATH 为新的部署路径
重新执行 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"以区分
生产环境	设置为正式的产品名称
多租户部署	可根据不同客户动态设置不同标题

注意事项

环境区分：开发环境使用 .env.development，生产环境使用 .env.production
重新启动：修改环境变量后需要重启开发服务器或重新构建
编码问题：标题支持中文字符，无需额外编码处理
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()

部署注意事项

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

响应式设计

项目支持多种屏幕尺寸：

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

Mock数据

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

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

演示说明

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

浏览器支持

Chrome (推荐)
Firefox
Safari
Edge

许可证

MIT License

8.1 KiB Raw Permalink Blame History Unescape Escape