feat(platform): color topbar link health

This commit is contained in:
lingniu
2026-07-03 23:03:42 +08:00
parent b73292b97e
commit 71b714bbf7
2 changed files with 20 additions and 1 deletions

View File

@@ -24,6 +24,13 @@ const navItems = [
{ itemKey: 'quality', text: '数据质量', icon: <IconHistogram /> }
];
function linkHealthClassName(count: number | null) {
if (count == null) {
return '';
}
return count > 0 ? 'vp-link-health-button-warning' : 'vp-link-health-button-ok';
}
export function AppShell({
activePage,
linkIssueCount,
@@ -78,7 +85,7 @@ export function AppShell({
</Space>
<Space spacing={12}>
<Tag color="blue"></Tag>
<Button size="small" onClick={() => onChange('quality')}>
<Button size="small" className={linkHealthClassName(linkIssueCount)} onClick={() => onChange('quality')}>
{linkIssueCount == null ? '链路监控' : linkIssueCount > 0 ? `链路 ${linkIssueCount} 项关注` : '链路正常'}
</Button>
</Space>

View File

@@ -68,6 +68,18 @@ body {
z-index: 10;
}
.vp-link-health-button-warning {
color: var(--vp-warning);
border-color: rgba(247, 144, 9, 0.45);
background: rgba(247, 144, 9, 0.08);
}
.vp-link-health-button-ok {
color: var(--vp-success);
border-color: rgba(18, 183, 106, 0.45);
background: rgba(18, 183, 106, 0.08);
}
.vp-page {
padding: var(--vp-page-gutter);
}