初始化
This commit is contained in:
282
v1/views/nav.py
Normal file
282
v1/views/nav.py
Normal file
@@ -0,0 +1,282 @@
|
||||
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
|
||||
Reference in New Issue
Block a user