From 8cc839669c7d92ef9699d3919d28e5226ce1154c Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Sat, 14 Mar 2026 16:50:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=8A=82=E7=82=B9=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=80=89=E9=A1=B9=E5=8D=A1=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E5=9C=A8=E6=95=B0=E6=8D=AE=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=E5=92=8C=E8=8A=82=E7=82=B9=E4=BF=A1=E6=81=AF=E4=B9=8B?=
 =?UTF-8?q?=E9=97=B4=E5=88=87=E6=8D=A2=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes/components/node-detail-page.tsx     | 55 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/atsf_server/web/features/nodes/components/node-detail-page.tsx b/atsf_server/web/features/nodes/components/node-detail-page.tsx
index 0e9cc6c9..334b9976 100644
--- a/atsf_server/web/features/nodes/components/node-detail-page.tsx
+++ b/atsf_server/web/features/nodes/components/node-detail-page.tsx
@@ -64,6 +64,7 @@ type FeedbackState = {
 };
 
 type HealthEventFilter = 'all' | 'active' | 'resolved';
+type NodeDetailTab = 'dashboard' | 'info';
 
 function getErrorMessage(error: unknown) {
   return error instanceof Error ? error.message : '请求失败，请稍后重试。';
@@ -265,6 +266,7 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
   const [serverUrl, setServerUrl] = useState('');
   const [healthEventFilter, setHealthEventFilter] =
     useState<HealthEventFilter>('all');
+  const [activeTab, setActiveTab] = useState<NodeDetailTab>('dashboard');
 
   const nodesQuery = useQuery({
     queryKey: nodesQueryKey,
@@ -475,9 +477,29 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
   }, [
     activeHealthEvents,
     healthEventFilter,
-    observability?.health_events,
-    resolvedHealthEvents,
+      observability?.health_events,
+      resolvedHealthEvents,
   ]);
+  const tabs = useMemo(
+    () =>
+      [
+        {
+          key: 'dashboard' as const,
+          label: '数据看板',
+          description: '系统画像、资源快照、流量趋势与健康事件。',
+        },
+        {
+          key: 'info' as const,
+          label: '节点信息',
+          description: '更新模式、版本状态、部署信息与应用记录。',
+        },
+      ] satisfies Array<{
+        key: NodeDetailTab;
+        label: string;
+        description: string;
+      }>,
+    [],
+  );
 
   if (nodesQuery.isLoading) {
     return <LoadingState />;
@@ -632,6 +654,29 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
           <InlineMessage tone={feedback.tone} message={feedback.message} />
         ) : null}
 
+        <div className="flex flex-wrap gap-3">
+          {tabs.map((tab) => (
+            <button
+              key={tab.key}
+              type="button"
+              onClick={() => setActiveTab(tab.key)}
+              className={[
+                'rounded-2xl border px-4 py-3 text-left transition',
+                activeTab === tab.key
+                  ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                  : 'border-[var(--border-default)] bg-[var(--surface-muted)] text-[var(--foreground-secondary)] hover:border-[var(--border-strong)] hover:text-[var(--foreground-primary)]',
+              ].join(' ')}
+            >
+              <p className="text-sm font-semibold">{tab.label}</p>
+              <p className="mt-1 text-xs leading-5 text-inherit/80">
+                {tab.description}
+              </p>
+            </button>
+          ))}
+        </div>
+
+        {activeTab === 'dashboard' ? (
+          <>
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
           <SummaryStat
             label="运行诊断"
@@ -1260,7 +1305,11 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
             )}
           </AppCard>
         </div>
+          </>
+        ) : null}
 
+        {activeTab === 'info' ? (
+          <>
         <div className="grid gap-4 xl:grid-cols-3">
           <AppCard title="更新模式">
             <div className="space-y-3">
@@ -1623,6 +1672,8 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
             </div>
           )}
         </AppCard>
+          </>
+        ) : null}
       </div>
 
       <ConfigVersionSnapshotModal