smart-home/smart-home-app/UI修复说明.md

🔧 UI修复说明

📋 问题描述

1. 16宫格温度分布格子变形 - 添加方向标签后，格子大小发生了变化
2. 首页底部导航栏文字未更新 - 仍然显示"Advanced"和"My"，而不是"Preference"和"Sys setting"

---

✅ 修复内容

问题1：16宫格温度分布格子变形

原因分析

之前的CSS修改导致：

• .temp-grid的margin从margin-bottom: 24rpx改为margin: 0 10rpx
• 没有使用flex: 1让温度网格自适应宽度
• padding设置不当导致整体布局变形

修复方案

文件： pages/kitchen/monitor.vue

/* 温度网格容器 */
.grid-container {
  position: relative;  /* 移除padding */
}

.grid-with-sides {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* 改为space-between */
  gap: 10rpx;  /* 添加间距 */
}

/* 方向标签 */
.direction-top,
.direction-bottom {
  text-align: center;
  padding: 10rpx 0;  /* 减小padding */
}

.direction-left,
.direction-right {
  flex-shrink: 0;  /* 防止收缩 */
  width: 40rpx;  /* 固定宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.direction-text {
  font-size: 22rpx;  /* 减小字体 */
  font-weight: bold;
  color: #2C3E50;
  text-transform: uppercase;
}

.direction-vertical {
  writing-mode: vertical-lr;
  text-orientation: upright;  /* 改为upright，字母垂直排列 */
  letter-spacing: 2rpx;
}

/* 温度网格 */
.temp-grid {
  flex: 1;  /* ✅ 关键：让网格自适应宽度 */
  margin-bottom: 24rpx;  /* ✅ 恢复原来的margin */
}

关键改进

1. flex: 1 - 让温度网格自适应宽度，保持原有大小
2. margin-bottom: 24rpx - 恢复原来的下边距
3. text-orientation: upright - 让左右文字垂直排列，而不是旋转
4. flex-shrink: 0 - 防止方向标签被压缩

---

问题2：首页底部导航栏文字未更新

原因分析

虽然修改了pages.json中的tabBar配置，但uni-app的tabBar文字是通过uni.setTabBarItem()动态设置的，需要：

1. 修改applyTabBarI18n()函数中的翻译键
2. 在翻译文件中添加对应的翻译

修复方案

1. 修改utils/simpleI18n.js

function applyTabBarI18n() {
  try {
    uni.setTabBarItem({ index: 0, text: $t('home') })
    uni.setTabBarItem({ index: 1, text: $t('monitor') })
    uni.setTabBarItem({ index: 2, text: $t('sysSettings') })  // ✅ 改为sysSettings
    uni.setTabBarItem({ index: 3, text: $t('preference') })   // ✅ 改为preference
  } catch (e) {
    // ignore
  }
}

2. 添加翻译（utils/simpleI18n.js）

中文：

zh: {
  // 导航栏
  home: '首页',
  monitor: '监控',
  sysSettings: '系统设置',  // ✅ 新增
  preference: '偏好设置',   // ✅ 新增
}

英文：

en: {
  // Navigation
  home: 'Home',
  monitor: 'Monitor',
  sysSettings: 'Sys setting',  // ✅ 新增
  preference: 'Preference',    // ✅ 新增
}

3. 添加翻译（i18n/index.js）

中文：

zh: {
  sysSettings: '系统设置',
  preference: '偏好设置',
}

英文：

en: {
  sysSettings: 'Sys setting',
  preference: 'Preference',
}

---

📊 修改文件清单

16宫格温度分布修复

• ✅ pages/kitchen/monitor.vue - 修复CSS样式

底部导航栏文字修复

• ✅ utils/simpleI18n.js - 修改applyTabBarI18n()函数和添加翻译
• ✅ i18n/index.js - 添加翻译键

---

🎯 修复效果

16宫格温度分布

修复前：

