smart-home/smart-home-app/UI优化说明.md

🎨 UI优化说明

📋 修改概述

本次优化包含两个主要任务：

1. 调整底部导航栏顺序和名称
2. 在16宫格温度分布卡片中添加方向标签

---

✅ 任务1：底部导航栏优化

修改内容

1. 调整顺序

修改前：

1. Home (首页)
2. Monitor (监控)
3. Advanced (高级)
4. My (我的)

修改后：

1. Home (首页)
2. Monitor (监控)
3. Sys setting (系统设置) - 原"My"
4. Preference (偏好设置) - 原"Advanced"

2. 修改名称

原名称	新名称	中文
My	Sys setting	系统设置
Advanced	Preference	偏好设置

修改的文件

1. pages.json

"tabBar": {
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "Home"
    },
    {
      "pagePath": "pages/kitchen/main",
      "text": "Monitor"
    },
    {
      "pagePath": "pages/settings/index",
      "text": "Sys setting"  // ✅ 第3个，原"My"
    },
    {
      "pagePath": "pages/kitchen/settings",
      "text": "Preference"  // ✅ 第4个，原"Advanced"
    }
  ]
}

2. i18n/index.js

中文翻译：

zh: {
  sysSettings: '系统设置',  // ✅ 新增
  advancedOptions: '偏好设置',  // ✅ 修改
}

英文翻译：

en: {
  sysSettings: 'Sys setting',  // ✅ 新增
  advancedOptions: 'Preference',  // ✅ 修改
}

---

✅ 任务2：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

修改内容

1. HTML结构

修改前：

<view class="temp-grid">
  <view class="grid-row" v-for="...">
    <view class="grid-cell">...</view>
  </view>
</view>

修改后：

<view class="grid-container">
  <!-- 上方向标签 -->
  <view class="direction-label direction-top">
    <text class="direction-text">up</text>
  </view>
  
  <!-- 左右方向标签和温度网格 -->
  <view class="grid-with-sides">
    <!-- 左方向标签 -->
    <view class="direction-label direction-left">
      <text class="direction-text direction-vertical">left</text>
    </view>
    
    <!-- 温度网格 -->
    <view class="temp-grid">
      <view class="grid-row" v-for="...">
        <view class="grid-cell">...</view>
      </view>
    </view>
    
    <!-- 右方向标签 -->
    <view class="direction-label direction-right">
      <text class="direction-text direction-vertical">right</text>
    </view>
  </view>
  
  <!-- 下方向标签 -->
  <view class="direction-label direction-bottom">
    <text class="direction-text">down</text>
  </view>
</view>

2. CSS样式

/* 温度网格容器 */
.grid-container {
  position: relative;
  padding: 40rpx 0;
}

.grid-with-sides {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 方向标签 */
.direction-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.direction-top,
.direction-bottom {
  height: 40rpx;
  margin: 10rpx 0;
}

.direction-left,
.direction-right {
  width: 50rpx;
  writing-mode: vertical-lr;
}

.direction-text {
  font-size: 24rpx;
  font-weight: bold;
  color: #2C3E50;
  text-transform: uppercase;
}

.direction-vertical {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

/* 温度网格 */
.temp-grid {
  margin: 0 10rpx;
}

关键技术点

1. 垂直文字显示

.direction-vertical {
  writing-mode: vertical-lr;  /* 垂直书写模式 */
  transform: rotate(180deg);  /* 旋转180度，使文字从上到下 */
}

2. Flexbox布局

.grid-with-sides {
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

3. 文字大写

.direction-text {
  text-transform: uppercase;  /* 自动转换为大写 */
}

---

📊 修改文件清单

底部导航栏

• ✅ pages.json - 修改tabBar配置
• ✅ i18n/index.js - 添加和修改翻译

16宫格温度分布

• ✅ pages/kitchen/monitor.vue - 添加方向标签HTML和CSS

---

🎯 视觉效果

底部导航栏

修改前：

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

修改后：

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

16宫格温度分布

修改前：

┌────────────────┐
│ 29.8  29.8  ...│
│ 29.9  29.9  ...│
│ 29.9  29.9  ...│
│ 29.9  29.8  ...│
└────────────────┘

修改后：

        up
        ↑
┌────────────────┐
│ 29.8  29.8  ...│
left │ 29.9  29.9  ...│ right
│ 29.9  29.9  ...│
│ 29.9  29.8  ...│
└────────────────┘
        ↓
       down

---

🔍 测试步骤

测试底部导航栏

1. 启动APP
2. 查看底部导航栏
3. 确认顺序：Home → Monitor → Sys setting → Preference
4. 切换语言，确认中英文正确显示

测试16宫格温度分布

1. 进入Monitor页面
2. 查看16宫格温度分布卡片
3. 确认四个方向标签正确显示：
   • 上方：up
   • 下方：down
   • 左侧：left（垂直显示）
   • 右侧：right（垂直显示）
4. 确认温度网格居中显示

---

⚠️ 注意事项

1. 文字方向

左右两侧的文字使用writing-mode: vertical-lr实现垂直显示，并通过rotate(180deg)调整方向。

2. 布局调整

添加方向标签后，温度网格的外边距从margin-bottom: 24rpx改为margin: 0 10rpx，以适应新的布局。

3. 响应式

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

4. 多语言支持

如果需要支持中文方向标签，可以在i18n中添加：

zh: {
  directionUp: '上',
  directionDown: '下',
  directionLeft: '左',
  directionRight: '右'
}

en: {
  directionUp: 'up',
  directionDown: 'down',
  directionLeft: 'left',
  directionRight: 'right'
}

然后在模板中使用：

<text class="direction-text">{{$t('directionUp')}}</text>

---

🎊 完成状态

• ✅ 底部导航栏顺序调整
• ✅ 底部导航栏名称修改
• ✅ 多语言翻译更新
• ✅ 16宫格温度分布添加方向标签
• ✅ CSS样式优化

---

💡 后续优化建议

1. 方向标签图标化

可以使用图标代替文字：

<text class="direction-icon">↑</text>
<text class="direction-icon">↓</text>
<text class="direction-icon">←</text>
<text class="direction-icon">→</text>

2. 动画效果

添加方向指示动画：

.direction-text {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

3. 交互提示

点击方向标签时显示说明：

showDirectionInfo(direction) {
  uni.showToast({
    title: `当前查看${direction}方向的温度分布`,
    icon: 'none'
  })
}

---

🎉 总结

本次UI优化完成了：

1. 底部导航栏优化

   • ✅ 调整顺序，将"系统设置"提前
   • ✅ 更新名称，使用更准确的术语
   • ✅ 支持中英文双语

2. 16宫格温度分布优化

   • ✅ 添加上下左右方向标签
   • ✅ 使用垂直文字显示左右标签
   • ✅ 优化布局，保持视觉平衡

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