企业微信侧边栏 - 空间文字不显示问题修复

🚨 问题现象

在企业微信侧边栏中打开"创建改图任务"弹窗后，"涉及空间"选择区域：

✅ 勾选框正常显示
❌ 空间名称文字完全不可见
❌ 只能看到空白的勾选框，无法知道选择的是哪个空间

影响范围：企业微信侧边栏（移动端宽度 < 480px）

🔍 问题排查维度

按照以下四个维度进行逐一排查：

1. 数据传递检查 ✅

检查项：availableSpaces数组是否有正确的name字段

排查方法：在ngOnChanges()中添加调试日志：

console.log('📋 [改图任务] 可用空间列表:', this.availableSpaces);
console.log('📋 [改图任务] 空间数量:', this.availableSpaces.length);
console.log('📋 [改图任务] 第一个空间:', this.availableSpaces[0]);

预期输出：

📋 [改图任务] 可用空间列表: [{id: "xxx", name: "客厅", selected: false}, ...]
📋 [改图任务] 空间数量: 5
📋 [改图任务] 第一个空间: {id: "xxx", name: "客厅", selected: false}

结论：✅ 数据传递正常

2. 样式层遮挡检查 ✅

检查项：是否有visibility: hidden、opacity: 0等隐藏样式

排查方法：检查.space-item span的相关样式：

span {
  visibility: visible; // ✅ 没有设置hidden
  opacity: 1;          // ✅ 没有设置透明
}

结论：✅ 没有样式层遮挡

3. 文字颜色对比检查 ✅

检查项：文字颜色是否与背景色一致（视觉上"消失"）

原有样式：

span {
  color: #374151;      // ❌ 中等灰色
}

.space-item {
  background: white;   // 白色背景
}

修复后：

span {
  color: #1f2937;      // ✅ 深灰色（增强对比）
  font-weight: 500;    // ✅ 稍加粗（增强可见度）
}

结论：⚠️ 原颜色对比度较低，已增强

4. 布局溢出检查 ❌（问题根源）

检查项：文字是否被布局挤出可视区域

问题分析：

4.1 过度限制的容器宽度

原有代码：

.space-selector {
  @media (max-width: 480px) {
    max-width: 280px; // ❌ 过度限制！
  }
}

问题：

容器宽度限制为280px
减去padding 10px × 2 = 20px
实际可用宽度 = 260px
每个.space-item宽度 = 260px
减去.space-item的padding 12px × 2 = 24px
减去checkbox 18px
减去gap 10px
实际文字可用宽度 = 260 - 24 - 18 - 10 = 208px

但在某些企微环境中，容器可能被进一步压缩，导致文字可用宽度不足。

4.2 flex子项收缩过度

原有代码：

.space-item {
  min-width: 0; // ❌ 允许收缩到0宽度
}

span {
  flex: 1;
  min-width: 0;    // ❌ 允许收缩到0宽度
  overflow: hidden; // ❌ 溢出隐藏
}

问题：

min-width: 0允许flex子项被无限压缩
当容器宽度不足时，span被压缩到极小的宽度
overflow: hidden隐藏了所有文字

结论：❌ 这是问题的根本原因！

✅ 修复方案

1. 移除容器宽度限制

.space-selector {
  @media (max-width: 480px) {
    max-width: none;  // ✅ 移除限制，自适应父容器
    width: 100%;      // ✅ 占满父容器宽度
  }
}

效果：容器宽度不再受限，可以使用更多空间。

2. 设置最小宽度防止过度压缩

.space-item {
  @media (max-width: 480px) {
    min-width: 200px;  // ✅ 设置最小宽度，防止被压缩太小
    gap: 12px;         // ✅ 增大间距，确保勾选框和文字分离
  }
}

效果：

.space-item最小宽度 = 200px
减去padding 14px × 2 = 28px
减去checkbox 18px
减去gap 12px
实际文字可用宽度 = 200 - 28 - 18 - 12 = 142px

