feat(platform): show link issue count in topbar

This commit is contained in:
lingniu
2026-07-03 22:54:44 +08:00
parent 94ea30223b
commit b3168dda2a
2 changed files with 18 additions and 3 deletions

View File

@@ -1,4 +1,6 @@
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { Toast } from '@douyinfe/semi-ui';
import { api } from './api/client';
import { AppShell, type PageKey } from './layout/AppShell';
import { Dashboard } from './pages/Dashboard';
import { History } from './pages/History';
@@ -11,6 +13,15 @@ import { Vehicles } from './pages/Vehicles';
export default function App() {
const [activePage, setActivePage] = useState<PageKey>('dashboard');
const [activeVin, setActiveVin] = useState('LB9A32A24R0LS1426');
const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null);
useEffect(() => {
api.opsHealth()
.then((health) => {
setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length);
})
.catch((error: Error) => Toast.error(error.message));
}, []);
const openVehicle = (vin: string) => {
const nextVin = vin.trim();
@@ -32,7 +43,7 @@ export default function App() {
};
return (
<AppShell activePage={activePage} onChange={setActivePage} onVehicleSearch={openVehicle}>
<AppShell activePage={activePage} linkIssueCount={linkIssueCount} onChange={setActivePage} onVehicleSearch={openVehicle}>
{pages[activePage]}
</AppShell>
);

View File

@@ -26,11 +26,13 @@ const navItems = [
export function AppShell({
activePage,
linkIssueCount,
onChange,
onVehicleSearch,
children
}: {
activePage: PageKey;
linkIssueCount: number | null;
onChange: (page: PageKey) => void;
onVehicleSearch: (keyword: string) => void;
children: ReactNode;
@@ -76,7 +78,9 @@ export function AppShell({
</Space>
<Space spacing={12}>
<Tag color="blue"></Tag>
<Button size="small" onClick={() => onChange('quality')}></Button>
<Button size="small" onClick={() => onChange('quality')}>
{linkIssueCount == null ? '链路监控' : linkIssueCount > 0 ? `链路 ${linkIssueCount} 项关注` : '链路正常'}
</Button>
</Space>
</header>
{children}