chenxing/mi-home-web

Fork 0

Files

shenghuo2 5b6ad327eb docs: update readme with new profile pages and file structure

2025-06-22 16:13:22 +08:00

8.4 KiB

Raw Permalink Blame History

米家智能家居 - 课程设计项目

本项目仅为枣庄学院移动应用开发技术实训的课程设计作业

基于纯HTML、CSS和JavaScript开发的米家App界面仿制项目，采用模块化设计和响应式布局。

🏗️ 项目架构

核心技术栈

HTML5: 语义化标签，良好的页面结构
CSS3: Flexbox/Grid布局，CSS变量，动画过渡
JavaScript ES6+: 模块化代码，事件驱动，DOM操作

📱 页面模块

核心模块 (底部导航栏)

index.html - 米家首页：设备控制中心，房间切换，环境监测
smart.html - 智能页面：设备管理，日志查看
product.html - 产品页面：产品展示，分类浏览
mall.html - 商城页面：嵌入小米官方商城
profile.html - 个人中心：用户信息，功能入口

功能子页面

notifications.html - 通知中心：消息管理，状态更新
environment-settings.html - 环境设置：分区域监测，数据展示
profile/user-profile.html - 个人资料：用户信息编辑
log.html - 设备日志：开关记录，历史数据
profile/settings.html - 设置页面：应用配置
all-products.html - 全部产品：产品目录
profile/scene.html - 智能场景：场景管理，自动化控制
profile/mijiazhongce.html - 米家众测：产品试用申请
profile/product-encyclopedia.html - 产品百科：产品知识
profile/whole-house-smart.html - 全屋智能：智能解决方案
profile/voice-settings.html - 语音设置：小爱设置，语音控制管理
profile/my-youpin.html - 我的有品：订单管理，购物功能
profile/hub-gateway.html - 中枢与网关：网关设备管理
profile/device-consumables.html - 设备耗材：耗材管理，购买提醒
profile/share.html - 分享页面：设备分享，权限管理
profile/home-network.html - 家庭网络：网络设置，连接管理

💻 核心代码解释

JavaScript 主要功能 (scripts/main.js)

1. 页面切换系统

function showPage(pageId) {
    // 隐藏所有页面，显示目标页面
    const pages = document.querySelectorAll('.container');
    pages.forEach(page => page.classList.add('hidden'));
    document.getElementById(pageId)?.classList.remove('hidden');
    updateBottomNav(pageId);
}

2. 设备控制逻辑

function toggleDevice(deviceElement) {
    deviceElement.classList.toggle('active');
    // 模拟设备状态切换，更新UI显示
    const statusElement = deviceElement.querySelector('.device-status');
    // 状态更新逻辑...
}

3. 实时数据更新

// 每30秒更新传感器数据
setInterval(updateSensorData, 30000);
function updateSensorData() {
    // 模拟温湿度数据变化
    const newTemp = (currentTemp + (Math.random() - 0.5) * 2).toFixed(1);
}

CSS 样式架构 (styles/)

1. 全局样式 (common.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              # 米家首页 - 设备控制中心

├── smart.html              # 智能页面
├── product.html            # 产品页面
├── mall.html               # 商城页面
├── profile.html            # 个人中心页面

├── profile/
│   ├── user-profile.html   # 个人资料详情页面
│   ├── settings.html       # 设置页面
│   ├── home-network.html   # 家庭网络页面
│   ├── voice-settings.html # 语音设置页面
│   ├── my-youpin.html      # 我的有品页面
│   ├── hub-gateway.html    # 中枢与网关页面
│   ├── device-consumables.html # 设备耗材页面
│   ├── scene.html          # 智能场景页面
│   ├── mijiazhongce.html   # 米家众测页面
│   ├── product-encyclopedia.html # 产品百科页面
│   ├── whole-house-smart.html # 全屋智能页面
│   └── share.html          # 分享页面
├── notifications.html      # 通知中心页面
├── environment-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    # 全部产品样式
│   ├── product-encyclopedia.css # 产品百科样式
│   ├── whole-house-smart.css # 全屋智能样式
│   └── log.css             # 日志页面样式
├── scripts/                # JavaScript文件目录
│   └── main.js             # 主JavaScript文件
├── images/                 # 图片资源目录
│   └── profile/            # 个人中心相关图片
│       ├── mijiazhongce/   # 米家众测图片
│       └── zhinengchangjing/ # 智能场景图片
├── .gitignore              # Git忽略文件配置
└── README.md               # 项目说明文档

🚀 快速启动

# 使用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 ── 个人中心
│       ├── → profile/user-profile.html
       ├── → profile/scene.html
       ├── → profile/mijiazhongce.html
       ├── → profile/product-encyclopedia.html
       ├── → profile/whole-house-smart.html
       ├── → profile/voice-settings.html
       ├── → profile/my-youpin.html
       ├── → profile/hub-gateway.html
       ├── → profile/device-consumables.html
       ├── → profile/share.html
       ├── → profile/settings.html
       └── → profile/home-network.html
└── 📁 资源文件
    ├── styles/ ──── CSS样式
    ├── scripts/ ─── JavaScript
    └── images/ ──── 图片资源

导航逻辑

底部导航: 5个主模块间切换
页面跳转: 通过点击事件触发 showPage() 函数
状态管理: updateBottomNav() 同步导航状态

🎯 项目特点

高度还原: 像素级仿制米家App界面
响应式设计: 移动端优先，适配多屏幕
模块化架构: 组件复用，易于维护
实时交互: 设备状态切换，数据动态更新
触摸优化: 移动端触摸反馈和动画效果

📝 开发说明

纯前端项目，使用模拟数据展示
采用事件驱动的交互模式
支持Chrome 60+, Firefox 55+, Safari 12+
建议在移动设备模拟模式下体验

注意: 本项目仅供学习交流使用，不得用于商业用途。

枣庄学院移动应用开发技术实训 - 课程设计作业

8.4 KiB Raw Permalink Blame History Unescape Escape

米家智能家居 - 课程设计项目

🏗️ 项目架构

核心技术栈

📱 页面模块

核心模块 (底部导航栏)

功能子页面

💻 核心代码解释

JavaScript 主要功能 (scripts/main.js)

1. 页面切换系统

2. 设备控制逻辑

3. 实时数据更新

CSS 样式架构 (styles/)

1. 全局样式 (common.css)

2. 组件化样式

HTML 结构设计

1. 语义化标签

2. 模块化组件

项目结构

🚀 快速启动

🗺️ 页面关系图

导航逻辑

🎯 项目特点

📝 开发说明

8.4 KiB

Raw Permalink Blame History