282 lines
9.2 KiB
Python
282 lines
9.2 KiB
Python
from PyQt5.QtWidgets import (QWidget, QVBoxLayout, QHBoxLayout, QLabel,
|
|
QPushButton, QFrame, QSpacerItem, QSizePolicy)
|
|
from PyQt5.QtCore import Qt, pyqtSignal
|
|
from PyQt5.QtGui import QPixmap, QIcon, QFont, QPainter, QBrush, QLinearGradient, QColor
|
|
|
|
|
|
class NavBar(QWidget):
|
|
nav_item_clicked = pyqtSignal(str)
|
|
logout_clicked = pyqtSignal()
|
|
|
|
def __init__(self, username):
|
|
super().__init__()
|
|
self.username = username or "访客" # 设置默认值，防止空字符串
|
|
self.active_btn = None
|
|
self.init_ui()
|
|
|
|
def init_ui(self):
|
|
self.setObjectName("navBar")
|
|
self.setFixedWidth(240)
|
|
self.setStyleSheet("""
|
|
#navBar {
|
|
background-color: #1a202c;
|
|
border-right: 1px solid #2d3748;
|
|
}
|
|
|
|
#userFrame {
|
|
background-color: #2d3748;
|
|
border-radius: 10px;
|
|
margin: 15px;
|
|
padding: 15px;
|
|
}
|
|
|
|
#userName {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
#navBtn {
|
|
text-align: left;
|
|
padding: 15px 25px;
|
|
color: #a0aec0;
|
|
border-radius: 8px;
|
|
margin: 5px 15px;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#navBtn:hover {
|
|
background-color: rgba(79, 70, 229, 0.1);
|
|
color: #cbd5e0;
|
|
padding-left: 28px;
|
|
}
|
|
|
|
#navBtn.active {
|
|
background-color: rgba(79, 70, 229, 0.15);
|
|
color: #818cf8;
|
|
font-weight: 500;
|
|
padding-left: 28px;
|
|
}
|
|
|
|
#logoutBtn {
|
|
text-align: left;
|
|
padding: 15px 25px;
|
|
border-radius: 8px;
|
|
margin: 5px 15px;
|
|
font-size: 14px;
|
|
color: #feb2b2;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#logoutBtn:hover {
|
|
background-color: rgba(254, 178, 178, 0.1);
|
|
color: #f56565;
|
|
padding-left: 28px;
|
|
}
|
|
""")
|
|
|
|
layout = QVBoxLayout()
|
|
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)
|
|
initial = self.username[0].upper() if self.username else "访"
|
|
avatar_label.setText(initial)
|
|
avatar_label.setStyleSheet("font-size: 18px; font-weight: bold; color: white;")
|
|
|
|
# 用户信息容器
|
|
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;")
|
|
|
|
user_info_layout.addWidget(user_name)
|
|
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": "history", "id": "history"},
|
|
{"name": "个人设置", "icon": "settings", "id": "settings"},
|
|
]
|
|
|
|
# 导航按钮 - 添加图标
|
|
self.nav_buttons = []
|
|
for item in nav_items:
|
|
btn = QPushButton()
|
|
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.clicked.connect(lambda _, x=item["id"]: self.nav_item_clicked.emit(x))
|
|
self.nav_buttons.append(btn)
|
|
|
|
# 退出按钮
|
|
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.clicked.connect(self.logout_clicked.emit)
|
|
|
|
# 组装布局
|
|
layout.addWidget(user_frame)
|
|
layout.addSpacing(20)
|
|
|
|
# 添加分割线
|
|
separator = QFrame()
|
|
separator.setFrameShape(QFrame.HLine)
|
|
separator.setStyleSheet("background-color: #2d3748; margin: 0 15px; height: 1px;")
|
|
layout.addWidget(separator)
|
|
layout.addSpacing(20)
|
|
|
|
# 导航按钮容器
|
|
nav_container = QWidget()
|
|
nav_container_layout = QVBoxLayout(nav_container)
|
|
nav_container_layout.setContentsMargins(0, 0, 0, 0)
|
|
nav_container_layout.setSpacing(5)
|
|
|
|
for btn in self.nav_buttons:
|
|
nav_container_layout.addWidget(btn)
|
|
|
|
layout.addWidget(nav_container)
|
|
layout.addStretch()
|
|
|
|
# 底部添加退出按钮
|
|
bottom_container = QWidget()
|
|
bottom_container_layout = QVBoxLayout(bottom_container)
|
|
bottom_container_layout.setContentsMargins(0, 0, 0, 0)
|
|
|
|
# 底部添加分割线
|
|
separator_bottom = QFrame()
|
|
separator_bottom.setFrameShape(QFrame.HLine)
|
|
separator_bottom.setStyleSheet("background-color: #2d3748; margin: 0 15px; height: 1px;")
|
|
|
|
bottom_container_layout.addWidget(separator_bottom)
|
|
bottom_container_layout.addSpacing(15)
|
|
bottom_container_layout.addWidget(logout_btn)
|
|
|
|
layout.addWidget(bottom_container)
|
|
|
|
self.setLayout(layout)
|
|
|
|
# 默认激活首页
|
|
self.set_active_nav("home")
|
|
|
|
def set_active_nav(self, nav_id):
|
|
# 移除所有按钮的active类
|
|
for btn in self.nav_buttons:
|
|
btn.setProperty("class", "")
|
|
# 重新设置样式以应用变化
|
|
btn.setStyle(btn.style())
|
|
|
|
# 为活动按钮添加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 |