docs(bug): 诸葛亮分析报告 Bug #753
This commit is contained in:
174
MD/bugs/BUG_753_ANALYSIS.md
Normal file
174
MD/bugs/BUG_753_ANALYSIS.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# Bug #753 诸葛亮分析报告
|
||||
|
||||
> **文档类型**: Bug分析
|
||||
> **分析时间**: 2026-06-12 22:03:57
|
||||
> **分析模型**: mimo-v2.5 (LLM深度分析)
|
||||
|
||||
---
|
||||
|
||||
## 基本信息
|
||||
- **Bug #**: 753
|
||||
- **标题**: 【收费工作站-住院登记】“待登记入院”与“已登记入院”页签下页面容器高度异常，系统自动无限下扩产生大量空白区
|
||||
- **模块**: 住院登记管理
|
||||
- **提出人**: 陈显精
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
## 一、Bug 理解
|
||||
|
||||
**原文引用：**
|
||||
|
||||
> **标题**：【收费工作站-住院登记】"待登记入院"与"已登记入院"页签下页面容器高度异常，系统自动无限下扩产生大量空白区
|
||||
>
|
||||
> **重现步骤**：
|
||||
> 1. 登录医院信息管理系统账号。
|
||||
> 2. 在左侧主菜单栏中依次点击：「收费工作站」->「住院登记」。
|
||||
> 3. 在右侧主工作区中，首先查看默认的「待登记入院」页签，往下滑动页面或观察底部数据区域。
|
||||
> 4. 接着点击切换至「已登记入院」页签，同样向下滑动并观察底部。
|
||||
>
|
||||
> **结果**：表格与尾底部分页控件（写有"共 59 条 10条/页..."的控制条）之间存在异常巨大的空白间隔。页面右侧纵向滚动条极长，系统自动无限往下拉高窗口，给用户视觉呈瞬间呈现"断层/留白过长"现象。(注：在"待登记入院"和"已登记入院"两个子标签下均存在该问题。)
|
||||
>
|
||||
> **期望**：页面各组件高度计算正确，自适应浏览器窗口大小。分页控件行应紧跟紧随在表格区域底部显示，或者将表格区固定在一定高度内（超出出现局部滚动条），不能出现无限制的页面底部空白区和全局滚动条。
|
||||
|
||||
**附图分析**：
|
||||
- 已登记入院页签：10行数据的表格下方出现大面积空白区域，分页控件被推到页面最底部，右侧纵向滚动条极长。
|
||||
- 待登记入院页签：表格显示"暂无数据"，但页面同样存在高度异常。
|
||||
- 两个标签页下均有"系统自动无限往下扩高窗口"的标注。
|
||||
|
||||
**综合总结**：用户在住院登记页面的两个页签（待登记/已登记）中，表格下方出现大面积异常空白，分页控件与表格严重脱节，页面滚动条极长。这是一个纯前端布局问题，由 CSS 高度约束缺失导致 vxe-table 在无约束父容器中无限撑开高度。
|
||||
|
||||
---
|
||||
|
||||
## 二、根因分析
|
||||
|
||||
**直接原因**：两个组件（`accomplishList.vue` 和 `awaitList.vue`）的 `.table-container` 缺少高度约束和溢出控制。
|
||||
|
||||
**详细技术分析**：
|
||||
|
||||
布局链条高度约束断裂：
|
||||
|
||||
```
|
||||
.app-container (min-height: calc(100vh - 84px), 无固定height, 无overflow)
|
||||
└─ el-tabs (auto height)
|
||||
└─ .awaitList-container (height: 100%, 但父元素无固定高度 → 实际等于 auto)
|
||||
├─ .operate (height: 40px, 固定)
|
||||
└─ .table-container (无高度约束, 仅 padding)
|
||||
├─ vxe-table (height="100%", 父容器auto → 无法正确约束)
|
||||
└─ pagination
|
||||
```
|
||||
|
||||
关键问题：
|
||||
1. **`.awaitList-container` 使用 `height: 100%`，但其父元素（el-tabs content）无固定高度**——导致 `100%` 实际解析为 auto，无法约束子元素。
|
||||
2. **`.table-container` 无 `overflow` 约束、无 flex 布局**——内容可以无限撑高。
|
||||
3. **`vxe-table` 的 `height="100%"` 属性**——在无固定高度的父容器中无法创建滚动区域，表格内容直接撑开容器。
|
||||
|
||||
**涉及文件**（均为纯前端 CSS 问题）：
|
||||
- `healthlink-his-ui/src/views/inHospitalManagement/charge/register/components/accomplishList.vue` — 已登记入院列表
|
||||
- `healthlink-his-ui/src/views/inHospitalManagement/charge/register/components/awaitList.vue` — 待登记入院列表
|
||||
|
||||
---
|
||||
|
||||
## 三、修复方案
|
||||
|
||||
**核心思路**：用 flexbox 将 `.awaitList-container` 改为纵向弹性布局，让 `.table-container` 自动填充剩余空间并限制溢出，使 vxe-table 的 `height="100%"` 能正确约束在固定高度内。
|
||||
|
||||
### 修改文件 1：`accomplishList.vue`
|
||||
|
||||
```scss
|
||||
<!-- 修改前 -->
|
||||
<style lang="scss" scoped>
|
||||
.awaitList-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.table-container {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 修改后 -->
|
||||
<style lang="scss" scoped>
|
||||
.awaitList-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.operate {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.table-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 修改文件 2：`awaitList.vue`
|
||||
|
||||
同样的 CSS 修改（两个文件的 style 完全一致）：
|
||||
|
||||
```scss
|
||||
<!-- 修改后 -->
|
||||
<style lang="scss" scoped>
|
||||
.awaitList-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.operate {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.table-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
**修改要点**（3处 CSS 变更，两文件相同）：
|
||||
1. `.awaitList-container` 加 `display: flex; flex-direction: column;` — 建立纵向弹性布局
|
||||
2. `.operate` 加 `flex-shrink: 0;` — 防止搜索栏被压缩
|
||||
3. `.table-container` 加 `flex: 1; min-height: 0; overflow: hidden;` — **关键修复**：自动填充剩余空间 + 禁止溢出撑高 + `min-height: 0` 确保 flex 子元素可缩小
|
||||
|
||||
这样 vxe-table 的 `height="100%"` 就能在固定的 `.table-container` 内正确创建滚动区域，表格内容超出时在表格内部滚动，分页控件紧随表格下方，不再撑开整个页面。
|
||||
|
||||
---
|
||||
|
||||
## 四、路由决策
|
||||
|
||||
**FIXER**: zhaoyun
|
||||
**REASON**: 这是纯前端 CSS 布局问题，只涉及两个 Vue 组件的 `<style>` 块修改，无后端变更、无数据库变更，由前端开发修复最合适。
|
||||
|
||||
---
|
||||
|
||||
## 路由决策
|
||||
- **FIXER_ID**: guanyu
|
||||
- **修复 Agent**: guanyu（后端）
|
||||
- **原因**: LLM 分析决策
|
||||
|
||||
> ⚠️ 修复人员请先验证以上分析是否正确，再执行修复。
|
||||
Reference in New Issue
Block a user