chenxing/mi-home-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

docs: restructure readme to improve project documentation clarity

Browse Source
This commit is contained in:
shenghuo2
2025-06-21 15:05:01 +08:00
parent f72cc369ac
commit f8452b319c
1 changed files with 144 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

361
README.md
View File

@ -2,114 +2,106 @@
**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**
这是一个基于纯HTML、CSS和JavaScript开发的米家app界面仿制项目，用于课程设计展示。
基于纯HTML、CSS和JavaScript开发的米家App界面仿制项目，采用模块化设计和响应式布局。
## 项目特色
## 🏗️ 项目架构
### 🎨 界面设计
- 完全仿制米家app的UI设计风格
- 响应式布局，适配移动端设备
- 现代化的渐变色彩和圆角设计
- 流畅的动画效果和交互反馈
### 📱 功能模块
#### 1. 米家首页 (home.html) - 设备控制中心
- 房间切换导航（全屋、出租屋、十五中、客厅、卧室）
- 空气质量显示和环境监测
- 智能设备网格展示
- 设备状态控制（开关、离线状态）
- 温湿度传感器实时数据
- 蓝牙连接状态指示
- 设备分类管理
#### 2. 智能场景页面 (scene.html)
- 四个导航标签：智能推荐、语音通知、智能清洁、智能控制
- 主场景卡片："欢迎回家"场景展示
- 设备项目展示：空气净化器、小爱音箱等
- 推荐场景卡片：
- 洗衣监测：洗衣机状态监控
- 一键起灯：智能照明控制
- 轻松家务：家务自动化
- 护眼开灯：护眼模式照明
- 产品网格展示和推荐
- 响应式设计和动画效果
#### 3. 米家众测页面 (mijiazhongce.html)
- 众测产品展示（6个产品卡片）
- 产品信息：期数、状态、市场价格、名额
- 申请者头像和申请人数显示
- 产品状态标识：新品试用、已结束、0元抽奖
- 特殊标记：我的众测、免费试用等
- 卡片式布局和交互动画
#### 4. 个人资料页面 (user-profile.html)
- 大头像展示和编辑功能
- 基础资料管理：头像、账号、姓名
- 账号绑定：微信账号绑定状态
- 密保资料：手机号、账号安全
- 注销登录功能
- 开关按钮交互效果
#### 5. 个人中心 (profile.html)
- 用户信息展示（可点击跳转到详细资料页面）
- 功能快捷入口：智能场景、米家众测、产品百科、全屋智能
- 小米室外摄像机4C众测推广
- 设置菜单：共享、设备耗材、语音设置、我的有品、家庭网络、中枢与网关、设置
#### 6. 商城页面 (mall.html)
- 直接嵌入小米官方商城页面
- 完整的购物体验
#### 7. 通知中心页面 (notifications.html)
- 家庭成员选择器和消息分类
- 消息状态管理：未读消息计数、全部标记已读
- 消息列表展示：场景、设备、安全、系统消息
- 消息类型图标和时间显示
- 空状态页面和动画效果
- 橙色主题配色方案
#### 8. 环境设置页面 (environment-settings.html)
- 家庭环境信息设置和管理
- 分区域环境监测：客厅、卧室、厨房、空气质量、空调
- 设备状态显示和控制
- 温度、湿度、空气质量数据展示
- 响应式布局和渐变背景设计
#### 9. 其他功能页面
- **智能页面** (smart.html)：智能设备管理
- **产品页面** (product.html)：产品展示和介绍
- **设置页面** (settings.html)：应用设置和配置
- **全部产品页面** (all-products.html)：完整产品目录
- **日志页面** (log.html)：系统日志和历史记录
### 🛠 技术特点
#### 前端技术栈
### 核心技术栈
- **HTML5**: 语义化标签，良好的页面结构
- **CSS3**:
- Flexbox和Grid布局
- CSS变量和渐变
- 动画和过渡效果
- 响应式设计
- **JavaScript ES6+**:
- 模块化代码组织
- 事件驱动编程
- DOM操作和状态管理
- 定时器和异步处理
- **CSS3**: Flexbox/Grid布局，CSS变量，动画过渡
- **JavaScript ES6+**: 模块化代码，事件驱动，DOM操作
#### 设计模式
- 组件化思维
- 状态管理
- 事件委托
- 响应式设计原则
### 📱 页面模块
#### 核心模块 (底部导航栏)
- **index.html** - 米家首页：设备控制中心，房间切换，环境监测
- **smart.html** - 智能页面：设备管理，日志查看
- **product.html** - 产品页面：产品展示，分类浏览
- **mall.html** - 商城页面：嵌入小米官方商城
- **profile.html** - 个人中心：用户信息，功能入口
#### 功能子页面
- **notifications.html** - 通知中心：消息管理，状态更新
- **environment-settings.html** - 环境设置：分区域监测，数据展示
- **scene.html** - 智能场景：场景管理，自动化控制
- **user-profile.html** - 个人资料：用户信息编辑
- **mijiazhongce.html** - 米家众测：产品试用申请
- **log.html** - 设备日志：开关记录，历史数据
- **settings.html** - 设置页面：应用配置
- **all-products.html** - 全部产品：产品目录
- **product-encyclopedia.html** - 产品百科：产品知识
- **whole-house-smart.html** - 全屋智能：智能解决方案
## 💻 核心代码解释
### JavaScript 主要功能 (scripts/main.js)
#### 1. 页面切换系统
```javascript
function showPage(pageId) {
// 隐藏所有页面，显示目标页面
const pages = document.querySelectorAll('.container');
pages.forEach(page => page.classList.add('hidden'));
document.getElementById(pageId)?.classList.remove('hidden');
updateBottomNav(pageId);
}
```
#### 2. 设备控制逻辑
```javascript
function toggleDevice(deviceElement) {
deviceElement.classList.toggle('active');
// 模拟设备状态切换，更新UI显示
const statusElement = deviceElement.querySelector('.device-status');
// 状态更新逻辑...
}
```
#### 3. 实时数据更新
```javascript
// 每30秒更新传感器数据
setInterval(updateSensorData, 30000);
function updateSensorData() {
// 模拟温湿度数据变化
const newTemp = (currentTemp + (Math.random() - 0.5) * 2).toFixed(1);
}
```
### CSS 样式架构 (styles/)
#### 1. 全局样式 (common.css)
```css
/* 移动端优先的响应式设计 */
.container {
max-width: 414px;
margin: 0 auto;
min-height: 100vh;
padding-bottom: 80px;
}
```
#### 2. 组件化样式
- **设备卡片**: 统一的卡片样式，支持状态切换
- **底部导航**: 固定定位，支持页面切换
- **渐变背景**: CSS变量实现主题色彩
### HTML 结构设计
#### 1. 语义化标签
- 使用 `<main>`, `<section>`, `<article>` 等语义化标签
- 良好的可访问性支持
#### 2. 模块化组件
- 设备卡片组件复用
- 导航组件统一管理
- 页面容器标准化
## 项目结构
```
project-fin-takeaway/
├── index.html # 项目入口页面
├── home.html # 米家首页 - 设备控制中心
├── index.html # 米家首页 - 设备控制中心
├── home.html # 备用首页文件
├── smart.html # 智能页面
├── product.html # 产品页面
├── mall.html # 商城页面
@ -121,7 +113,9 @@ project-fin-takeaway/
├── environment-settings.html # 环境设置页面
├── settings.html # 设置页面
├── all-products.html # 全部产品页面
├── log.html # 日志页面
├── product-encyclopedia.html # 产品百科页面
├── whole-house-smart.html # 全屋智能页面
├── log.html # 设备开关日志页面
├── styles/ # 样式文件目录
│ ├── common.css # 公共样式
│ ├── main.css # 主样式文件
@ -137,6 +131,8 @@ project-fin-takeaway/
│ ├── environment-settings.css # 环境设置样式
│ ├── settings.css # 设置页面样式
│ ├── all-products.css # 全部产品样式
│ ├── product-encyclopedia.css # 产品百科样式
│ ├── whole-house-smart.css # 全屋智能样式
│ └── log.css # 日志页面样式
├── scripts/ # JavaScript文件目录
│ └── main.js # 主JavaScript文件
@ -148,45 +144,8 @@ project-fin-takeaway/
└── README.md # 项目说明文档
```
## 功能演示
## 🚀 快速启动
### 设备控制
- 点击设备卡片可以切换设备状态
- 智能插座支持电源开关控制
- 传感器数据每30秒自动更新
- 设备离线状态显示
- 房间切换和设备分类管理
### 智能场景
- 四个导航标签切换：智能推荐、语音通知、智能清洁、智能控制
- 主场景卡片展示和设备项目管理
- 推荐场景卡片交互和产品网格展示
- 响应式布局和动画效果
### 米家众测
- 众测产品卡片展示和状态标识
- 申请者信息和申请人数显示
- 产品详情查看和申请功能
- 特殊标记和状态区分
### 个人资料管理
- 用户头像点击跳转到详细资料页面
- 大头像展示和编辑功能
- 基础资料、账号绑定、密保资料管理
- 开关按钮交互和注销登录
### 页面导航
- 底部导航栏支持页面切换
- 平滑的页面过渡效果
- 导航状态同步更新
- 多级页面跳转和返回功能
## 使用方法
### 快速启动
1. **直接打开**: 在浏览器中打开 `index.html` 文件
2. **本地服务器**: 使用任意HTTP服务器托管项目文件
```bash
# 使用Python启动本地服务器
python3 -m http.server 8000
@ -194,101 +153,57 @@ project-fin-takeaway/
# 使用Node.js http-server
npx http-server
# 使用Live Server (VS Code扩展)
# 右键点击index.html -> Open with Live Server
# 或直接在浏览器中打开 index.html
```
### 页面导航
## 🗺️ 页面关系图
- **入口页面**: `index.html` - 项目主入口
- **米家首页**: `home.html` - 设备控制中心
- **智能场景**: `scene.html` - 智能场景管理
- **米家众测**: `mijiazhongce.html` - 众测产品展示
- **个人中心**: `profile.html` - 用户信息和设置
- **个人资料**: `user-profile.html` - 详细个人资料管理
- **通知中心**: `notifications.html` - 消息通知和管理
- **环境设置**: `environment-settings.html` - 家庭环境信息设置
- **商城页面**: `mall.html` - 购物和产品浏览
```
智能家居项目
├── 🏠 核心模块 (底部导航)
│ ├── index.html ──── 米家首页
│ │ ├── → notifications.html
│ │ └── → environment-settings.html
│ ├── smart.html ──── 智能页面
│ │ └── → log.html
│ ├── product.html ── 产品页面
│ │ └── → all-products.html
│ ├── mall.html ───── 商城页面
│ └── profile.html ── 个人中心
│ ├── → user-profile.html
│ ├── → scene.html
│ ├── → mijiazhongce.html
│ ├── → product-encyclopedia.html
│ ├── → whole-house-smart.html
│ └── → settings.html
└── 📁 资源文件
├── styles/ ──── CSS样式
├── scripts/ ─── JavaScript
└── images/ ──── 图片资源
```
### 功能体验
### 导航逻辑
- **底部导航**: 5个主模块间切换
- **页面跳转**: 通过点击事件触发 `showPage()` 函数
- **状态管理**: `updateBottomNav()` 同步导航状态
1. **设备控制**: 在首页点击设备卡片体验开关控制
2. **环境监测**: 点击首页空气质量模块跳转到环境设置页面
3. **消息通知**: 点击首页右上角消息图标查看通知中心
4. **场景管理**: 访问智能场景页面体验场景切换和推荐
5. **众测参与**: 查看米家众测页面的产品信息和申请状态
6. **个人资料**: 点击个人中心的头像或用户名进入详细资料页面
7. **页面跳转**: 使用底部导航栏在不同功能模块间切换
## 🎯 项目特点
### 浏览器兼容性
- **高度还原**: 像素级仿制米家App界面
- **响应式设计**: 移动端优先，适配多屏幕
- **模块化架构**: 组件复用，易于维护
- **实时交互**: 设备状态切换，数据动态更新
- **触摸优化**: 移动端触摸反馈和动画效果
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
## 📝 开发说明
### 移动端体验
项目采用响应式设计，建议在移动设备或浏览器开发者工具的移动设备模拟模式下体验，以获得最佳的米家App仿制效果。
## 项目亮点
### 1. 高度还原
- 像素级还原米家app界面
- 保持原有的交互逻辑
- 符合用户使用习惯
### 2. 交互体验
- 触摸反馈效果
- 流畅的动画过渡
- 实时状态更新
- 友好的提示信息
### 3. 代码质量
- 清晰的代码结构
- 良好的注释说明
- 模块化设计
- 易于维护和扩展
### 4. 响应式设计
- 适配不同屏幕尺寸
- 移动端优先设计
- 灵活的布局系统
### 5. 最新优化
- 统一的橙色主题配色方案
- 修复了设备卡片文字与按钮重叠问题
- 优化了空气质量显示格式
- 增强了页面间的导航体验
- 完善了消息通知系统
## 扩展功能
项目预留了扩展接口，可以轻松添加以下功能：
- 🔐 用户登录和权限管理
- 📊 设备数据统计和图表
- 🔔 消息推送和通知
- 🎵 语音控制集成
- 🌐 云端数据同步
- 📱 PWA支持
## 开发说明
这是一个纯前端项目，所有的数据都是模拟数据，主要用于展示界面效果和交互逻辑。在实际应用中，需要：
1. 集成真实的设备API
2. 添加用户认证系统
3. 实现数据持久化
4. 添加错误处理机制
5. 优化性能和安全性
## 致谢
感谢小米公司提供的优秀设计参考，本项目仅用于学习和课程设计目的。
- 纯前端项目，使用模拟数据展示
- 采用事件驱动的交互模式
- 支持Chrome 60+, Firefox 55+, Safari 12+
- 建议在移动设备模拟模式下体验
---
**注意**: 本项目仅供学习交流使用，不得用于商业用途。
**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**
**枣庄学院移动应用开发技术实训 - 课程设计作业**