这足够显示大部分空间名称了。

3. 允许文字换行显示

span {
  @media (max-width: 480px) {
    font-size: 14px;           // ✅ 增大字体
    font-weight: 500;          // ✅ 稍加粗
    color: #1f2937;            // ✅ 加深颜色
    white-space: normal;       // ✅ 允许换行（关键！）
    overflow: visible;         // ✅ 允许文字显示
    word-break: break-word;    // ✅ 必要时在单词内断行
    line-height: 1.5;          // ✅ 增加行高
    max-width: none;           // ✅ 移除宽度限制
  }
}

效果：

短空间名称（如"客厅"）：单行显示
长空间名称（如"主卧室（带卫生间）"）：自动换行到第二行
超长空间名称：自动换行到多行

📊 修复前后对比

修复前

.space-selector
  max-width: 280px ❌
    ↓
  实际宽度可能更小
    ↓
.space-item
  min-width: 0 ❌（允许无限压缩）
    ↓
  span被压缩到极小宽度
    ↓
  overflow: hidden ❌
    ↓
  文字完全不可见 ❌

修复后

.space-selector
  max-width: none ✅（自适应父容器）
    ↓
  使用更多可用空间
    ↓
.space-item
  min-width: 200px ✅（防止过度压缩）
    ↓
  span有足够空间显示
    ↓
  white-space: normal ✅（允许换行）
    ↓
  文字完整显示 ✅

🎯 关键修复点

1. 容器宽度限制

修复前：max-width: 280px ❌
修复后：max-width: none ✅

2. 最小宽度保护

修复前：min-width: 0（允许无限压缩）❌
修复后：min-width: 200px（防止过度压缩）✅

3. 文字换行策略

修复前：white-space: nowrap + overflow: hidden ❌
修复后：white-space: normal + overflow: visible ✅

4. 文字样式增强

修复前：font-size: 13px, color: #374151 ⚠️
修复后：font-size: 14px, font-weight: 500, color: #1f2937 ✅

🧪 测试验证

测试场景

场景1：短空间名称

示例："客厅"、"卧室"、"厨房"
预期：单行显示，勾选框与文字对齐

场景2：中等空间名称

示例："主卧室"、"客餐厅"、"书房"
预期：单行显示，完整可见

场景3：长空间名称

示例："主卧室（带卫生间）"、"客餐厅一体化空间"
预期：自动换行到第二行，完整显示

场景4：超长空间名称

示例："客厅餐厅一体化空间设计（现代简约风格）"
预期：自动换行到多行，完整显示

测试设备

企业微信iOS端
企业微信Android端
企业微信桌面版侧边栏

测试步骤

在企业微信中打开项目详情
点击"创建改图任务"按钮
选择"大修改"类型
观察"涉及空间"选择区域
验证所有空间名称是否完整可见 ✅
验证勾选框与文字是否对齐 ✅
选择多个空间，验证已选状态 ✅

🔧 调试方法

1. 查看控制台日志

打开企业微信开发者工具，查看控制台输出：

📋 [改图任务] 可用空间列表: [{id: "xxx", name: "客厅", selected: false}, ...]
📋 [改图任务] 空间数量: 5
📋 [改图任务] 第一个空间: {id: "xxx", name: "客厅", selected: false}

如果空间名称为空或undefined，则是数据问题。

2. 检查元素样式

在企业微信中打开调试工具，检查.space-item span的计算样式：

width: 应该大于100px
overflow: 应该是visible
white-space: 应该是normal
color: 应该是#1f2937（深灰色）

3. 检查容器宽度

检查.space-selector和.space-item的实际宽度：

.space-selector: 应该接近父容器宽度（例如350px）
.space-item: 应该大于200px

📝 修复文件清单

1. revision-task-modal.component.scss

修改内容：

.space-selector：移除max-width: 280px限制
.space-item：添加min-width: 200px，增大gap
span：允许换行，增强文字样式

2. revision-task-modal.component.ts