优化UI
This commit is contained in:
130
v1/views/nav.py
130
v1/views/nav.py
@@ -1,6 +1,6 @@
|
||||
from PyQt5.QtWidgets import (QWidget, QVBoxLayout, QHBoxLayout, QLabel,
|
||||
QPushButton, QFrame, QSpacerItem, QSizePolicy)
|
||||
from PyQt5.QtCore import Qt, pyqtSignal
|
||||
from PyQt5.QtCore import Qt, pyqtSignal, QSize
|
||||
from PyQt5.QtGui import QPixmap, QIcon, QFont, QPainter, QBrush, QLinearGradient, QColor
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ class NavBar(QWidget):
|
||||
|
||||
def __init__(self, username):
|
||||
super().__init__()
|
||||
self.username = username or "访客" # 设置默认值，防止空字符串
|
||||
self.username = username or "访客"
|
||||
self.active_btn = None
|
||||
self.init_ui()
|
||||
|
||||
@@ -80,51 +80,36 @@ class NavBar(QWidget):
|
||||
layout.setContentsMargins(0, 20, 0, 20)
|
||||
layout.setSpacing(0)
|
||||
|
||||
# 用户信息卡片 - 使用更现代的设计
|
||||
# 用户信息卡片
|
||||
user_frame = QFrame()
|
||||
user_frame.setObjectName("userFrame")
|
||||
|
||||
user_layout = QHBoxLayout(user_frame)
|
||||
user_layout.setContentsMargins(15, 15, 15, 15)
|
||||
user_layout.setSpacing(15)
|
||||
|
||||
# 头像 - 使用渐变背景
|
||||
# 头像
|
||||
avatar = QLabel()
|
||||
avatar.setFixedSize(50, 50)
|
||||
|
||||
# 绘制渐变背景头像
|
||||
avatar_pixmap = QPixmap(50, 50)
|
||||
avatar_pixmap.fill(Qt.transparent)
|
||||
painter = QPainter(avatar_pixmap)
|
||||
painter.setRenderHint(QPainter.Antialiasing)
|
||||
brush = QBrush(Qt.SolidPattern)
|
||||
gradient = QLinearGradient(0, 0, 50, 50)
|
||||
gradient.setColorAt(0, QColor("#6366f1"))
|
||||
gradient.setColorAt(1, QColor("#8b5cf6"))
|
||||
painter.setBrush(gradient)
|
||||
painter.drawEllipse(0, 0, 50, 50)
|
||||
painter.end()
|
||||
avatar.setPixmap(avatar_pixmap)
|
||||
|
||||
# 添加用户首字母
|
||||
avatar_label = QLabel()
|
||||
avatar_label.setFixedSize(50, 50)
|
||||
avatar_label.setAlignment(Qt.AlignCenter)
|
||||
avatar.setStyleSheet("""
|
||||
background-color: #4f46e5;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
qproperty-alignment: 'AlignCenter';
|
||||
""")
|
||||
initial = self.username[0].upper() if self.username else "访"
|
||||
avatar_label.setText(initial)
|
||||
avatar_label.setStyleSheet("font-size: 18px; font-weight: bold; color: white;")
|
||||
avatar.setText(initial)
|
||||
|
||||
# 用户信息容器
|
||||
# 用户信息
|
||||
user_info = QWidget()
|
||||
user_info_layout = QVBoxLayout(user_info)
|
||||
user_info_layout.setContentsMargins(0, 0, 0, 0)
|
||||
user_info_layout.setSpacing(5)
|
||||
|
||||
# 用户名
|
||||
user_name = QLabel(self.username)
|
||||
user_name.setObjectName("userName")
|
||||
|
||||
# 状态标签
|
||||
status = QLabel("在线")
|
||||
status.setStyleSheet("font-size: 12px; color: #68d391;")
|
||||
|
||||
@@ -132,80 +117,33 @@ class NavBar(QWidget):
|
||||
user_info_layout.addWidget(status)
|
||||
|
||||
user_layout.addWidget(avatar)
|
||||
user_layout.addWidget(avatar_label)
|
||||
user_layout.addWidget(user_info)
|
||||
|
||||
# 导航项
|
||||
# 导航项 - 添加应用中心链接
|
||||
nav_items = [
|
||||
{"name": "首页", "icon": "home", "id": "home"},
|
||||
{"name": "应用中心", "icon": "apps", "id": "app_center"},
|
||||
{"name": "应用中心", "icon": "apps", "id": "app_center"}, # 新添加的应用中心链接
|
||||
{"name": "使用记录", "icon": "history", "id": "history"},
|
||||
{"name": "个人设置", "icon": "settings", "id": "settings"},
|
||||
]
|
||||
|
||||
# 导航按钮 - 添加图标
|
||||
# 导航按钮
|
||||
self.nav_buttons = []
|
||||
for item in nav_items:
|
||||
btn = QPushButton()
|
||||
btn = QPushButton(item["name"])
|
||||
btn.setObjectName("navBtn")
|
||||
btn.setProperty("nav_id", item["id"])
|
||||
btn.setCursor(Qt.PointingHandCursor)
|
||||
|
||||
# 添加图标和文本
|
||||
btn_layout = QHBoxLayout()
|
||||
btn_layout.setSpacing(12)
|
||||
btn_layout.setContentsMargins(0, 0, 0, 0)
|
||||
|
||||
icon = QLabel()
|
||||
icon_pixmap = QPixmap(f":/icons/{item['icon']}.png").scaled(20, 20, Qt.KeepAspectRatio,
|
||||
Qt.SmoothTransformation)
|
||||
|
||||
# 图标着色为当前文本颜色
|
||||
painter = QPainter(icon_pixmap)
|
||||
painter.setCompositionMode(QPainter.CompositionMode_SourceIn)
|
||||
painter.fillRect(icon_pixmap.rect(), QColor("#a0aec0"))
|
||||
painter.end()
|
||||
|
||||
icon.setPixmap(icon_pixmap)
|
||||
|
||||
text = QLabel(item["name"])
|
||||
|
||||
btn_layout.addWidget(icon)
|
||||
btn_layout.addWidget(text)
|
||||
btn_layout.addStretch()
|
||||
|
||||
btn.setLayout(btn_layout)
|
||||
|
||||
btn.setIcon(QIcon(f":/icons/{item['icon']}.png"))
|
||||
btn.setIconSize(QSize(20, 20))
|
||||
btn.clicked.connect(lambda _, x=item["id"]: self.nav_item_clicked.emit(x))
|
||||
self.nav_buttons.append(btn)
|
||||
|
||||
# 退出按钮
|
||||
logout_btn = QPushButton()
|
||||
logout_btn = QPushButton("退出登录")
|
||||
logout_btn.setObjectName("logoutBtn")
|
||||
|
||||
# 添加图标和文本
|
||||
logout_layout = QHBoxLayout()
|
||||
logout_layout.setSpacing(12)
|
||||
logout_layout.setContentsMargins(0, 0, 0, 0)
|
||||
|
||||
logout_icon = QLabel()
|
||||
logout_pixmap = QPixmap(":/icons/logout.png").scaled(20, 20, Qt.KeepAspectRatio, Qt.SmoothTransformation)
|
||||
|
||||
# 图标着色
|
||||
painter = QPainter(logout_pixmap)
|
||||
painter.setCompositionMode(QPainter.CompositionMode_SourceIn)
|
||||
painter.fillRect(logout_pixmap.rect(), QColor("#feb2b2"))
|
||||
painter.end()
|
||||
|
||||
logout_icon.setPixmap(logout_pixmap)
|
||||
|
||||
logout_text = QLabel("退出登录")
|
||||
|
||||
logout_layout.addWidget(logout_icon)
|
||||
logout_layout.addWidget(logout_text)
|
||||
logout_layout.addStretch()
|
||||
|
||||
logout_btn.setLayout(logout_layout)
|
||||
logout_btn.setIcon(QIcon(":/icons/logout.png"))
|
||||
logout_btn.setIconSize(QSize(20, 20))
|
||||
logout_btn.clicked.connect(self.logout_clicked.emit)
|
||||
|
||||
# 组装布局
|
||||
@@ -215,7 +153,7 @@ class NavBar(QWidget):
|
||||
# 添加分割线
|
||||
separator = QFrame()
|
||||
separator.setFrameShape(QFrame.HLine)
|
||||
separator.setStyleSheet("background-color: #2d3748; margin: 0 15px; height: 1px;")
|
||||
separator.setStyleSheet("margin: 0 15px; height: 1px; background-color: #2d3748;")
|
||||
layout.addWidget(separator)
|
||||
layout.addSpacing(20)
|
||||
|
||||
@@ -239,7 +177,7 @@ class NavBar(QWidget):
|
||||
# 底部添加分割线
|
||||
separator_bottom = QFrame()
|
||||
separator_bottom.setFrameShape(QFrame.HLine)
|
||||
separator_bottom.setStyleSheet("background-color: #2d3748; margin: 0 15px; height: 1px;")
|
||||
separator_bottom.setStyleSheet("margin: 0 15px; height: 1px; background-color: #2d3748;")
|
||||
|
||||
bottom_container_layout.addWidget(separator_bottom)
|
||||
bottom_container_layout.addSpacing(15)
|
||||
@@ -256,27 +194,11 @@ class NavBar(QWidget):
|
||||
# 移除所有按钮的active类
|
||||
for btn in self.nav_buttons:
|
||||
btn.setProperty("class", "")
|
||||
# 重新设置样式以应用变化
|
||||
btn.setStyle(btn.style())
|
||||
|
||||
# 为活动按钮添加active类
|
||||
# 为活动按钮添加active类
|
||||
for btn in self.nav_buttons:
|
||||
if btn.property("nav_id") == nav_id:
|
||||
btn.setProperty("class", "active")
|
||||
|
||||
# 更新图标颜色
|
||||
icon_label = btn.layout().itemAt(0).widget()
|
||||
active_pixmap = icon_label.pixmap()
|
||||
|
||||
# 改变图标颜色
|
||||
painter = QPainter(active_pixmap)
|
||||
painter.setCompositionMode(QPainter.CompositionMode_SourceIn)
|
||||
painter.fillRect(active_pixmap.rect(), QColor("#818cf8"))
|
||||
painter.end()
|
||||
|
||||
icon_label.setPixmap(active_pixmap)
|
||||
|
||||
# 重新设置样式以应用变化
|
||||
btn.setStyle(btn.style())
|
||||
|
||||
self.active_btn = btn
|
||||
Reference in New Issue
Block a user