From b6e0142d06c7ead8d870e17bf1009ce865301613 Mon Sep 17 00:00:00 2001 From: gaozheng Date: Wed, 10 Jun 2026 10:23:09 +0800 Subject: [PATCH] =?UTF-8?q?feat(ela):=20TopBar=20=E5=9B=BE=E6=A0=87/?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=99=A8=20+=20PanelHeader=20=E9=A1=B5?= =?UTF-8?q?=E7=AD=BE/=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=20=E5=85=A8=20El?= =?UTF-8?q?a=20=E5=8C=96(=E5=A4=B4=E5=83=8F=E9=99=A4=E5=A4=96)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TopBar: help/bell/gear → ElaIconButton(Fluent 图标字体, 自动主题); 工作空间/项目切换器 → ElaToolButton; 去掉 #wsSwitcher/#iconBtn QSS(Ela 自绘); 头像保留自定义圆形(白字用 white 关键字恒白) - PanelHeader: 数据/文件等页签 → ElaToolButton(选中态走 Ela checked 高亮); 表头操作按钮 → ElaIconButton; headerQss 去掉 tabBtn/panelAction 规则 --- src/app/PanelHeader.cpp | 35 ++++++++++++------------------ src/app/TopBar.cpp | 47 ++++++++++++++++++----------------------- 2 files changed, 35 insertions(+), 47 deletions(-) diff --git a/src/app/PanelHeader.cpp b/src/app/PanelHeader.cpp index 5e4a6e3..bae2467 100644 --- a/src/app/PanelHeader.cpp +++ b/src/app/PanelHeader.cpp @@ -2,6 +2,9 @@ #include "Theme.hpp" +#include +#include + #include #include #include @@ -26,25 +29,19 @@ constexpr int kTabIcon = 19; // Tab 图标 // 面板标题=title(15)、徽标=caption(12)、Tab 文本=body(13)，加粗统一 semibold。 // #panelBadge 为中性计数徽标；#panelBadgeWarn 为“需注意”变体（语义 warning 色）， // 供异常计数等承载“待复查”含义的徽标使用（调用方改 objectName 即切换）。 +// 表头底/标题/徽标样式。Tab(ElaToolButton)与操作按钮(ElaIconButton)自绘 Fluent， +// 不再写它们的 QSS（选中态由 Ela 的 checked 高亮表达，而非自定义下划线）。 QString headerQss() { return QStringLiteral( "#panelHeader { background:#FFFFFF; border-bottom:1px solid #E6EAF1; }" - "#panelTitle { color:#1F2A3D; font-size:%1px; font-weight:%4; }" + "#panelTitle { color:#1F2A3D; font-size:%1px; font-weight:%3; }" "#panelBadge { background:#EAEEF5; color:#5A6B85; border-radius:9px;" - " padding:1px 7px; font-size:%2px; font-weight:%4; }" - "#panelBadgeWarn { background:%5; color:%6; border-radius:9px;" - " padding:1px 7px; font-size:%2px; font-weight:%4; }" - "QToolButton#panelAction { border:none; border-radius:7px; padding:5px; }" - "QToolButton#panelAction:hover { background:#EEF3FB; }" - "QToolButton#tabBtn { border:none; border-bottom:2px solid transparent; color:#5A6B85;" - " padding:8px 4px; font-size:%3px; }" - "QToolButton#tabBtn:hover { color:#1F2A3D; }" - "QToolButton#tabBtn:checked { color:#1F2A3D; font-weight:%4;" - " border-bottom:2px solid #2D6CB5; }") + " padding:1px 7px; font-size:%2px; font-weight:%3; }" + "#panelBadgeWarn { background:%4; color:%5; border-radius:9px;" + " padding:1px 7px; font-size:%2px; font-weight:%3; }") .arg(type::kTitle) .arg(type::kCaption) - .arg(type::kBody) .arg(type::kWeightSemibold) .arg(QString::fromUtf8(semantic::kWarningFill)) .arg(QString::fromUtf8(semantic::kWarning)); @@ -61,16 +58,13 @@ QLabel* makeBadge(QWidget* parent) return badge; } -// 表头操作按钮（静态占位）。 -QToolButton* makeActionButton(QWidget* parent, const HeaderAction& a) +// 表头操作按钮（Fluent ElaIconButton；图标沿用项目 glyph 像素图）。 +QWidget* makeActionButton(QWidget* parent, const HeaderAction& a) { - auto* btn = new QToolButton(parent); - btn->setObjectName(QStringLiteral("panelAction")); - btn->setIcon(makeGlyph(a.first, QColor("#5A6B85"), kActionIcon)); - btn->setIconSize(QSize(kActionIcon, kActionIcon)); + auto* btn = new ElaIconButton( + makeGlyph(a.first, QColor("#5A6B85"), kActionIcon).pixmap(kActionIcon, kActionIcon), parent); btn->setCursor(Qt::PointingHandCursor); btn->setToolTip(a.second + QStringLiteral("（占位）")); - btn->setAutoRaise(true); return btn; } @@ -128,7 +122,7 @@ TabbedPanel buildTabbedPanel(const QVector& tabs, const QVector
setObjectName(QStringLiteral("tabBtn")); btn->setText(t.title); btn->setIcon(makeGlyph(t.icon, QColor("#5A6B85"), kTabIcon)); @@ -136,7 +130,6 @@ TabbedPanel buildTabbedPanel(const QVector& tabs, const QVector
setToolButtonStyle(Qt::ToolButtonTextBesideIcon); btn->setCheckable(true); btn->setCursor(Qt::PointingHandCursor); - btn->setAutoRaise(true); group->addButton(btn, i); hlay->addWidget(btn); diff --git a/src/app/TopBar.cpp b/src/app/TopBar.cpp index 00f7125..54eb752 100644 --- a/src/app/TopBar.cpp +++ b/src/app/TopBar.cpp @@ -16,8 +16,11 @@ #include "Glyphs.hpp" #include "Theme.hpp" +#include +#include #include #include +#include namespace geopro::app { @@ -38,16 +41,12 @@ QFrame* makeDivider(QWidget* parent) return line; } -// 右侧图标按钮（仅图标，悬停显示文本）。 -QToolButton* makeIconButton(QWidget* parent, Glyph g, const QString& tip) +// 右侧图标按钮（Fluent ElaIconButton：自带图标字体 + 悬停 + 随主题着色）。 +QWidget* makeIconButton(QWidget* parent, ElaIconType::IconName icon, const QString& tip) { - auto* btn = new QToolButton(parent); - btn->setObjectName(QStringLiteral("iconBtn")); - btn->setIcon(makeGlyph(g, QColor("#5A6B85"), kToolIcon)); - btn->setIconSize(QSize(kToolIcon, kToolIcon)); + auto* btn = new ElaIconButton(icon, kToolIcon, parent); btn->setToolTip(tip); btn->setCursor(Qt::PointingHandCursor); - btn->setAutoRaise(true); return btn; } @@ -131,33 +130,29 @@ TopBar::TopBar(QWidget* parent) : QWidget(parent) { setFixedHeight(56); // 字号引用 Theme 排版令牌：工作空间切换器=title(15)、头像/用户名=body·label(13)、 // 角色名=caption(12)。原 11px 角色名上调到 12，去掉只差 1px 的糊层级。 + // 切换器(ElaToolButton)/图标(ElaIconButton) 自绘 Fluent，不再写它们的 QSS。 + // 仅保留：工具条底/分隔线、头像(圆形自定义)、用户名/角色。头像白字用 white 关键字(恒白)。 geopro::app::applyThemedStyleSheet( this, QStringLiteral( "#appToolBar { background:#FFFFFF; border-bottom:1px solid #E1E6EE; }" "#topDivider { color:#E1E6EE; }" - "#wsSwitcher { color:#1F2A3D; border:none; border-radius:8px; padding:8px 12px;" - " font-size:%1px; font-weight:%5; }" - "#wsSwitcher:hover { background:#EEF3FB; }" - "QToolButton#iconBtn { border:none; border-radius:8px; padding:8px; }" - "QToolButton#iconBtn:hover { background:#EEF3FB; }" "QToolButton::menu-indicator { image:none; }" - "#avatar { background:#2D6CB5; color:#FFFFFF; border-radius:17px; font-weight:%6;" - " font-size:%2px; }" - "#userName { color:#1F2A3D; font-size:%3px; font-weight:%5; }" - "#userRole { color:#8A93A3; font-size:%4px; }") - .arg(type::kTitle) + "#avatar { background:#2D6CB5; color:white; border-radius:17px; font-weight:%2;" + " font-size:%1px; }" + "#userName { color:#1F2A3D; font-size:%3px; font-weight:%4; }" + "#userRole { color:#8A93A3; font-size:%5px; }") .arg(type::kBody) + .arg(type::kWeightBold) .arg(type::kLabel) - .arg(type::kCaption) .arg(type::kWeightSemibold) - .arg(type::kWeightBold)); + .arg(type::kCaption)); auto* lay = new QHBoxLayout(this); lay->setContentsMargins(14, 0, 14, 0); lay->setSpacing(0); - // 工作空间切换器（数据驱动；初始占位文本，待 setWorkspaces 填充）。 - wsBtn_ = new QToolButton(this); + // 工作空间切换器（Fluent ElaToolButton；数据驱动，初始占位文本待 setWorkspaces 填充）。 + wsBtn_ = new ElaToolButton(this); wsBtn_->setObjectName(QStringLiteral("wsSwitcher")); wsBtn_->setIcon(makeGlyph(Glyph::Workspace, QColor("#2D6CB5"), kWorkspaceIcon)); wsBtn_->setIconSize(QSize(kWorkspaceIcon, kWorkspaceIcon)); @@ -172,8 +167,8 @@ TopBar::TopBar(QWidget* parent) : QWidget(parent) { lay->addWidget(makeDivider(this)); lay->addSpacing(10); - // 项目切换器（数据驱动）。 - projBtn_ = new QToolButton(this); + // 项目切换器（Fluent ElaToolButton；数据驱动）。 + projBtn_ = new ElaToolButton(this); projBtn_->setObjectName(QStringLiteral("wsSwitcher")); projBtn_->setIcon(makeGlyph(Glyph::Folder, QColor("#2D6CB5"), kWorkspaceIcon)); projBtn_->setIconSize(QSize(kWorkspaceIcon, kWorkspaceIcon)); @@ -186,9 +181,9 @@ TopBar::TopBar(QWidget* parent) : QWidget(parent) { lay->addStretch(); - lay->addWidget(makeIconButton(this, Glyph::Help, QStringLiteral("帮助"))); - lay->addWidget(makeIconButton(this, Glyph::Bell, QStringLiteral("通知"))); - lay->addWidget(makeIconButton(this, Glyph::Gear, QStringLiteral("设置"))); + lay->addWidget(makeIconButton(this, ElaIconType::CircleQuestion, QStringLiteral("帮助"))); + lay->addWidget(makeIconButton(this, ElaIconType::Bell, QStringLiteral("通知"))); + lay->addWidget(makeIconButton(this, ElaIconType::Gear, QStringLiteral("设置"))); lay->addSpacing(10); lay->addWidget(makeDivider(this)); lay->addSpacing(12);