128 lines
4.2 KiB
Markdown
128 lines
4.2 KiB
Markdown
|
# UI 界面布局修复说明
|
|||
|
|
|
|||
|
|
## 修复内容总结
|
|||
|
|
|
|||
|
|
针对UI界面存在的错位和显示不全问题，已进行了以下系统性改进：
|
|||
|
|
|
|||
|
|
### 1. 登录对话框修复 (login_dialog.py)
|
|||
|
|
- **问题**: 使用QLabel作为容器导致布局异常
|
|||
|
|
- **解决方案**: 改用QWidget作为内容容器，确保布局正确
|
|||
|
|
- **改进**:
|
|||
|
|
- 内容容器现在是proper的QWidget
|
|||
|
|
- 所有子组件正确继承样式
|
|||
|
|
|
|||
|
|
### 2. 主窗口左侧面板优化 (main_window.py)
|
|||
|
|
- **问题**: 左侧面板尺寸固定，内容拥挤；组件尺寸限制不当
|
|||
|
|
- **解决方案**:
|
|||
|
|
- 调整最小宽度从400→350px
|
|||
|
|
- 调整最大宽度从500→600px
|
|||
|
|
- 为各组件设置合理的最大高度：
|
|||
|
|
- 设备信息: 180px
|
|||
|
|
- 连接配置: 200px
|
|||
|
|
- 测试进度: 160px
|
|||
|
|
- 为左侧面板添加QScrollArea支持
|
|||
|
|
- 优化间距从15→12px
|
|||
|
|
|
|||
|
|
### 3. 主窗口右侧面板改进 (main_window.py)
|
|||
|
|
- **问题**: 右侧面板显示不全，表格和日志没有合理的高度限制
|
|||
|
|
- **解决方案**:
|
|||
|
|
- 调整最小宽度从600→500px
|
|||
|
|
- 为测试项目表格设置最小高度: 250px
|
|||
|
|
- 为执行日志设置最小高度: 150px
|
|||
|
|
- 调整日志查看器最小高度从200→100px
|
|||
|
|
- 优化间距从15→12px
|
|||
|
|
|
|||
|
|
### 4. Splitter布局改进 (main_window.py)
|
|||
|
|
- **问题**: 左右面板拉伸比例不当，导致显示比例不合理
|
|||
|
|
- **解决方案**:
|
|||
|
|
- 调整初始尺寸从[450, 950]→[400, 1000]
|
|||
|
|
- 设置拉伸因子: 左侧不拉伸(0), 右侧拉伸(1)
|
|||
|
|
- 这确保窗口扩展时主要是右侧面板扩展
|
|||
|
|
|
|||
|
|
### 5. 表格列宽优化 (widgets.py)
|
|||
|
|
- **问题**: 列宽设置过大，导致表格显示不全或过于拥挤
|
|||
|
|
- **解决方案**:
|
|||
|
|
- 序号: 50px (保持)
|
|||
|
|
- 测试项: 200→150px (减小)
|
|||
|
|
- 状态: 80→80px (保持)
|
|||
|
|
- 用时: 80→70px (减小)
|
|||
|
|
- 操作: 100→90px (减小)
|
|||
|
|
|
|||
|
|
### 6. 表格显示模式改进 (widgets.py)
|
|||
|
|
- **改进**:
|
|||
|
|
- 改变列宽模式从 `Fixed` → `ResizeToContents`
|
|||
|
|
- 改变最后一列拉伸从 `True` → `False`
|
|||
|
|
- 这使表格更加灵活，能自动适应内容
|
|||
|
|
- 表格行高设置为30px，更易读
|
|||
|
|
|
|||
|
|
### 7. 样式表优化 (styles.py)
|
|||
|
|
- **改进表格样式**:
|
|||
|
|
- 优化行padding从8px→6px
|
|||
|
|
- 添加行高设置(35px header, 30px items)
|
|||
|
|
- 改进滚动条样式
|
|||
|
|
- 添加QScrollArea样式定义
|
|||
|
|
|
|||
|
|
- **添加滚动区样式**:
|
|||
|
|
- 无边框设计
|
|||
|
|
- 背景颜色与主窗口一致
|
|||
|
|
|
|||
|
|
### 8. 窗口初始大小调整
|
|||
|
|
- **改进**: 默认窗口大小从1400×900→1440×900
|
|||
|
|
- **原因**: 更好地适配现代宽屏显示器
|
|||
|
|
|
|||
|
|
## 主要优化特点
|
|||
|
|
|
|||
|
|
### ✓ 响应式设计
|
|||
|
|
- 使用最小/最大宽度而非固定宽度
|
|||
|
|
- Splitter智能拉伸因子控制
|
|||
|
|
- 滚动区支持动态内容
|
|||
|
|
|
|||
|
|
### ✓ 更好的间距
|
|||
|
|
- 减少过度的间距(15→12px)
|
|||
|
|
- 组件之间布局更紧凑但不拥挤
|
|||
|
|
- GroupBox标题和内容间距优化
|
|||
|
|
|
|||
|
|
### ✓ 高度限制
|
|||
|
|
- 所有左侧面板组件都有合理的高度限制
|
|||
|
|
- 防止任何单个组件占用过多空间
|
|||
|
|
- 保证所有功能按钮始终可见
|
|||
|
|
|
|||
|
|
### ✓ 表格优化
|
|||
|
|
- 列宽更合理，不会导致水平滚动
|
|||
|
|
- 自动适应内容大小
|
|||
|
|
- 表格行高增加，提高可读性
|
|||
|
|
|
|||
|
|
## 测试建议
|
|||
|
|
|
|||
|
|
1. **窗口缩放测试**:
|
|||
|
|
- 最小窗口(1280×800)检查是否显示完整
|
|||
|
|
- 最大化窗口检查布局是否正常
|
|||
|
|
- 侧边拖动(splitter)检查是否流畅
|
|||
|
|
|
|||
|
|
2. **内容测试**:
|
|||
|
|
- 输入长的设备序列号检查是否换行
|
|||
|
|
- 添加多个测试项检查表格滚动
|
|||
|
|
- 检查日志输出是否正确显示
|
|||
|
|
|
|||
|
|
3. **跨平台测试**:
|
|||
|
|
- Windows 10/11
|
|||
|
|
- Linux (Ubuntu)
|
|||
|
|
- 不同分辨率的显示器
|
|||
|
|
|
|||
|
|
## 文件修改列表
|
|||
|
|
|
|||
|
|
| 文件 | 修改项 | 影响范围 |
|
|||
|
|
|------|--------|--------|
|
|||
|
|
| src/ui/login_dialog.py | 容器Widget改进 | 登录界面 |
|
|||
|
|
| src/ui/main_window.py | 布局优化、Splitter调整、滚动支持 | 主界面整体 |
|
|||
|
|
| src/ui/widgets.py | 表格列宽、显示模式 | 测试结果表格 |
|
|||
|
|
| src/ui/styles.py | 表格和滚动区样式 | 全局样式 |
|
|||
|
|
|
|||
|
|
## 后续改进建议
|
|||
|
|
|
|||
|
|
1. **分辨率自适应**: 在不同DPI的显示器上进行自适应
|
|||
|
|
2. **主题切换**: 添加浅色/深色主题切换
|
|||
|
|
3. **自定义列宽**: 允许用户拖动表格列调整宽度
|
|||
|
|
4. **记忆窗口状态**: 保存用户的窗口大小和位置
|
|||
|
|
5. **响应式字体**: 根据窗口大小调整字体大小
|