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 { AppShell, type PageKey } from './layout/AppShell';
import { Dashboard } from './pages/Dashboard'; import { Dashboard } from './pages/Dashboard';
import { History } from './pages/History'; import { History } from './pages/History';
@@ -11,6 +13,15 @@ import { Vehicles } from './pages/Vehicles';
export default function App() { export default function App() {
const [activePage, setActivePage] = useState<PageKey>('dashboard'); const [activePage, setActivePage] = useState<PageKey>('dashboard');
const [activeVin, setActiveVin] = useState('LB9A32A24R0LS1426'); 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 openVehicle = (vin: string) => {
const nextVin = vin.trim(); const nextVin = vin.trim();
@@ -32,7 +43,7 @@ export default function App() {
}; };
return ( return (
<AppShell activePage={activePage} onChange={setActivePage} onVehicleSearch={openVehicle}> <AppShell activePage={activePage} linkIssueCount={linkIssueCount} onChange={setActivePage} onVehicleSearch={openVehicle}>
{pages[activePage]} {pages[activePage]}
</AppShell> </AppShell>
); );

View File

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