loT-demo/README.md

# 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
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

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

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

---

## ⚙️ 服务器配置说明

### 配置文件位置

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

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

### 配置项说明

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

```bash
# 服务器域名
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` 打包

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

```bash
# 修改前
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` 文件中的默认值：

```typescript
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` 文件中设置：

```bash
# 设置自定义标题
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：

```typescript
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请求示例

```typescript
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