From f8452b319ca2592063b34b2e39610c160e63fb71 Mon Sep 17 00:00:00 2001
From: shenghuo2 <1308357113@qq.com>
Date: Sat, 21 Jun 2025 15:05:01 +0800
Subject: [PATCH] docs: restructure readme to improve project documentation
 clarity

---
 README.md | 373 +++++++++++++++++++++---------------------------------
 1 file changed, 144 insertions(+), 229 deletions(-)

diff --git a/README.md b/README.md
index 6e79f39..5b3f429 100644
--- a/README.md
+++ b/README.md
@@ -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,147 +144,66 @@ project-fin-takeaway/
 └── README.md               # 项目说明文档
 ```
 
-## 功能演示
+## 🚀 快速启动
 
-### 设备控制
-- 点击设备卡片可以切换设备状态
-- 智能插座支持电源开关控制
-- 传感器数据每30秒自动更新
-- 设备离线状态显示
-- 房间切换和设备分类管理
+```bash
+# 使用Python启动本地服务器
+python3 -m http.server 8000
 
-### 智能场景
-- 四个导航标签切换：智能推荐、语音通知、智能清洁、智能控制
-- 主场景卡片展示和设备项目管理
-- 推荐场景卡片交互和产品网格展示
-- 响应式布局和动画效果
+# 使用Node.js http-server
+npx http-server
 
-### 米家众测
-- 众测产品卡片展示和状态标识
-- 申请者信息和申请人数显示
-- 产品详情查看和申请功能
-- 特殊标记和状态区分
+# 或直接在浏览器中打开 index.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. **直接打开**: 在浏览器中打开 `index.html` 文件
-2. **本地服务器**: 使用任意HTTP服务器托管项目文件
-   ```bash
-   # 使用Python启动本地服务器
-   python3 -m http.server 8000
-   
-   # 使用Node.js http-server
-   npx http-server
-   
-   # 使用Live Server (VS Code扩展)
-   # 右键点击index.html -> Open with Live Server
-   ```
+- **高度还原**: 像素级仿制米家App界面
+- **响应式设计**: 移动端优先，适配多屏幕
+- **模块化架构**: 组件复用，易于维护
+- **实时交互**: 设备状态切换，数据动态更新
+- **触摸优化**: 移动端触摸反馈和动画效果
 
-### 页面导航
+## 📝 开发说明
 
-- **入口页面**: `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仿制效果。
-
-## 项目亮点
-
-### 1. 高度还原
-- 像素级还原米家app界面
-- 保持原有的交互逻辑
-- 符合用户使用习惯
-
-### 2. 交互体验
-- 触摸反馈效果
-- 流畅的动画过渡
-- 实时状态更新
-- 友好的提示信息
-
-### 3. 代码质量
-- 清晰的代码结构
-- 良好的注释说明
-- 模块化设计
-- 易于维护和扩展
-
-### 4. 响应式设计
-- 适配不同屏幕尺寸
-- 移动端优先设计
-- 灵活的布局系统
-
-### 5. 最新优化
-- 统一的橙色主题配色方案
-- 修复了设备卡片文字与按钮重叠问题
-- 优化了空气质量显示格式
-- 增强了页面间的导航体验
-- 完善了消息通知系统
-
-## 扩展功能
-
-项目预留了扩展接口，可以轻松添加以下功能：
-
-- 🔐 用户登录和权限管理
-- 📊 设备数据统计和图表
-- 🔔 消息推送和通知
-- 🎵 语音控制集成
-- 🌐 云端数据同步
-- 📱 PWA支持
-
-## 开发说明
-
-这是一个纯前端项目，所有的数据都是模拟数据，主要用于展示界面效果和交互逻辑。在实际应用中，需要：
-
-1. 集成真实的设备API
-2. 添加用户认证系统
-3. 实现数据持久化
-4. 添加错误处理机制
-5. 优化性能和安全性
-
-## 致谢
-
-感谢小米公司提供的优秀设计参考，本项目仅用于学习和课程设计目的。
+- 纯前端项目，使用模拟数据展示
+- 采用事件驱动的交互模式
+- 支持Chrome 60+, Firefox 55+, Safari 12+
+- 建议在移动设备模拟模式下体验
 
 ---
 
 **注意**: 本项目仅供学习交流使用，不得用于商业用途。
 
-**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**
\ No newline at end of file
+**枣庄学院移动应用开发技术实训 - 课程设计作业**
\ No newline at end of file