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