WQ_GUI/IMAGE_CONFIG.md

Logo和横幅图像配置说明

功能概述

本更新实现了以下需求：

1. Logo在菜单栏左侧 - 和菜单栏在同一行
2. 菜单栏在最右侧 - 使用弹性空间布局
3. 横幅图片撑满整个区域 - 自适应窗口宽度

布局说明

┌─────────────────────────────────────┐
│ [Logo]          文件 工具 帮助      │  ← 同一行：Logo在左，菜单在右
├─────────────────────────────────────┤
│      [软件名称横幅图 - 撑满宽度]    │  ← 横幅撑满整个区域
├─────────────────────────────────────┤
│                                      │
│         主要内容区                   │
│                                      │

配置步骤

1. 准备图像文件

将你的图像文件放在项目目录中。建议的目录结构：

fengzhuang-ui2/
├── assets/                    # 推荐：创建资源目录
│   ├── logo.png             # 公司logo (建议高度30像素)
│   └── banner.png           # 软件名称横幅 (建议高度70像素)
├── src/
│   └── gui/
│       └── water_quality_gui.py
└── ...

2. 修改图像路径

打开 src/gui/water_quality_gui.py 文件，找到以下两处代码：

Logo路径修改（create_logo_bar 方法中，第3928行左右）

# 修改前：
logo_path = "path/to/your/logo.png"

# 修改后（使用相对路径）：
logo_path = "assets/logo.png"

# 或使用绝对路径：
logo_path = r"E:\your\full\path\to\logo.png"

横幅路径修改（create_banner_widget 方法中，第3978行左右）

# 修改前：
banner_path = "path/to/your/banner.png"

# 修改后（使用相对路径）：
banner_path = "assets/banner.png"

# 或使用绝对路径：
banner_path = r"E:\your\full\path\to\banner.png"

3. 图像规格建议

名称	建议尺寸	格式	说明
Logo	高度30像素	PNG/JPG	放在顶部Logo栏中，自动按高度缩放保持宽高比
横幅	高度70像素	PNG/JPG	占据横幅区域，自动按高度缩放保持宽高比

4. 图像加载失败处理

如果图像文件未找到或加载失败，系统会自动显示占位符：

• Logo占位符: 显示"Logo"文本，背景为浅灰色
• 横幅占位符: 显示"软件名称横幅"文本，背景为蓝色，字体为24号加粗

5. 自适应缩放说明

为了避免图像拉伸，代码使用了 scaledToHeight() 方法：

• Logo按高度30像素缩放，自动计算宽度，保持原始宽高比
• 横幅按高度70像素缩放，自动计算宽度，保持原始宽高比

这样可以确保无论原始图像大小如何，都能自然地显示而不会出现拉伸变形。

常见问题

Q: 如何使用项目内的图像资源？

A: 在项目中创建 assets 或 resources 文件夹，并使用相对路径：

# 假设项目结构：
# fengzhuang-ui2/
#   ├── assets/
#   │   ├── logo.png
#   │   └── banner.png
#   └── src/gui/water_quality_gui.py

# 在 water_quality_gui.py 中（第3928行）：
logo_path = "assets/logo.png"

# 在 water_quality_gui.py 中（第3978行）：
banner_path = "assets/banner.png"

Q: Logo或横幅大小不合适？

A: 修改以下代码调整显示大小：

# 在 create_logo_bar() 方法中调整Logo大小
logo_label.setFixedSize(60, 40)  # 改为 60×40

# 在 create_banner_widget() 方法中调整横幅大小
banner_label.setMaximumHeight(100)  # 改为100像素高
banner_label.setMinimumHeight(80)   # 改为最小80像素高

# 调整缩放高度
scaled_pixmap = logo_pixmap.scaledToHeight(35, Qt.SmoothTransformation)  # 改为35
scaled_pixmap = banner_pixmap.scaledToHeight(85, Qt.SmoothTransformation)  # 改为85

Q: 如何隐藏Logo或横幅？

A: 在 init_ui() 方法中注释掉相应的创建方法：

# 在 init_ui() 中
# self.create_logo_bar()          # 注释此行隐藏Logo
# self.create_banner_widget()     # 注释此行隐藏横幅

Q: Logo显示位置不对？

A: Logo栏是作为独立的工具栏添加在菜单栏下方，不是在菜单栏内。当前的布局顺序是：

1. 菜单栏 (最上方)
2. Logo栏 (菜单栏下方)
3. 横幅区域 (Logo栏下方)
4. 主内容区域 (最下方)

Q: 图像在高分辨率屏幕上看起来模糊？

A: 使用 Qt.SmoothTransformation 可以改善图像质量。如果仍然不够清晰，可以准备高分辨率的原始图像。

代码位置

• Logo栏创建: create_logo_bar() 方法 (第3902行)
• 横幅区域创建: create_banner_widget() 方法 (第3950行)
• 主UI初始化: init_ui() 方法 (第3821行)

支持的图像格式

• PNG (推荐，支持透明背景)
• JPG/JPEG
• BMP
• GIF
• TIFF

样式调整

如需修改样式（背景色、边框等），编辑以下位置的 setStyleSheet() 调用：

# Logo样式（第3907-3916行）
logo_toolbar.setStyleSheet("""...""")

# 占位符样式（第3931行）
logo_label.setStyleSheet("...")

# 横幅占位符样式（第3959-3965行）
banner_label.setStyleSheet("""...""")

更新日期

2026-03-27

备注

所有的图像路径都可以根据你的实际项目结构灵活调整。建议将图像文件与代码一起版本控制，以确保项目的可维护性。