feat(platform): color topbar link health
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user