• ❌ 格子变小
• ❌ 布局变形
• ❌ 间距不对

修复后：

• ✅ 格子大小恢复正常
• ✅ 布局保持原样
• ✅ 方向标签正确显示

        up
        ↑
┌────────────────┐
│ 29.8  29.8  ...│
L │ 29.9  29.9  ...│ R
E │ 29.9  29.9  ...│ I
F │ 29.9  29.8  ...│ G
T └────────────────┘ H
        ↓
       down

底部导航栏

修复前：

┌──────┬──────┬──────────┬──────┐
│ Home │Monitor│ Advanced │  My  │
└──────┴──────┴──────────┴──────┘

修复后：

┌──────┬──────┬────────────┬────────────┐
│ Home │Monitor│Sys setting │ Preference │
└──────┴──────┴────────────┴────────────┘

中文：

┌──────┬──────┬────────┬────────┐
│ 首页 │ 监控 │系统设置│偏好设置│
└──────┴──────┴────────┴────────┘

---

🔍 测试步骤

测试16宫格温度分布

1. 进入Monitor页面（/#/pages/kitchen/monitor）
2. 查看16宫格温度分布卡片
3. 确认：
   • ✅ 格子大小正常（每个格子约120rpx高）
   • ✅ 上方显示"up"
   • ✅ 下方显示"down"
   • ✅ 左侧显示"left"（垂直排列）
   • ✅ 右侧显示"right"（垂直排列）
   • ✅ 温度网格居中且大小正常

测试底部导航栏

1. 启动APP，查看首页
2. 查看底部导航栏
3. 确认：
   • ✅ 第1个：Home / 首页
   • ✅ 第2个：Monitor / 监控
   • ✅ 第3个：Sys setting / 系统设置
   • ✅ 第4个：Preference / 偏好设置
4. 切换语言（在设置页面）
5. 确认中英文正确显示

---

⚠️ 注意事项

1. tabBar更新机制

uni-app的tabBar文字需要通过uni.setTabBarItem()动态设置，仅修改pages.json不会生效。

2. 翻译文件同步

需要在两个地方添加翻译：

• utils/simpleI18n.js - 主要翻译文件
• i18n/index.js - 备用翻译文件

3. 索引顺序

tabBar的索引是从0开始的：

• index 0: Home
• index 1: Monitor
• index 2: Sys setting（原My）
• index 3: Preference（原Advanced）

4. CSS单位

使用rpx单位确保在不同屏幕尺寸下保持一致的视觉效果。

---

💡 技术要点

1. Flexbox布局

.grid-with-sides {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;
}

.temp-grid {
  flex: 1;  /* 自适应宽度 */
}

.direction-left,
.direction-right {
  flex-shrink: 0;  /* 防止收缩 */
  width: 40rpx;
}

2. 垂直文字

.direction-vertical {
  writing-mode: vertical-lr;  /* 垂直书写模式 */
  text-orientation: upright;  /* 字母垂直排列 */
  letter-spacing: 2rpx;       /* 字母间距 */
}

3. 动态tabBar

uni.setTabBarItem({
  index: 2,
  text: $t('sysSettings')  // 使用翻译函数
})

---

🎊 完成状态

• ✅ 16宫格温度分布格子大小恢复正常
• ✅ 方向标签正确显示（上下左右）
• ✅ 底部导航栏文字更新为"Sys setting"和"Preference"
• ✅ 支持中英文双语切换
• ✅ 所有翻译文件已同步

---

🎉 总结

本次修复解决了：

1. 16宫格温度分布

   • ✅ 恢复格子原有大小
   • ✅ 保持原有布局
   • ✅ 添加方向标签（不影响原有样式）

2. 底部导航栏

   • ✅ 更新文字为"Sys setting"和"Preference"
   • ✅ 支持中英文切换
   • ✅ 所有翻译文件已同步

所有修改已完成，可以直接运行测试！