refactor(theme): TopBar/PanelHeader 内联样式迁移到语义令牌(规范§4.3/§5)

This commit is contained in:
gaozheng 2026-06-10 16:21:49 +08:00
parent b2ec3459c7
commit b728631477
2 changed files with 27 additions and 29 deletions

View File

@ -31,25 +31,23 @@ constexpr int kTabIcon = 19; // Tab 图标
QString headerQss()
{
return QStringLiteral(
"#panelHeader { background:#FFFFFF; border-bottom:1px solid #E6EAF1; }"
"#panelTitle { color:#1F2A3D; font-size:%1px; font-weight:%3; }"
"#panelBadge { background:#EAEEF5; color:#5A6B85; border-radius:9px;"
"#panelHeader { background:{{bg/panel}}; border-bottom:1px solid {{divider}}; }"
"#panelTitle { color:{{text/primary}}; font-size:%1px; font-weight:%3; }"
"#panelBadge { background:{{bg/hover}}; color:{{text/secondary}}; border-radius:9px;"
" padding:1px 7px; font-size:%2px; font-weight:%3; }"
"#panelBadgeWarn { background:%4; color:%5; border-radius:9px;"
"#panelBadgeWarn { background:{{status/warning-bg}}; color:{{status/warning}}; border-radius:9px;"
" padding:1px 7px; font-size:%2px; font-weight:%3; }"
"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 6px; font-size:%6px; }"
"QToolButton#tabBtn:hover { color:#1F2A3D; }"
"QToolButton#tabBtn:checked { color:#2D6CB5; font-weight:%3;"
" border-bottom:2px solid #2D6CB5; }")
.arg(scaledPx(type::kTitle))
.arg(scaledPx(type::kCaption))
.arg(type::kWeightSemibold)
.arg(QString::fromUtf8(semantic::kWarningFill))
.arg(QString::fromUtf8(semantic::kWarning))
.arg(scaledPx(type::kBody));
"QToolButton#panelAction:hover { background:{{bg/hover}}; }"
"QToolButton#tabBtn { border:none; border-bottom:2px solid transparent; color:{{text/secondary}};"
" padding:8px 6px; font-size:%4px; }"
"QToolButton#tabBtn:hover { color:{{text/primary}}; }"
"QToolButton#tabBtn:checked { color:{{accent/primary}}; font-weight:%3;"
" border-bottom:2px solid {{accent/primary}}; }")
.arg(scaledPx(type::kTitle)) // %1 标题字号
.arg(scaledPx(type::kCaption)) // %2 徽标字号
.arg(type::kWeightSemibold) // %3 字重(多处)
.arg(scaledPx(type::kBody)); // %4 页签字号
}
// 数量徽标(默认隐藏,调用方 setText+setVisible 显示)。
@ -83,7 +81,7 @@ QWidget* buildPanelHeader(Glyph icon, const QString& title, const QVector<Header
auto* header = new QWidget();
header->setObjectName(QStringLiteral("panelHeader"));
header->setFixedHeight(kHeaderHeight);
geopro::app::applyThemedStyleSheet(header, headerQss());
geopro::app::applyTokenizedStyleSheet(header, headerQss());
auto* lay = new QHBoxLayout(header);
lay->setContentsMargins(12, 0, 8, 0);
@ -116,7 +114,7 @@ TabbedPanel buildTabbedPanel(const QVector<PanelTab>& tabs, const QVector<Header
auto* header = new QWidget(box);
header->setObjectName(QStringLiteral("panelHeader"));
header->setFixedHeight(kHeaderHeight);
geopro::app::applyThemedStyleSheet(header, headerQss());
geopro::app::applyTokenizedStyleSheet(header, headerQss());
auto* hlay = new QHBoxLayout(header);
hlay->setContentsMargins(10, 0, 8, 0);
hlay->setSpacing(2);
@ -171,7 +169,7 @@ SegmentedHeader buildSegmentedHeader(const QVector<QString>& segments,
auto* header = new QWidget();
header->setObjectName(QStringLiteral("panelHeader"));
header->setFixedHeight(kHeaderHeight);
geopro::app::applyThemedStyleSheet(header, headerQss());
geopro::app::applyTokenizedStyleSheet(header, headerQss());
auto* hlay = new QHBoxLayout(header);
hlay->setContentsMargins(10, 0, 8, 0);

View File

@ -131,21 +131,21 @@ TopBar::TopBar(QWidget* parent) : QWidget(parent) {
// 字号引用 Theme 排版令牌:工作空间切换器=title(15)、头像/用户名=body·label(13)、
// 角色名=caption(12)。原 11px 角色名上调到 12去掉只差 1px 的糊层级。
// 切换器(ElaToolButton)/图标(ElaIconButton) 自绘 Fluent不再写它们的 QSS。
// 仅保留:工具条底/分隔线、头像(圆形自定义)、用户名/角色。头像白字用 white 关键字(恒白)
geopro::app::applyThemedStyleSheet(
// 仅保留:工具条底/分隔线、头像(圆形自定义)、用户名/角色。头像白字用 {{text/on-primary}} 令牌
geopro::app::applyTokenizedStyleSheet(
this, QStringLiteral(
"#appToolBar { background:#FFFFFF; border-bottom:1px solid #E1E6EE; }"
"#topDivider { color:#E1E6EE; }"
"#appToolBar { background:{{bg/header}}; border-bottom:1px solid {{divider}}; }"
"#topDivider { color:{{divider}}; }"
"QToolButton::menu-indicator { image:none; }"
"#wsSwitcher { color:#1F2A3D; border:none; border-radius:8px; padding:8px 12px;"
"#wsSwitcher { color:{{text/primary}}; border:none; border-radius:8px; padding:8px 12px;"
" font-size:%6px; font-weight:%4; }"
"#wsSwitcher:hover { background:#EEF3FB; }"
"#wsSwitcher:hover { background:{{bg/hover}}; }"
"QToolButton#iconBtn { border:none; border-radius:8px; padding:8px; }"
"QToolButton#iconBtn:hover { background:#EEF3FB; }"
"#avatar { background:#2D6CB5; color:white; border-radius:17px; font-weight:%2;"
"QToolButton#iconBtn:hover { background:{{bg/hover}}; }"
"#avatar { background:{{accent/primary}}; color:{{text/on-primary}}; border-radius:17px; font-weight:%2;"
" font-size:%1px; }"
"#userName { color:#1F2A3D; font-size:%3px; font-weight:%4; }"
"#userRole { color:#8A93A3; font-size:%5px; }")
"#userName { color:{{text/primary}}; font-size:%3px; font-weight:%4; }"
"#userRole { color:{{text/tertiary}}; font-size:%5px; }")
.arg(scaledPx(type::kBody))
.arg(type::kWeightBold)
.arg(scaledPx(type::kLabel))