diff --git a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
index e5b63b1d..efc5190a 100644
--- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
+++ b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
@@ -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>
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index 8f2faa77..a0f0112d 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -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);
 }