yss-project/docs/task/20251024-customer-service-scroll-fix.md

客服端页面滚动问题修复

问题描述

用户报告客服端的以下两个页面无法下拉查看完整内容，内容被限制在固定窗口大小内：

• http://localhost:55003/customer-service/dashboard（客服工作台）
• http://localhost:55003/customer-service/case-library（案例库）

根本原因

客服端布局组件 customer-service-layout 缺少正确的高度约束设置，导致：

1. 宿主元素没有设置 height: 100vh
2. 顶部导航栏没有 flex-shrink: 0 属性
3. 主内容区域无法正确计算可用高度，从而无法触发滚动

修复方案

修改文件

src/app/pages/customer-service/customer-service-layout/customer-service-layout.scss

具体修改

1. 添加宿主元素样式

// 宿主元素布局 - 确保全屏高度
:host {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

说明：

• display: flex; flex-direction: column; 使宿主元素成为垂直flex容器
• height: 100vh; 设置高度为100%视口高度
• overflow: hidden; 防止宿主元素自身滚动，让子元素处理滚动

2. 更新顶部导航栏样式

.top-navbar {
  // ... 其他样式
  flex-shrink: 0; // 防止导航栏缩小
  // 移除 position: sticky; top: 0; 因为不再需要
}

说明：

• flex-shrink: 0; 确保导航栏始终保持固定高度（72px）
• 移除 position: sticky 因为在flex布局中不再需要

3. 保持现有样式

以下样式已经正确，无需修改：

.main-content {
  display: flex;
  flex: 1;
  min-height: 0; // 确保flex子元素可以正确计算高度
}

.content-wrapper {
  flex: 1;
  overflow-y: auto; // 允许内容区域滚动
  padding: 24px;
  transition: $transition;
}

工作原理

修复后的布局结构：

:host (100vh, flex-column, overflow:hidden)
├── .top-navbar (72px, flex-shrink:0)
└── .main-content (flex:1, min-height:0)
    ├── .sidebar (220px fixed width)
    └── .content-wrapper (flex:1, overflow-y:auto)

1. 宿主元素：占据整个视口高度（100vh），使用flex布局垂直排列子元素
2. 顶部导航：固定高度72px，flex-shrink: 0 确保不会被压缩
3. 主内容区：flex: 1 占据剩余空间（100vh - 72px）
4. 内容包装器：overflow-y: auto 当内容超出时显示垂直滚动条

测试验证

修复后，请验证以下页面可以正常滚动：

1. ✅ /customer-service/dashboard - 客服工作台
2. ✅ /customer-service/case-library - 案例库
3. ✅ /customer-service/project-list - 项目列表

相关文件

• src/app/pages/customer-service/customer-service-layout/customer-service-layout.scss - 布局样式文件
• src/app/pages/customer-service/customer-service-layout/customer-service-layout.html - 布局模板
• src/app/pages/customer-service/customer-service-layout/customer-service-layout.ts - 布局组件

技术要点

CSS Flexbox 滚动的关键点

1. 父容器高度约束：必须有明确的高度（如 100vh）
2. flex-shrink: 0：固定元素不应缩小
3. min-height: 0：flex子元素需要此属性才能正确计算高度
4. overflow-y: auto：在需要滚动的容器上设置

为什么需要 min-height: 0

在flex布局中，flex项目默认有 min-height: auto，这会导致它们不会缩小到内容尺寸以下。设置 min-height: 0 允许flex项目缩小，从而正确触发滚动。

修复日期

2024年10月24日

修复人员

AI Assistant (Claude)