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 /> } { 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({ export function AppShell({
activePage, activePage,
linkIssueCount, linkIssueCount,
@@ -78,7 +85,7 @@ export function AppShell({
</Space> </Space>
<Space spacing={12}> <Space spacing={12}>
<Tag color="blue"></Tag> <Tag color="blue"></Tag>
<Button size="small" onClick={() => onChange('quality')}> <Button size="small" className={linkHealthClassName(linkIssueCount)} onClick={() => onChange('quality')}>
{linkIssueCount == null ? '链路监控' : linkIssueCount > 0 ? `链路 ${linkIssueCount} 项关注` : '链路正常'} {linkIssueCount == null ? '链路监控' : linkIssueCount > 0 ? `链路 ${linkIssueCount} 项关注` : '链路正常'}
</Button> </Button>
</Space> </Space>

View File

@@ -68,6 +68,18 @@ body {
z-index: 10; 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 { .vp-page {
padding: var(--vp-page-gutter); padding: var(--vp-page-gutter);
} }