docs: update readme with detailed project structure and features

2025-06-21 10:40:24 +08:00
parent ccb4cf909f
commit f72cc369ac
1 changed files with 169 additions and 37 deletions
--- a/README.md
+++ b/README.md
@ -1,5 +1,7 @@
 # 米家智能家居 - 课程设计项目

+**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**
+
 这是一个基于纯HTML、CSS和JavaScript开发的米家app界面仿制项目，用于课程设计展示。

 ## 项目特色
@ -12,37 +14,75 @@

 ### 📱 功能模块

-#### 1. 首页 - 设备控制
+#### 1. 米家首页 (home.html) - 设备控制中心
 - 房间切换导航（全屋、出租屋、十五中、客厅、卧室）
- 空气质量显示
+- 空气质量显示和环境监测
 - 智能设备网格展示
 - 设备状态控制（开关、离线状态）
 - 温湿度传感器实时数据
 - 蓝牙连接状态指示
+- 设备分类管理

-#### 2. 智能场景页面
- 推荐场景和自定义场景切换
- 预设智能场景：
-  - 离家：关灯、开安防、开始清扫
-  - 回家：开灯、开空调、关闭窗帘
-  - 晚安：关灯、关电器、安心入睡
-  - 起床：开灯、开窗帘、活力唤醒
-  - 夜间勿扰：降低媒体音、关闭声光提示
-  - 运动：开空调除净、舒爽运动
-  - 结束运动：关空调除净、省心省力
- 一键执行场景功能
- 自定义场景创建
+#### 2. 智能场景页面 (scene.html)
+- 四个导航标签：智能推荐、语音通知、智能清洁、智能控制
+- 主场景卡片："欢迎回家"场景展示
+- 设备项目展示：空气净化器、小爱音箱等
+- 推荐场景卡片：
+  - 洗衣监测：洗衣机状态监控
+  - 一键起灯：智能照明控制
+  - 轻松家务：家务自动化
+  - 护眼开灯：护眼模式照明
+- 产品网格展示和推荐
+- 响应式设计和动画效果

-#### 3. 商城页面
- 直接嵌入小米官方商城页面
- 完整的购物体验
+#### 3. 米家众测页面 (mijiazhongce.html)
+- 众测产品展示（6个产品卡片）
+- 产品信息：期数、状态、市场价格、名额
+- 申请者头像和申请人数显示
+- 产品状态标识：新品试用、已结束、0元抽奖
+- 特殊标记：我的众测、免费试用等
+- 卡片式布局和交互动画

-#### 4. 个人中心
- 用户信息展示
+#### 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)：系统日志和历史记录
+
 ### 🛠 技术特点

 #### 前端技术栈
@ -68,12 +108,44 @@

 ```
 project-fin-takeaway/
-├── index.html          # 主页面文件
-├── styles/
-│   └── main.css       # 主样式文件
-├── scripts/
-│   └── main.js        # 主JavaScript文件
-└── README.md          # 项目说明文档
+├── index.html              # 项目入口页面
+├── home.html               # 米家首页 - 设备控制中心
+├── smart.html              # 智能页面
+├── product.html            # 产品页面
+├── mall.html               # 商城页面
+├── profile.html            # 个人中心页面
+├── scene.html              # 智能场景页面
+├── mijiazhongce.html       # 米家众测页面
+├── user-profile.html       # 个人资料详情页面
+├── notifications.html      # 通知中心页面
+├── environment-settings.html # 环境设置页面
+├── settings.html           # 设置页面
+├── all-products.html       # 全部产品页面
+├── log.html                # 日志页面
+├── styles/                 # 样式文件目录
+│   ├── common.css          # 公共样式
+│   ├── main.css            # 主样式文件
+│   ├── home.css            # 首页样式
+│   ├── smart.css           # 智能页面样式
+│   ├── product.css         # 产品页面样式
+│   ├── mall.css            # 商城页面样式
+│   ├── profile.css         # 个人中心样式
+│   ├── scene.css           # 智能场景样式
+│   ├── mijiazhongce.css    # 米家众测样式
+│   ├── user-profile.css    # 个人资料样式
+│   ├── notifications.css   # 通知中心样式
+│   ├── environment-settings.css # 环境设置样式
+│   ├── settings.css        # 设置页面样式
+│   ├── all-products.css    # 全部产品样式
+│   └── log.css             # 日志页面样式
+├── scripts/                # JavaScript文件目录
+│   └── main.js             # 主JavaScript文件
+├── images/                 # 图片资源目录
+│   └── profile/            # 个人中心相关图片
+│       ├── mijiazhongce/   # 米家众测图片
+│       └── zhinengchangjing/ # 智能场景图片
+├── .gitignore              # Git忽略文件配置
+└── README.md               # 项目说明文档
 ```

 ## 功能演示
