feat(nodes): 添加健康事件筛选功能和节点列表过滤描述

atsf_server/web/features/dashboard/components/dashboard-overview.tsx

@@ -104,10 +104,7 @@ function RiskSignal({
     return content;
   }
   return (
-    <Link
-      href={href}
-      className="block transition hover:opacity-90"
-    >
+    <Link href={href} className="block transition hover:opacity-90">
       {content}
     </Link>
   );

atsf_server/web/features/nodes/components/node-detail-page.tsx

@@ -78,6 +78,8 @@ type FeedbackState = {
   message: string;
 };
 
+type HealthEventFilter = 'all' | 'active' | 'resolved';
+
 const defaultValues: NodeFormValues = {
   name: '',
   auto_update_enabled: false,
@@ -266,6 +268,8 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
   const [agentUpdateFeedback, setAgentUpdateFeedback] =
     useState<FeedbackState | null>(null);
   const [serverUrl, setServerUrl] = useState('');
+  const [healthEventFilter, setHealthEventFilter] =
+    useState<HealthEventFilter>('all');
 
   const form = useForm<NodeFormValues>({
     resolver: zodResolver(nodeSchema),
@@ -535,6 +539,21 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
       ) ?? [],
     [observability?.health_events],
   );
+  const filteredHealthEvents = useMemo(() => {
+    switch (healthEventFilter) {
+      case 'active':
+        return activeHealthEvents;
+      case 'resolved':
+        return resolvedHealthEvents;
+      default:
+        return observability?.health_events ?? [];
+    }
+  }, [
+    activeHealthEvents,
+    healthEventFilter,
+    observability?.health_events,
+    resolvedHealthEvents,
+  ]);
   const memoryUsageRatio = formatUsageRatio(
     latestMetricSnapshot?.memory_used_bytes,
     latestMetricSnapshot?.memory_total_bytes,
@@ -1051,7 +1070,43 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
           >
             {observability?.health_events.length ? (
               <div className="space-y-4">
-                {observability.health_events.slice(0, 8).map((event) => (
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setHealthEventFilter('all')}
+                    className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                      healthEventFilter === 'all'
+                        ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                        : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                    }`}
+                  >
+                    全部事件
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setHealthEventFilter('active')}
+                    className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                      healthEventFilter === 'active'
+                        ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                        : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                    }`}
+                  >
+                    活动中
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setHealthEventFilter('resolved')}
+                    className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                      healthEventFilter === 'resolved'
+                        ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                        : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                    }`}
+                  >
+                    已恢复
+                  </button>
+                </div>
+
+                {filteredHealthEvents.slice(0, 8).map((event) => (
                   <div
                     key={`${event.event_type}-${event.last_triggered_at}-${event.status}`}
                     className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
@@ -1093,6 +1148,11 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
                     </div>
                   </div>
                 ))}
+                {filteredHealthEvents.length === 0 ? (
+                  <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-sm text-[var(--foreground-secondary)]">
+                    当前筛选下没有健康事件。
+                  </div>
+                ) : null}
               </div>
             ) : (
               <EmptyState

atsf_server/web/features/nodes/components/nodes-page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
@@ -15,6 +16,7 @@ import { PageHeader } from '@/components/layout/page-header';
 import { AppModal } from '@/components/ui/app-modal';
 import { AppCard } from '@/components/ui/app-card';
 import { StatusBadge } from '@/components/ui/status-badge';
+import { getConfigVersions } from '@/features/config-versions/api/config-versions';
 import {
   createNode,
   deleteNode,
@@ -42,6 +44,14 @@ import {
 } from '@/features/nodes/utils';
 
 const nodesQueryKey = ['nodes'];
+const supportedRiskFilters = [
+  'all',
+  'offline',
+  'unhealthy',
+  'lagging',
+] as const;
+
+type NodeRiskFilter = (typeof supportedRiskFilters)[number];
 
 const nodeSchema = z.object({
   name: z
@@ -76,6 +86,7 @@ function toPayload(values: NodeFormValues): NodeMutationPayload {
 }
 
 export function NodesPage() {
+  const searchParams = useSearchParams();
   const queryClient = useQueryClient();
   const [feedback, setFeedback] = useState<FeedbackState | null>(null);
   const [editingNodeId, setEditingNodeId] = useState<number | null>(null);
@@ -97,6 +108,12 @@ export function NodesPage() {
     refetchInterval: 5000,
   });
 
+  const configVersionsQuery = useQuery({
+    queryKey: ['config-versions'],
+    queryFn: getConfigVersions,
+    refetchInterval: 5000,
+  });
+
   const saveMutation = useMutation({
     mutationFn: async (values: NodeFormValues) => {
       const payload = toPayload(values);
@@ -133,6 +150,50 @@ export function NodesPage() {
   });
 
   const nodes = useMemo(() => nodesQuery.data ?? [], [nodesQuery.data]);
+  const activeVersion = useMemo(
+    () =>
+      (configVersionsQuery.data ?? []).find((item) => item.is_active)
+        ?.version ?? '',
+    [configVersionsQuery.data],
+  );
+  const riskFilter = useMemo<NodeRiskFilter>(() => {
+    const current = searchParams.get('risk')?.trim().toLowerCase() ?? 'all';
+    return supportedRiskFilters.includes(current as NodeRiskFilter)
+      ? (current as NodeRiskFilter)
+      : 'all';
+  }, [searchParams]);
+  const filteredNodes = useMemo(() => {
+    switch (riskFilter) {
+      case 'offline':
+        return nodes.filter((node) => node.status === 'offline');
+      case 'unhealthy':
+        return nodes.filter((node) => node.openresty_status === 'unhealthy');
+      case 'lagging':
+        return nodes.filter((node) => {
+          if (!activeVersion) {
+            return false;
+          }
+          return node.current_version !== activeVersion;
+        });
+      default:
+        return nodes;
+    }
+  }, [activeVersion, nodes, riskFilter]);
+
+  const filterDescription = useMemo(() => {
+    switch (riskFilter) {
+      case 'offline':
+        return '当前仅展示离线节点。';
+      case 'unhealthy':
+        return '当前仅展示 OpenResty 异常节点。';
+      case 'lagging':
+        return activeVersion
+          ? `当前仅展示未追平激活版本 ${activeVersion} 的节点。`
+          : '当前没有激活版本，无法筛选配置落后节点。';
+      default:
+        return '列表每 5 秒自动刷新一次。';
+    }
+  }, [activeVersion, riskFilter]);
 
   const handleReset = () => {
     setFeedback(null);
@@ -207,7 +268,7 @@ export function NodesPage() {
 
         <AppCard
           title="节点列表"
-          description="列表每 5 秒自动刷新一次。"
+          description={filterDescription}
           action={
             <SecondaryButton
               type="button"
@@ -226,114 +287,167 @@ export function NodesPage() {
               title="节点列表加载失败"
               description={getErrorMessage(nodesQuery.error)}
             />
-          ) : nodes.length === 0 ? (
+          ) : filteredNodes.length === 0 ? (
             <EmptyState
-              title="暂无节点"
-              description="请先创建一个节点，然后进入详情页查看专属部署命令。"
+              title={riskFilter === 'all' ? '暂无节点' : '当前筛选无结果'}
+              description={
+                riskFilter === 'all'
+                  ? '请先创建一个节点，然后进入详情页查看专属部署命令。'
+                  : '可以返回总览继续排查，或切换到全部节点查看完整列表。'
+              }
             />
           ) : (
-            <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
-                <thead>
-                  <tr className="text-[var(--foreground-secondary)]">
-                    <th className="px-3 py-3 font-medium">节点</th>
-                    <th className="px-3 py-3 font-medium">状态</th>
-                    <th className="px-3 py-3 font-medium">Agent / OpenResty</th>
-                    <th className="px-3 py-3 font-medium">运行健康</th>
-                    <th className="px-3 py-3 font-medium">当前版本</th>
-                    <th className="px-3 py-3 font-medium">最近应用</th>
-                    <th className="px-3 py-3 font-medium">最近心跳</th>
-                    <th className="px-3 py-3 font-medium">操作</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-[var(--border-default)]">
-                  {nodes.map((node) => (
-                    <tr key={node.id} className="align-top">
-                      <td className="px-3 py-4">
-                        <div className="space-y-1">
-                          <p className="font-medium text-[var(--foreground-primary)]">
-                            {node.name}
-                          </p>
-                          <p className="text-xs text-[var(--foreground-secondary)]">
-                            IP：{node.ip || 'null'}
-                          </p>
-                        </div>
-                      </td>
-                      <td className="px-3 py-4">
-                        <StatusBadge
-                          label={getNodeStatusLabel(node.status)}
-                          variant={getNodeStatusVariant(node.status)}
-                        />
-                      </td>
-                      <td className="px-3 py-4 text-[var(--foreground-secondary)]">
-                        {node.agent_version || 'unknown'} /{' '}
-                        {node.nginx_version || 'unknown'}
-                      </td>
-                      <td className="px-3 py-4">
-                        <div className="space-y-2">
-                          <StatusBadge
-                            label={getOpenrestyStatusLabel(
-                              node.openresty_status,
-                            )}
-                            variant={getOpenrestyStatusVariant(
-                              node.openresty_status,
-                            )}
-                          />
-                        </div>
-                      </td>
-                      <td className="px-3 py-4 text-[var(--foreground-secondary)]">
-                        {node.current_version || '未应用'}
-                      </td>
-                      <td className="px-3 py-4">
-                        <div className="space-y-2">
-                          <StatusBadge
-                            label={getApplyLabel(node.latest_apply_result)}
-                            variant={getApplyVariant(node.latest_apply_result)}
-                          />
-                        </div>
-                      </td>
-                      <td className="px-3 py-4 text-[var(--foreground-secondary)]">
-                        {isMeaningfulTime(node.last_seen_at)
-                          ? `${formatRelativeTime(
-                              node.last_seen_at,
-                            )} · ${formatDateTime(node.last_seen_at)}`
-                          : '暂无'}
-                      </td>
-                      <td className="px-3 py-4">
-                        <div className="flex flex-wrap gap-2">
-                          <Link
-                            href={`/node/detail?id=${node.id}`}
-                            className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-3 py-2 text-xs font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
-                          >
-                            详情
-                          </Link>
-                          <SecondaryButton
-                            type="button"
-                            onClick={() =>
-                              handleEdit(
-                                node.id,
-                                node.name,
-                                node.auto_update_enabled,
-                              )
-                            }
-                            className="px-3 py-2 text-xs"
-                          >
-                            编辑
-                          </SecondaryButton>
-                          <DangerButton
-                            type="button"
-                            onClick={() => handleDelete(node.id, node.name)}
-                            disabled={deleteMutation.isPending}
-                            className="px-3 py-2 text-xs"
-                          >
-                            删除
-                          </DangerButton>
-                        </div>
-                      </td>
+            <div className="space-y-4">
+              <div className="flex flex-wrap gap-2">
+                <Link
+                  href="/node"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    riskFilter === 'all'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  全部节点
+                </Link>
+                <Link
+                  href="/node?risk=offline"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    riskFilter === 'offline'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  离线节点
+                </Link>
+                <Link
+                  href="/node?risk=unhealthy"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    riskFilter === 'unhealthy'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  OpenResty 异常
+                </Link>
+                <Link
+                  href="/node?risk=lagging"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    riskFilter === 'lagging'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  配置落后
+                </Link>
+              </div>
+
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                  <thead>
+                    <tr className="text-[var(--foreground-secondary)]">
+                      <th className="px-3 py-3 font-medium">节点</th>
+                      <th className="px-3 py-3 font-medium">状态</th>
+                      <th className="px-3 py-3 font-medium">
+                        Agent / OpenResty
+                      </th>
+                      <th className="px-3 py-3 font-medium">运行健康</th>
+                      <th className="px-3 py-3 font-medium">当前版本</th>
+                      <th className="px-3 py-3 font-medium">最近应用</th>
+                      <th className="px-3 py-3 font-medium">最近心跳</th>
+                      <th className="px-3 py-3 font-medium">操作</th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
+                  </thead>
+                  <tbody className="divide-y divide-[var(--border-default)]">
+                    {filteredNodes.map((node) => (
+                      <tr key={node.id} className="align-top">
+                        <td className="px-3 py-4">
+                          <div className="space-y-1">
+                            <p className="font-medium text-[var(--foreground-primary)]">
+                              {node.name}
+                            </p>
+                            <p className="text-xs text-[var(--foreground-secondary)]">
+                              IP：{node.ip || 'null'}
+                            </p>
+                          </div>
+                        </td>
+                        <td className="px-3 py-4">
+                          <StatusBadge
+                            label={getNodeStatusLabel(node.status)}
+                            variant={getNodeStatusVariant(node.status)}
+                          />
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {node.agent_version || 'unknown'} /{' '}
+                          {node.nginx_version || 'unknown'}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="space-y-2">
+                            <StatusBadge
+                              label={getOpenrestyStatusLabel(
+                                node.openresty_status,
+                              )}
+                              variant={getOpenrestyStatusVariant(
+                                node.openresty_status,
+                              )}
+                            />
+                          </div>
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {node.current_version || '未应用'}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="space-y-2">
+                            <StatusBadge
+                              label={getApplyLabel(node.latest_apply_result)}
+                              variant={getApplyVariant(
+                                node.latest_apply_result,
+                              )}
+                            />
+                          </div>
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {isMeaningfulTime(node.last_seen_at)
+                            ? `${formatRelativeTime(
+                                node.last_seen_at,
+                              )} · ${formatDateTime(node.last_seen_at)}`
+                            : '暂无'}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="flex flex-wrap gap-2">
+                            <Link
+                              href={`/node/detail?id=${node.id}`}
+                              className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-3 py-2 text-xs font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+                            >
+                              详情
+                            </Link>
+                            <SecondaryButton
+                              type="button"
+                              onClick={() =>
+                                handleEdit(
+                                  node.id,
+                                  node.name,
+                                  node.auto_update_enabled,
+                                )
+                              }
+                              className="px-3 py-2 text-xs"
+                            >
+                              编辑
+                            </SecondaryButton>
+                            <DangerButton
+                              type="button"
+                              onClick={() => handleDelete(node.id, node.name)}
+                              disabled={deleteMutation.isPending}
+                              className="px-3 py-2 text-xs"
+                            >
+                              删除
+                            </DangerButton>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </div>
           )}
         </AppCard>