@ -83,30 +155,81 @@ project-fin-takeaway/
 - 智能插座支持电源开关控制
 - 传感器数据每30秒自动更新
 - 设备离线状态显示
+- 房间切换和设备分类管理

-### 场景执行
- 点击场景执行按钮触发场景
- 显示执行进度和完成提示
- 支持自定义场景创建
+### 智能场景
+- 四个导航标签切换：智能推荐、语音通知、智能清洁、智能控制
+- 主场景卡片展示和设备项目管理
+- 推荐场景卡片交互和产品网格展示
+- 响应式布局和动画效果
+
+### 米家众测
+- 众测产品卡片展示和状态标识
+- 申请者信息和申请人数显示
+- 产品详情查看和申请功能
+- 特殊标记和状态区分
+
+### 个人资料管理
+- 用户头像点击跳转到详细资料页面
+- 大头像展示和编辑功能
+- 基础资料、账号绑定、密保资料管理
+- 开关按钮交互和注销登录

 ### 页面导航
 - 底部导航栏支持页面切换
 - 平滑的页面过渡效果
 - 导航状态同步更新
+- 多级页面跳转和返回功能

 ## 使用方法

+### 快速启动
+
 1. **直接打开**: 在浏览器中打开 `index.html` 文件
 2. **本地服务器**: 使用任意HTTP服务器托管项目文件
-3. **移动端体验**: 在移动设备浏览器中访问，获得最佳体验
+   ```bash
+   # 使用Python启动本地服务器
+   python3 -m http.server 8000
+   
+   # 使用Node.js http-server
+   npx http-server
+   
+   # 使用Live Server (VS Code扩展)
+   # 右键点击index.html -> Open with Live Server
+   ```

-## 浏览器兼容性
+### 页面导航

- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- ✅ 移动端浏览器
+- **入口页面**: `index.html` - 项目主入口
+- **米家首页**: `home.html` - 设备控制中心
+- **智能场景**: `scene.html` - 智能场景管理
+- **米家众测**: `mijiazhongce.html` - 众测产品展示
+- **个人中心**: `profile.html` - 用户信息和设置
+- **个人资料**: `user-profile.html` - 详细个人资料管理
+- **通知中心**: `notifications.html` - 消息通知和管理
+- **环境设置**: `environment-settings.html` - 家庭环境信息设置
+- **商城页面**: `mall.html` - 购物和产品浏览
+
+### 功能体验
+
+1. **设备控制**: 在首页点击设备卡片体验开关控制
+2. **环境监测**: 点击首页空气质量模块跳转到环境设置页面
+3. **消息通知**: 点击首页右上角消息图标查看通知中心
+4. **场景管理**: 访问智能场景页面体验场景切换和推荐
+5. **众测参与**: 查看米家众测页面的产品信息和申请状态
+6. **个人资料**: 点击个人中心的头像或用户名进入详细资料页面
+7. **页面跳转**: 使用底部导航栏在不同功能模块间切换
+
+### 浏览器兼容性
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+### 移动端体验
+
+项目采用响应式设计，建议在移动设备或浏览器开发者工具的移动设备模拟模式下体验，以获得最佳的米家App仿制效果。

 ## 项目亮点

@ -132,6 +255,13 @@ project-fin-takeaway/
 - 移动端优先设计
 - 灵活的布局系统

+### 5. 最新优化
+- 统一的橙色主题配色方案
+- 修复了设备卡片文字与按钮重叠问题
+- 优化了空气质量显示格式
+- 增强了页面间的导航体验
+- 完善了消息通知系统
+
 ## 扩展功能

 项目预留了扩展接口，可以轻松添加以下功能：
@ -159,4 +289,6 @@ project-fin-takeaway/

 ---

-**注意**: 本项目仅供学习交流使用，不得用于商业用途。
+**注意**: 本项目仅供学习交流使用，不得用于商业用途。
+
+**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**