merge: 合并 main 至 dev

同步节点详情 Tabs 布局重构。

Wavelet/frontend/app/(main)/nodes/components/edge-node-detail.tsx

@@ -4,7 +4,17 @@ import Link from 'next/link';
 import {useRouter} from 'next/navigation';
 import {useMutation, useQueryClient} from '@tanstack/react-query';
 import {useState} from 'react';
-import {ArrowLeft, FileText, RefreshCw, RotateCcw, Trash2, Upload,} from 'lucide-react';
+import {
+  Activity,
+  Cpu,
+  FileText,
+  Fingerprint,
+  Package,
+  RefreshCw,
+  RotateCcw,
+  Trash2,
+  Upload,
+} from 'lucide-react';
 import {toast} from 'sonner';
 
 import {
@@ -18,12 +28,17 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
 import {formatDateTime} from '@/lib/utils';
 import type {NodeAgentReleaseInfo, NodeItem, ReleaseChannel} from '@/lib/services/openflare';
 import {NodeService} from '@/lib/services/openflare';
 
 import {AgentUpdateDialog} from './agent-update-dialog';
+import {NodeDetailShell} from './node-detail-shell';
+import {
+  NodeErrorBanner,
+  NodeInfoRow,
+  NodeSectionCard,
+} from './node-detail-primitives';
 import {NodeEditorDialog} from './node-editor-dialog';
 import {NodeObservability} from './node-observability';
 import {NodeStatusBadge} from './node-status-badge';
@@ -116,180 +131,189 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
     ]);
   };
 
-  return (
-    <div className="py-6 px-1 space-y-6">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <Button variant="ghost" size="sm" className="h-8 px-2" asChild>
-            <Link href="/nodes">
-              <ArrowLeft className="size-4" />
-            </Link>
-          </Button>
-          <h1 className="text-2xl font-semibold tracking-tight">{node.name}</h1>
-          <NodeStatusBadge
-            label={getNodeStatusLabel(node.status)}
-            tone={getNodeStatusTone(node.status)}
-          />
-        </div>
+  const headerActions = (
+    <>
+      <Button variant="outline" size="sm" className="h-8" onClick={() => setEditorOpen(true)}>
+        编辑
+      </Button>
+      <Button variant="outline" size="sm" className="h-8" onClick={handleRefresh}>
+        <RefreshCw className="size-3.5 mr-1.5" />
+        刷新
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8"
+        disabled={forceSyncMutation.isPending}
+        onClick={() => forceSyncMutation.mutate()}
+      >
+        <RotateCcw className="size-3.5 mr-1.5" />
+        {forceSyncMutation.isPending ? '同步中...' : '强制同步'}
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8"
+        disabled={restartMutation.isPending}
+        onClick={() => restartMutation.mutate()}
+      >
+        {restartMutation.isPending ? '下发中...' : '重启 OpenResty'}
+      </Button>
+      <Button variant="secondary" size="sm" className="h-8" onClick={() => setUpgradeOpen(true)}>
+        <Upload className="size-3.5 mr-1.5" />
+        {node.update_requested ? '查看升级' : '升级 Agent'}
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8 text-destructive hover:text-destructive"
+        onClick={() => setDeleteOpen(true)}
+      >
+        <Trash2 className="size-3.5 mr-1.5" />
+        删除
+      </Button>
+    </>
+  );
 
-        <div className="flex flex-wrap items-center gap-2">
-          <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setEditorOpen(true)}>
-            编辑
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs"
-            onClick={handleRefresh}
-            disabled={false}
-          >
-            <RefreshCw className="size-3.5 mr-1" />
-            刷新
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs"
-            disabled={forceSyncMutation.isPending}
-            onClick={() => forceSyncMutation.mutate()}
-          >
-            <RotateCcw className="size-3.5 mr-1" />
-            {forceSyncMutation.isPending ? '同步中...' : '强制同步'}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs"
-            disabled={restartMutation.isPending}
-            onClick={() => restartMutation.mutate()}
-          >
-            {restartMutation.isPending ? '下发中...' : '重启 OpenResty'}
-          </Button>
-          <Button
-            variant="secondary"
-            size="sm"
-            className="h-7 text-xs"
-            onClick={() => setUpgradeOpen(true)}
-          >
-            <Upload className="size-3.5 mr-1" />
-            {node.update_requested ? '查看升级' : '升级 Agent'}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs text-destructive hover:text-destructive"
-            onClick={() => setDeleteOpen(true)}
-          >
-            <Trash2 className="size-3.5 mr-1" />
-            删除
-          </Button>
-        </div>
-      </div>
+  const overviewTab = (
+    <div className="space-y-6">
+      {node.last_error ? <NodeErrorBanner message={node.last_error} /> : null}
 
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>节点 ID</CardDescription>
-            <CardTitle className="text-sm font-medium break-all">{node.node_id}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>Agent 版本</CardDescription>
-            <CardTitle className="text-sm font-medium">{node.version || 'unknown'}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>当前配置版本</CardDescription>
-            <CardTitle className="text-sm font-medium">{node.current_version || '未应用'}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>最近心跳</CardDescription>
-            <CardTitle className="text-sm font-medium">
+      <div className="grid gap-6 xl:grid-cols-2">
+        <NodeSectionCard title="运行状态" description="节点在线情况与 OpenResty 健康">
+          <div className="divide-y">
+            <NodeInfoRow label="运行状态">
+              <NodeStatusBadge
+                label={getNodeStatusLabel(node.status)}
+                tone={getNodeStatusTone(node.status)}
+              />
+            </NodeInfoRow>
+            <NodeInfoRow label="OpenResty 健康">
+              <NodeStatusBadge
+                label={getOpenrestyStatusLabel(node.openresty_status)}
+                tone={getOpenrestyStatusTone(node.openresty_status)}
+              />
+            </NodeInfoRow>
+            <NodeInfoRow label="最近心跳">
               {isMeaningfulTime(node.last_seen_at)
-                ? formatRelativeTime(node.last_seen_at)
+                ? `${formatRelativeTime(node.last_seen_at)} · ${formatDateTime(node.last_seen_at)}`
                 : '暂无'}
-            </CardTitle>
-          </CardHeader>
-        </Card>
-      </div>
-
-      <Card className="border-dashed shadow-none">
-        <CardHeader className="flex-row items-center justify-between space-y-0">
-          <div>
-            <CardTitle className="text-base font-semibold">节点信息</CardTitle>
-            <CardDescription>边缘代理节点 (edge_node)</CardDescription>
-          </div>
-          <Button variant="outline" size="sm" className="h-7 text-xs" asChild>
-            <Link href={`/apply-logs?node_id=${encodeURIComponent(node.node_id)}`}>
-              <FileText className="size-3.5 mr-1" />
-              应用记录
-            </Link>
-          </Button>
-        </CardHeader>
-        <CardContent className="grid gap-3 text-sm md:grid-cols-2 xl:grid-cols-3">
-          <div className="flex items-center justify-between gap-3">
-            <span className="text-muted-foreground">运行状态</span>
-            <NodeStatusBadge
-              label={getNodeStatusLabel(node.status)}
-              tone={getNodeStatusTone(node.status)}
-            />
-          </div>
-          <div className="flex items-center justify-between gap-3">
-            <span className="text-muted-foreground">OpenResty 健康</span>
-            <NodeStatusBadge
-              label={getOpenrestyStatusLabel(node.openresty_status)}
-              tone={getOpenrestyStatusTone(node.openresty_status)}
-            />
-          </div>
-          <div className="flex items-center justify-between gap-3">
-            <span className="text-muted-foreground">最近应用</span>
-            <NodeStatusBadge
-              label={getApplyLabel(node.latest_apply_result)}
-              tone={getApplyTone(node.latest_apply_result)}
-            />
-          </div>
-          <div className="flex items-center justify-between gap-3">
-            <span className="text-muted-foreground">IP 地址</span>
-            <span>
+            </NodeInfoRow>
+            <NodeInfoRow label="IP 地址">
               {node.ip || '—'}
               {node.ip_manual_override ? '（已锁定）' : ''}
-            </span>
+            </NodeInfoRow>
+            <NodeInfoRow label="地图点位">{node.geo_name || '未配置'}</NodeInfoRow>
           </div>
-          <div className="flex items-center justify-between gap-3">
-            <span className="text-muted-foreground">地图点位</span>
-            <span>{node.geo_name || '未配置'}</span>
+        </NodeSectionCard>
+
+        <NodeSectionCard
+          title="配置同步"
+          description="版本追平与应用结果摘要"
+          action={
+            <Button variant="outline" size="sm" className="h-8" asChild>
+              <Link href={`/apply-logs?node_id=${encodeURIComponent(node.node_id)}`}>
+                <FileText className="size-3.5 mr-1.5" />
+                应用记录
+              </Link>
+            </Button>
+          }
+        >
+          <div className="divide-y">
+            <NodeInfoRow label="当前配置版本">{node.current_version || '未应用'}</NodeInfoRow>
+            <NodeInfoRow label="最近应用">
+              <NodeStatusBadge
+                label={getApplyLabel(node.latest_apply_result)}
+                tone={getApplyTone(node.latest_apply_result)}
+              />
+            </NodeInfoRow>
+            <NodeInfoRow label="最近应用时间">
+              {isMeaningfulTime(node.latest_apply_at)
+                ? `${formatRelativeTime(node.latest_apply_at)} · ${formatDateTime(node.latest_apply_at)}`
+                : '暂无'}
+            </NodeInfoRow>
+            <NodeInfoRow label="Agent 版本">{node.version || 'unknown'}</NodeInfoRow>
+            <NodeInfoRow label="Nginx 版本">{node.ext_version || 'unknown'}</NodeInfoRow>
+            <NodeInfoRow label="自动更新">{node.auto_update_enabled ? '已启用' : '手动'}</NodeInfoRow>
           </div>
-          <div className="flex items-center justify-between gap-3">
-            <span className="text-muted-foreground">OpenResty 状态消息</span>
-            <span className="text-right max-w-[60%] break-words">
-              {node.openresty_message || '无'}
-            </span>
+        </NodeSectionCard>
+      </div>
+    </div>
+  );
+
+  const manageTab = (
+    <div className="space-y-6">
+      <NodeSectionCard title="节点标识" description="用于 Agent 接入与鉴别的核心字段">
+        <div className="divide-y">
+          <NodeInfoRow label="节点 ID">
+            <span className="font-mono text-xs break-all">{node.node_id}</span>
+          </NodeInfoRow>
+          <NodeInfoRow label="Agent Token">
+            <span className="font-mono text-xs break-all">{node.access_token || '暂无'}</span>
+          </NodeInfoRow>
+          <NodeInfoRow label="创建时间">{formatDateTime(node.created_at)}</NodeInfoRow>
+          <NodeInfoRow label="更新时间">{formatDateTime(node.updated_at)}</NodeInfoRow>
+        </div>
+      </NodeSectionCard>
+
+      <NodeSectionCard title="运行消息" description="OpenResty 与 Agent 上报的状态说明">
+        <div className="space-y-4 text-sm">
+          <div>
+            <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              OpenResty 状态消息
+            </p>
+            <p className="rounded-lg border bg-muted/30 px-3 py-3 leading-6 break-words whitespace-pre-wrap">
+              {node.openresty_message || '当前未上报额外错误。'}
+            </p>
           </div>
-          <div className="flex items-center justify-between gap-3">
-            <span className="text-muted-foreground">创建时间</span>
-            <span>{formatDateTime(node.created_at)}</span>
-          </div>
-          <div className="flex items-center justify-between gap-3">
-            <span className="text-muted-foreground">更新时间</span>
-            <span>{formatDateTime(node.updated_at)}</span>
-          </div>
-          {node.last_error ? (
-            <div className="md:col-span-2 xl:col-span-3 rounded-lg border border-destructive/20 bg-destructive/5 p-3 text-destructive">
-              {node.last_error}
+          {node.restart_openresty_requested ? (
+            <div className="flex items-center gap-2 text-sm text-amber-700 dark:text-amber-300">
+              <Activity className="size-4" />
+              已等待节点在下一次心跳后执行 OpenResty 重启。
             </div>
           ) : null}
-        </CardContent>
-      </Card>
+        </div>
+      </NodeSectionCard>
+    </div>
+  );
 
-      <NodeObservability
-        nodeId={node.id}
-        node={node}
-        variant="edge"
-        connectionHint="OpenResty 当前连接"
+  return (
+    <>
+      <NodeDetailShell
+        title={node.name}
+        typeLabel="Edge"
+        typeTone="info"
+        statusBadges={[
+          { label: getNodeStatusLabel(node.status), tone: getNodeStatusTone(node.status) },
+          {
+            label: getOpenrestyStatusLabel(node.openresty_status),
+            tone: getOpenrestyStatusTone(node.openresty_status),
+          },
+        ]}
+        actions={headerActions}
+        kpis={[
+          { label: '节点 ID', value: node.node_id, icon: Fingerprint },
+          { label: 'Agent 版本', value: node.version || 'unknown', icon: Cpu },
+          { label: '当前配置', value: node.current_version || '未应用', icon: Package },
+          {
+            label: '最近心跳',
+            value: isMeaningfulTime(node.last_seen_at)
+              ? formatRelativeTime(node.last_seen_at)
+              : '暂无',
+            icon: Activity,
+          },
+        ]}
+        overview={overviewTab}
+        dashboard={
+          <NodeObservability
+            nodeId={node.id}
+            node={node}
+            variant="edge"
+            connectionHint="OpenResty 当前连接"
+          />
+        }
+        manage={manageTab}
+        defaultTab="overview"
       />
 
       <NodeEditorDialog
@@ -332,6 +356,6 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </>
   );
-}
+}

Wavelet/frontend/app/(main)/nodes/components/node-detail-primitives.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import type {ReactNode} from 'react';
+import type {LucideIcon} from 'lucide-react';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {cn} from '@/lib/utils';
+
+export function NodeInfoRow({
+  label,
+  children,
+  className,
+}: {
+  label: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn('flex items-start justify-between gap-4 py-2.5 text-sm', className)}>
+      <span className="shrink-0 text-muted-foreground">{label}</span>
+      <div className="min-w-0 text-right font-medium">{children}</div>
+    </div>
+  );
+}
+
+export function NodeKpiCard({
+  label,
+  value,
+  icon: Icon,
+}: {
+  label: string;
+  value: ReactNode;
+  icon?: LucideIcon;
+}) {
+  return (
+    <div className="rounded-xl border bg-card/60 px-4 py-3.5 backdrop-blur-sm">
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        {Icon ? <Icon className="size-3.5 opacity-70" /> : null}
+        <span>{label}</span>
+      </div>
+      <p className="mt-2 text-sm font-semibold tracking-tight break-all">{value}</p>
+    </div>
+  );
+}
+
+export function NodeSectionCard({
+  title,
+  description,
+  action,
+  children,
+  className,
+}: {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Card className={cn('border shadow-none', className)}>
+      <CardHeader className={cn('pb-3', action ? 'flex-row items-start justify-between space-y-0' : '')}>
+        <div className="space-y-1">
+          <CardTitle className="text-base font-semibold">{title}</CardTitle>
+          {description ? <CardDescription>{description}</CardDescription> : null}
+        </div>
+        {action}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}
+
+export function NodeErrorBanner({ message }: { message: string }) {
+  return (
+    <div className="rounded-xl border border-destructive/25 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+      {message}
+    </div>
+  );
+}

Wavelet/frontend/app/(main)/nodes/components/node-detail-shell.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import Link from 'next/link';
+import {usePathname, useRouter, useSearchParams} from 'next/navigation';
+import {useCallback, useMemo, type ReactNode} from 'react';
+import type {LucideIcon} from 'lucide-react';
+import {ArrowLeft} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
+import {cn} from '@/lib/utils';
+
+import {NodeKpiCard} from './node-detail-primitives';
+import {NodeStatusBadge} from './node-status-badge';
+import type {StatusTone} from './node-utils';
+
+export type NodeDetailTabId = 'overview' | 'dashboard' | 'manage';
+
+export type NodeDetailTabConfig = {
+  id: NodeDetailTabId;
+  label: string;
+  description: string;
+  icon?: LucideIcon;
+};
+
+export type NodeDetailKpi = {
+  label: string;
+  value: ReactNode;
+  icon?: LucideIcon;
+};
+
+const TAB_CONFIGS: NodeDetailTabConfig[] = [
+  {
+    id: 'overview',
+    label: '概览',
+    description: '快速查看节点身份、运行状态与关键指标。',
+  },
+  {
+    id: 'dashboard',
+    label: '数据看板',
+    description: '系统画像、资源快照、流量趋势与健康事件时间线。',
+  },
+  {
+    id: 'manage',
+    label: '配置与部署',
+    description: '版本同步、部署命令与节点运维配置。',
+  },
+];
+
+function isValidTab(value: string | null): value is NodeDetailTabId {
+  return value === 'overview' || value === 'dashboard' || value === 'manage';
+}
+
+export function NodeDetailShell({
+  title,
+  typeLabel,
+  typeTone = 'info',
+  statusBadges,
+  actions,
+  kpis,
+  overview,
+  dashboard,
+  manage,
+  defaultTab = 'overview',
+}: {
+  title: string;
+  typeLabel: string;
+  typeTone?: StatusTone;
+  statusBadges: Array<{ label: string; tone: StatusTone }>;
+  actions: ReactNode;
+  kpis: NodeDetailKpi[];
+  overview: ReactNode;
+  dashboard: ReactNode;
+  manage: ReactNode;
+  defaultTab?: NodeDetailTabId;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const activeTab = useMemo(() => {
+    const tab = searchParams.get('tab');
+    return isValidTab(tab) ? tab : defaultTab;
+  }, [defaultTab, searchParams]);
+
+  const setActiveTab = useCallback(
+    (tab: NodeDetailTabId) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('tab', tab);
+      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    },
+    [pathname, router, searchParams],
+  );
+
+  const activeTabMeta = TAB_CONFIGS.find((tab) => tab.id === activeTab) ?? TAB_CONFIGS[0];
+
+  return (
+    <div className="py-6 px-1 space-y-6">
+      <section className="overflow-hidden rounded-2xl border bg-gradient-to-br from-card via-card to-muted/30">
+        <div className="flex flex-col gap-5 p-5 md:p-6">
+          <div className="flex flex-wrap items-start justify-between gap-4">
+            <div className="flex min-w-0 items-start gap-3">
+              <Button variant="ghost" size="sm" className="mt-0.5 h-8 w-8 shrink-0 p-0" asChild>
+                <Link href="/nodes" aria-label="返回节点列表">
+                  <ArrowLeft className="size-4" />
+                </Link>
+              </Button>
+
+              <div className="min-w-0 space-y-2">
+                <div className="flex flex-wrap items-center gap-2">
+                  <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+                  <NodeStatusBadge label={typeLabel} tone={typeTone} />
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                  {statusBadges.map((badge) => (
+                    <NodeStatusBadge
+                      key={badge.label}
+                      label={badge.label}
+                      tone={badge.tone}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">{actions}</div>
+          </div>
+
+          {kpis.length > 0 ? (
+            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+              {kpis.map((kpi) => (
+                <NodeKpiCard
+                  key={kpi.label}
+                  label={kpi.label}
+                  value={kpi.value}
+                  icon={kpi.icon}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </section>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => {
+          if (isValidTab(value)) {
+            setActiveTab(value);
+          }
+        }}
+        className="w-full gap-0"
+      >
+        <div className="space-y-3 border-b pb-1">
+          <TabsList variant="line" className="h-auto w-full justify-start gap-6 bg-transparent p-0">
+            {TAB_CONFIGS.map((tab) => (
+              <TabsTrigger
+                key={tab.id}
+                value={tab.id}
+                className={cn(
+                  'h-auto flex-none rounded-none px-0 pb-3 pt-1 text-sm font-semibold',
+                  'data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground',
+                )}
+              >
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          <p className="text-sm text-muted-foreground">{activeTabMeta.description}</p>
+        </div>
+
+        <TabsContent value="overview" className="mt-6 outline-none">
+          {activeTab === 'overview' ? overview : null}
+        </TabsContent>
+        <TabsContent value="dashboard" className="mt-6 outline-none">
+          {activeTab === 'dashboard' ? dashboard : null}
+        </TabsContent>
+        <TabsContent value="manage" className="mt-6 outline-none">
+          {activeTab === 'manage' ? manage : null}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

Wavelet/frontend/app/(main)/nodes/components/relay-node-detail.tsx

@@ -4,7 +4,18 @@ import Link from 'next/link';
 import {useRouter} from 'next/navigation';
 import {useMutation, useQueryClient} from '@tanstack/react-query';
 import {useState} from 'react';
-import {ArrowLeft, ExternalLink, FileText, RefreshCw, RotateCcw, Trash2, Upload,} from 'lucide-react';
+import {
+  Activity,
+  ExternalLink,
+  FileText,
+  Fingerprint,
+  Network,
+  RefreshCw,
+  RotateCcw,
+  Server,
+  Trash2,
+  Upload,
+} from 'lucide-react';
 import {toast} from 'sonner';
 
 import {
@@ -18,7 +29,6 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
 import {Label} from '@/components/ui/label';
 import {Switch} from '@/components/ui/switch';
 import {formatDateTime} from '@/lib/utils';
@@ -27,6 +37,12 @@ import {NodeService} from '@/lib/services/openflare';
 
 import {AgentUpdateDialog} from './agent-update-dialog';
 import {InstallCommand} from './install-command';
+import {NodeDetailShell} from './node-detail-shell';
+import {
+  NodeErrorBanner,
+  NodeInfoRow,
+  NodeSectionCard,
+} from './node-detail-primitives';
 import {NodeEditorDialog} from './node-editor-dialog';
 import {NodeObservability} from './node-observability';
 import {NodeStatusBadge} from './node-status-badge';
@@ -139,218 +155,196 @@ export function RelayNodeDetail({ node }: { node: NodeItem }) {
       ? `http://${node.ip || '127.0.0.1'}:${node.relay_bind_port + 500}`
       : null;
 
-  return (
-    <div className="py-6 px-1 space-y-6">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <Button variant="ghost" size="sm" className="h-8 px-2" asChild>
-            <Link href="/nodes">
-              <ArrowLeft className="size-4" />
-            </Link>
-          </Button>
-          <h1 className="text-2xl font-semibold tracking-tight">{node.name}</h1>
-          <NodeStatusBadge
-            label={getNodeStatusLabel(node.status)}
-            tone={getNodeStatusTone(node.status)}
-          />
-        </div>
+  const headerActions = (
+    <>
+      <Button variant="outline" size="sm" className="h-8" onClick={() => setEditorOpen(true)}>
+        编辑
+      </Button>
+      <Button variant="outline" size="sm" className="h-8" onClick={handleRefresh}>
+        <RefreshCw className="size-3.5 mr-1.5" />
+        刷新
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8"
+        disabled={forceSyncMutation.isPending}
+        onClick={() => forceSyncMutation.mutate()}
+      >
+        <RotateCcw className="size-3.5 mr-1.5" />
+        {forceSyncMutation.isPending ? '同步中...' : '强制同步'}
+      </Button>
+      <Button variant="secondary" size="sm" className="h-8" onClick={() => setUpgradeOpen(true)}>
+        <Upload className="size-3.5 mr-1.5" />
+        {node.update_requested ? '查看升级' : '升级 Relay'}
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8 text-destructive hover:text-destructive"
+        onClick={() => setDeleteOpen(true)}
+      >
+        <Trash2 className="size-3.5 mr-1.5" />
+        删除
+      </Button>
+    </>
+  );
 
-        <div className="flex flex-wrap items-center gap-2">
-          <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setEditorOpen(true)}>
-            编辑
-          </Button>
-          <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleRefresh}>
-            <RefreshCw className="size-3.5 mr-1" />
-            刷新
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs"
-            disabled={forceSyncMutation.isPending}
-            onClick={() => forceSyncMutation.mutate()}
-          >
-            <RotateCcw className="size-3.5 mr-1" />
-            {forceSyncMutation.isPending ? '同步中...' : '强制同步'}
-          </Button>
-          <Button
-            variant="secondary"
-            size="sm"
-            className="h-7 text-xs"
-            onClick={() => setUpgradeOpen(true)}
-          >
-            <Upload className="size-3.5 mr-1" />
-            {node.update_requested ? '查看升级' : '升级 Relay'}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs text-destructive hover:text-destructive"
-            onClick={() => setDeleteOpen(true)}
-          >
-            <Trash2 className="size-3.5 mr-1" />
-            删除
-          </Button>
-        </div>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>节点 ID</CardDescription>
-            <CardTitle className="text-sm font-medium break-all">{node.node_id}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>Relay 版本</CardDescription>
-            <CardTitle className="text-sm font-medium">{node.version || 'unknown'}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>frps 核心版本</CardDescription>
-            <CardTitle className="text-sm font-medium">{node.ext_version || 'unknown'}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>最近心跳</CardDescription>
-            <CardTitle className="text-sm font-medium">
-              {isWSConnectedLastSeen(node.last_seen_at)
-                ? 'WS 已连接'
-                : isMeaningfulTime(node.last_seen_at)
-                  ? formatRelativeTime(node.last_seen_at)
-                  : '暂无'}
-            </CardTitle>
-          </CardHeader>
-        </Card>
-      </div>
+  const overviewTab = (
+    <div className="space-y-6">
+      {node.last_error ? <NodeErrorBanner message={node.last_error} /> : null}
 
       <div className="grid gap-6 xl:grid-cols-2">
-        <Card className="border-dashed shadow-none">
-          <CardHeader>
-            <CardTitle className="text-base font-semibold">中继网络</CardTitle>
-            <CardDescription>隧道中继节点 (tunnel_relay / frps)</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-3 text-sm">
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">运行状态</span>
+        <NodeSectionCard title="中继运行状态" description="frps 在线情况与负载摘要">
+          <div className="divide-y">
+            <NodeInfoRow label="运行状态">
               <NodeStatusBadge
                 label={getNodeStatusLabel(node.status)}
                 tone={getNodeStatusTone(node.status)}
               />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">中继健康</span>
+            </NodeInfoRow>
+            <NodeInfoRow label="中继健康">
               <NodeStatusBadge
                 label={getRelayStatusLabel(node.relay_status)}
                 tone={getRelayStatusTone(node.relay_status)}
               />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">绑定控制端口</span>
-              <span>{node.relay_bind_port || '—'}</span>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">VHost HTTP 端口</span>
-              <span>{node.relay_vhost_http_port || '—'}</span>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">Agent 接入地址</span>
-              <span className="text-right break-all">{node.relay_agent_access_addr || '—'}</span>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">活动连接 / 代理数</span>
-              <span>
-                {node.relay_frps_connections ?? '—'} / {node.relay_frps_proxy_count ?? '—'}
-              </span>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">IP 地址</span>
-              <span>
-                {node.ip || '—'}
-                {node.ip_manual_override ? '（已锁定）' : ''}
-              </span>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">最近应用</span>
+            </NodeInfoRow>
+            <NodeInfoRow label="最近心跳">
+              {isWSConnectedLastSeen(node.last_seen_at)
+                ? 'WS 已连接'
+                : isMeaningfulTime(node.last_seen_at)
+                  ? `${formatRelativeTime(node.last_seen_at)} · ${formatDateTime(node.last_seen_at)}`
+                  : '暂无'}
+            </NodeInfoRow>
+            <NodeInfoRow label="活动连接 / 代理数">
+              {node.relay_frps_connections ?? '—'} / {node.relay_frps_proxy_count ?? '—'}
+            </NodeInfoRow>
+            <NodeInfoRow label="IP 地址">
+              {node.ip || '—'}
+              {node.ip_manual_override ? '（已锁定）' : ''}
+            </NodeInfoRow>
+          </div>
+        </NodeSectionCard>
+
+        <NodeSectionCard
+          title="网络端口"
+          description="frps 控制面与 HTTP 虚拟主机配置"
+          action={
+            <Button variant="outline" size="sm" className="h-8" asChild>
+              <Link href={`/apply-logs?node_id=${encodeURIComponent(node.node_id)}`}>
+                <FileText className="size-3.5 mr-1.5" />
+                应用记录
+              </Link>
+            </Button>
+          }
+        >
+          <div className="divide-y">
+            <NodeInfoRow label="绑定控制端口">{node.relay_bind_port || '—'}</NodeInfoRow>
+            <NodeInfoRow label="VHost HTTP 端口">{node.relay_vhost_http_port || '—'}</NodeInfoRow>
+            <NodeInfoRow label="Agent 接入地址">
+              <span className="break-all">{node.relay_agent_access_addr || '—'}</span>
+            </NodeInfoRow>
+            <NodeInfoRow label="最近应用">
               <NodeStatusBadge
                 label={getApplyLabel(node.latest_apply_result)}
                 tone={getApplyTone(node.latest_apply_result)}
               />
-            </div>
-            {node.last_error ? (
-              <div className="rounded-lg border border-destructive/20 bg-destructive/5 p-3 text-destructive">
-                {node.last_error}
-              </div>
-            ) : null}
-          </CardContent>
-        </Card>
-
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="flex-row items-center justify-between space-y-0">
-            <div>
-              <CardTitle className="text-base font-semibold">FRPS WebUI</CardTitle>
-              <CardDescription>控制 frps 内置 Web 管理界面是否启用</CardDescription>
-            </div>
-            <Button variant="outline" size="sm" className="h-7 text-xs" asChild>
-              <Link href={`/apply-logs?node_id=${encodeURIComponent(node.node_id)}`}>
-                <FileText className="size-3.5 mr-1" />
-                应用记录
-              </Link>
-            </Button>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center justify-between rounded-lg border px-3 py-3">
-              <div className="space-y-1">
-                <Label>启用 Web 管理界面</Label>
-                <p className="text-xs text-muted-foreground">
-                  默认监听绑定端口 + 500，例如 {node.relay_bind_port || 7000} →{' '}
-                  {(node.relay_bind_port || 7000) + 500}
-                </p>
-              </div>
-              <Switch
-                checked={node.relay_web_server_enabled}
-                disabled={webServerMutation.isPending}
-                onCheckedChange={(checked) => webServerMutation.mutate(checked)}
-              />
-            </div>
-
-            {webUiUrl ? (
-              <a
-                href={webUiUrl}
-                target="_blank"
-                rel="noreferrer"
-                className="inline-flex items-center text-sm text-primary hover:underline"
-              >
-                打开 FRPS WebUI
-                <ExternalLink className="size-3 ml-1" />
-              </a>
-            ) : (
-              <p className="text-sm text-muted-foreground">WebUI 已禁用或未配置绑定端口。</p>
-            )}
-
-            <div className="space-y-2 text-sm text-muted-foreground">
-              <div className="flex items-center justify-between gap-3">
-                <span>创建时间</span>
-                <span>{formatDateTime(node.created_at)}</span>
-              </div>
-              <div className="flex items-center justify-between gap-3">
-                <span>更新时间</span>
-                <span>{formatDateTime(node.updated_at)}</span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+            </NodeInfoRow>
+            <NodeInfoRow label="Relay 版本">{node.version || 'unknown'}</NodeInfoRow>
+            <NodeInfoRow label="frps 核心版本">{node.ext_version || 'unknown'}</NodeInfoRow>
+          </div>
+        </NodeSectionCard>
       </div>
+    </div>
+  );
+
+  const manageTab = (
+    <div className="space-y-6">
+      <NodeSectionCard title="FRPS WebUI" description="控制 frps 内置 Web 管理界面是否启用">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between rounded-xl border px-4 py-4">
+            <div className="space-y-1">
+              <Label>启用 Web 管理界面</Label>
+              <p className="text-xs text-muted-foreground">
+                默认监听绑定端口 + 500，例如 {node.relay_bind_port || 7000} →{' '}
+                {(node.relay_bind_port || 7000) + 500}
+              </p>
+            </div>
+            <Switch
+              checked={node.relay_web_server_enabled}
+              disabled={webServerMutation.isPending}
+              onCheckedChange={(checked) => webServerMutation.mutate(checked)}
+            />
+          </div>
+
+          {webUiUrl ? (
+            <a
+              href={webUiUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center text-sm font-medium text-primary hover:underline"
+            >
+              打开 FRPS WebUI
+              <ExternalLink className="size-3.5 ml-1.5" />
+            </a>
+          ) : (
+            <p className="text-sm text-muted-foreground">WebUI 已禁用或未配置绑定端口。</p>
+          )}
+        </div>
+      </NodeSectionCard>
 
       <InstallCommand node={node} variant="relay" />
 
-      <NodeObservability
-        nodeId={node.id}
-        variant="compact"
-        connectionHint="中继承载活动连接数"
+      <NodeSectionCard title="节点元数据">
+        <div className="divide-y">
+          <NodeInfoRow label="节点 ID">
+            <span className="font-mono text-xs break-all">{node.node_id}</span>
+          </NodeInfoRow>
+          <NodeInfoRow label="创建时间">{formatDateTime(node.created_at)}</NodeInfoRow>
+          <NodeInfoRow label="更新时间">{formatDateTime(node.updated_at)}</NodeInfoRow>
+        </div>
+      </NodeSectionCard>
+    </div>
+  );
+
+  return (
+    <>
+      <NodeDetailShell
+        title={node.name}
+        typeLabel="Relay"
+        typeTone="warning"
+        statusBadges={[
+          { label: getNodeStatusLabel(node.status), tone: getNodeStatusTone(node.status) },
+          {
+            label: getRelayStatusLabel(node.relay_status),
+            tone: getRelayStatusTone(node.relay_status),
+          },
+        ]}
+        actions={headerActions}
+        kpis={[
+          { label: '节点 ID', value: node.node_id, icon: Fingerprint },
+          { label: 'Relay 版本', value: node.version || 'unknown', icon: Server },
+          { label: 'frps 核心', value: node.ext_version || 'unknown', icon: Network },
+          {
+            label: '最近心跳',
+            value: isWSConnectedLastSeen(node.last_seen_at)
+              ? 'WS 已连接'
+              : isMeaningfulTime(node.last_seen_at)
+                ? formatRelativeTime(node.last_seen_at)
+                : '暂无',
+            icon: Activity,
+          },
+        ]}
+        overview={overviewTab}
+        dashboard={
+          <NodeObservability
+            nodeId={node.id}
+            variant="compact"
+            connectionHint="中继承载活动连接数"
+          />
+        }
+        manage={manageTab}
+        defaultTab="overview"
       />
 
       <NodeEditorDialog
@@ -393,6 +387,6 @@ export function RelayNodeDetail({ node }: { node: NodeItem }) {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </>
   );
 }

Wavelet/frontend/app/(main)/nodes/components/tunnel-node-detail.tsx

@@ -4,7 +4,17 @@ import Link from 'next/link';
 import {useRouter} from 'next/navigation';
 import {useMutation, useQueryClient} from '@tanstack/react-query';
 import {useState} from 'react';
-import {ArrowLeft, FileText, RefreshCw, RotateCcw, Trash2, Upload,} from 'lucide-react';
+import {
+  Activity,
+  FileText,
+  Fingerprint,
+  KeyRound,
+  Package,
+  RefreshCw,
+  RotateCcw,
+  Trash2,
+  Upload,
+} from 'lucide-react';
 import {toast} from 'sonner';
 
 import {
@@ -18,13 +28,18 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
 import {formatDateTime} from '@/lib/utils';
 import type {NodeAgentReleaseInfo, NodeItem, ReleaseChannel} from '@/lib/services/openflare';
 import {NodeService} from '@/lib/services/openflare';
 
 import {AgentUpdateDialog} from './agent-update-dialog';
 import {InstallCommand} from './install-command';
+import {NodeDetailShell} from './node-detail-shell';
+import {
+  NodeErrorBanner,
+  NodeInfoRow,
+  NodeSectionCard,
+} from './node-detail-primitives';
 import {NodeEditorDialog} from './node-editor-dialog';
 import {NodeObservability} from './node-observability';
 import {NodeStatusBadge} from './node-status-badge';
@@ -109,192 +124,104 @@ export function TunnelNodeDetail({ node }: { node: NodeItem }) {
     ]);
   };
 
-  return (
-    <div className="py-6 px-1 space-y-6">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <Button variant="ghost" size="sm" className="h-8 px-2" asChild>
-            <Link href="/nodes">
-              <ArrowLeft className="size-4" />
-            </Link>
-          </Button>
-          <h1 className="text-2xl font-semibold tracking-tight">{node.name}</h1>
-          <NodeStatusBadge
-            label={getNodeStatusLabel(node.status)}
-            tone={getNodeStatusTone(node.status)}
-          />
-        </div>
+  const headerActions = (
+    <>
+      <Button variant="outline" size="sm" className="h-8" onClick={() => setEditorOpen(true)}>
+        编辑
+      </Button>
+      <Button variant="outline" size="sm" className="h-8" onClick={handleRefresh}>
+        <RefreshCw className="size-3.5 mr-1.5" />
+        刷新
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8"
+        disabled={forceSyncMutation.isPending}
+        onClick={() => forceSyncMutation.mutate()}
+      >
+        <RotateCcw className="size-3.5 mr-1.5" />
+        {forceSyncMutation.isPending ? '同步中...' : '强制同步'}
+      </Button>
+      <Button variant="secondary" size="sm" className="h-8" onClick={() => setUpgradeOpen(true)}>
+        <Upload className="size-3.5 mr-1.5" />
+        {node.update_requested ? '查看升级' : '升级 openflared'}
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8 text-destructive hover:text-destructive"
+        onClick={() => setDeleteOpen(true)}
+      >
+        <Trash2 className="size-3.5 mr-1.5" />
+        删除
+      </Button>
+    </>
+  );
 
-        <div className="flex flex-wrap items-center gap-2">
-          <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setEditorOpen(true)}>
-            编辑
-          </Button>
-          <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleRefresh}>
-            <RefreshCw className="size-3.5 mr-1" />
-            刷新
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs"
-            disabled={forceSyncMutation.isPending}
-            onClick={() => forceSyncMutation.mutate()}
-          >
-            <RotateCcw className="size-3.5 mr-1" />
-            {forceSyncMutation.isPending ? '同步中...' : '强制同步'}
-          </Button>
-          <Button
-            variant="secondary"
-            size="sm"
-            className="h-7 text-xs"
-            onClick={() => setUpgradeOpen(true)}
-          >
-            <Upload className="size-3.5 mr-1" />
-            {node.update_requested ? '查看升级' : '升级 openflared'}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs text-destructive hover:text-destructive"
-            onClick={() => setDeleteOpen(true)}
-          >
-            <Trash2 className="size-3.5 mr-1" />
-            删除
-          </Button>
-        </div>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>节点 ID</CardDescription>
-            <CardTitle className="text-sm font-medium break-all">{node.node_id}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>openflared 版本</CardDescription>
-            <CardTitle className="text-sm font-medium">{node.version || 'unknown'}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>当前配置版本</CardDescription>
-            <CardTitle className="text-sm font-medium">{node.current_version || '未应用'}</CardTitle>
-          </CardHeader>
-        </Card>
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="pb-2">
-            <CardDescription>最近心跳</CardDescription>
-            <CardTitle className="text-sm font-medium">
-              {isWSConnectedLastSeen(node.last_seen_at)
-                ? 'WS 已连接'
-                : isMeaningfulTime(node.last_seen_at)
-                  ? formatRelativeTime(node.last_seen_at)
-                  : '暂无'}
-            </CardTitle>
-          </CardHeader>
-        </Card>
-      </div>
+  const overviewTab = (
+    <div className="space-y-6">
+      {node.last_error ? <NodeErrorBanner message={node.last_error} /> : null}
 
       <div className="grid gap-6 xl:grid-cols-2">
-        <Card className="border-dashed shadow-none">
-          <CardHeader>
-            <CardTitle className="text-base font-semibold">隧道客户端</CardTitle>
-            <CardDescription>隧道客户端节点 (tunnel_client / openflared)</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-3 text-sm">
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">运行状态</span>
+        <NodeSectionCard title="隧道运行状态" description="openflared 连接与在线情况">
+          <div className="divide-y">
+            <NodeInfoRow label="运行状态">
               <NodeStatusBadge
                 label={getNodeStatusLabel(node.status)}
                 tone={getNodeStatusTone(node.status)}
               />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">flared 状态</span>
+            </NodeInfoRow>
+            <NodeInfoRow label="flared 状态">
               <NodeStatusBadge
                 label={getFlaredStatusLabel(node)}
                 tone={getFlaredStatusTone(node)}
               />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">Tunnel Token</span>
-              <span className="text-right break-all max-w-[60%]">
-                {node.access_token || '暂无'}
-              </span>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">IP 地址</span>
-              <span>
-                {node.ip || '—'}
-                {node.ip_manual_override ? '（已锁定）' : ''}
-              </span>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">最近应用</span>
-              <NodeStatusBadge
-                label={getApplyLabel(node.latest_apply_result)}
-                tone={getApplyTone(node.latest_apply_result)}
-              />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">自动更新</span>
-              <span>{node.auto_update_enabled ? '已启用' : '手动'}</span>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">创建时间</span>
-              <span>{formatDateTime(node.created_at)}</span>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">更新时间</span>
-              <span>{formatDateTime(node.updated_at)}</span>
-            </div>
-            {node.last_error ? (
-              <div className="rounded-lg border border-destructive/20 bg-destructive/5 p-3 text-destructive">
-                {node.last_error}
-              </div>
-            ) : null}
-          </CardContent>
-        </Card>
+            </NodeInfoRow>
+            <NodeInfoRow label="最近心跳">
+              {isWSConnectedLastSeen(node.last_seen_at)
+                ? 'WebSocket 长连接已建立'
+                : isMeaningfulTime(node.last_seen_at)
+                  ? `${formatRelativeTime(node.last_seen_at)} · ${formatDateTime(node.last_seen_at)}`
+                  : '暂无'}
+            </NodeInfoRow>
+            <NodeInfoRow label="IP 地址">
+              {node.ip || '—'}
+              {node.ip_manual_override ? '（已锁定）' : ''}
+            </NodeInfoRow>
+            <NodeInfoRow label="自动更新">{node.auto_update_enabled ? '已启用' : '手动'}</NodeInfoRow>
+          </div>
+        </NodeSectionCard>
 
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="flex-row items-center justify-between space-y-0">
-            <div>
-              <CardTitle className="text-base font-semibold">同步状态</CardTitle>
-              <CardDescription>配置追平与应用结果</CardDescription>
-            </div>
-            <Button variant="outline" size="sm" className="h-7 text-xs" asChild>
+        <NodeSectionCard
+          title="配置同步"
+          description="隧道客户端配置追平状态"
+          action={
+            <Button variant="outline" size="sm" className="h-8" asChild>
               <Link href={`/apply-logs?node_id=${encodeURIComponent(node.node_id)}`}>
-                <FileText className="size-3.5 mr-1" />
+                <FileText className="size-3.5 mr-1.5" />
                 应用记录
               </Link>
             </Button>
-          </CardHeader>
-          <CardContent className="space-y-3 text-sm">
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">最近应用结果</span>
+          }
+        >
+          <div className="divide-y">
+            <NodeInfoRow label="当前配置版本">{node.current_version || '未应用'}</NodeInfoRow>
+            <NodeInfoRow label="最近应用">
               <NodeStatusBadge
                 label={getApplyLabel(node.latest_apply_result)}
                 tone={getApplyTone(node.latest_apply_result)}
               />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">最近应用时间</span>
-              <span>
-                {isMeaningfulTime(node.latest_apply_at) && node.latest_apply_at
-                  ? `${formatRelativeTime(node.latest_apply_at)} · ${formatDateTime(node.latest_apply_at)}`
-                  : '暂无'}
-              </span>
-            </div>
+            </NodeInfoRow>
+            <NodeInfoRow label="最近应用时间">
+              {isMeaningfulTime(node.latest_apply_at)
+                ? `${formatRelativeTime(node.latest_apply_at)} · ${formatDateTime(node.latest_apply_at)}`
+                : '暂无'}
+            </NodeInfoRow>
             {node.latest_apply_checksum ? (
-              <div className="flex items-center justify-between gap-3">
-                <span className="text-muted-foreground">同步文件数</span>
-                <span>{node.latest_support_file_count} 个</span>
-              </div>
+              <NodeInfoRow label="同步文件数">{node.latest_support_file_count} 个</NodeInfoRow>
             ) : null}
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">升级状态</span>
+            <NodeInfoRow label="升级状态">
               <NodeStatusBadge
                 label={
                   node.update_requested
@@ -305,27 +232,67 @@ export function TunnelNodeDetail({ node }: { node: NodeItem }) {
                 }
                 tone={node.update_requested ? 'warning' : 'info'}
               />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-muted-foreground">最近心跳详情</span>
-              <span className="text-right">
-                {isWSConnectedLastSeen(node.last_seen_at)
-                  ? 'WebSocket 长连接已建立'
-                  : isMeaningfulTime(node.last_seen_at)
-                    ? formatDateTime(node.last_seen_at)
-                    : '暂无'}
-              </span>
-            </div>
-          </CardContent>
-        </Card>
+            </NodeInfoRow>
+          </div>
+        </NodeSectionCard>
       </div>
+    </div>
+  );
+
+  const manageTab = (
+    <div className="space-y-6">
+      <NodeSectionCard title="接入凭证" description="隧道客户端接入所需 Token">
+        <div className="divide-y">
+          <NodeInfoRow label="Tunnel Token">
+            <span className="font-mono text-xs break-all">{node.access_token || '暂无'}</span>
+          </NodeInfoRow>
+          <NodeInfoRow label="节点 ID">
+            <span className="font-mono text-xs break-all">{node.node_id}</span>
+          </NodeInfoRow>
+          <NodeInfoRow label="创建时间">{formatDateTime(node.created_at)}</NodeInfoRow>
+          <NodeInfoRow label="更新时间">{formatDateTime(node.updated_at)}</NodeInfoRow>
+        </div>
+      </NodeSectionCard>
 
       <InstallCommand node={node} variant="tunnel" />
+    </div>
+  );
 
-      <NodeObservability
-        nodeId={node.id}
-        variant="compact"
-        connectionHint="隧道并发连接数"
+  return (
+    <>
+      <NodeDetailShell
+        title={node.name}
+        typeLabel="Tunnel"
+        typeTone="info"
+        statusBadges={[
+          { label: getNodeStatusLabel(node.status), tone: getNodeStatusTone(node.status) },
+          { label: getFlaredStatusLabel(node), tone: getFlaredStatusTone(node) },
+        ]}
+        actions={headerActions}
+        kpis={[
+          { label: '节点 ID', value: node.node_id, icon: Fingerprint },
+          { label: 'openflared', value: node.version || 'unknown', icon: Package },
+          { label: '当前配置', value: node.current_version || '未应用', icon: KeyRound },
+          {
+            label: '最近心跳',
+            value: isWSConnectedLastSeen(node.last_seen_at)
+              ? 'WS 已连接'
+              : isMeaningfulTime(node.last_seen_at)
+                ? formatRelativeTime(node.last_seen_at)
+                : '暂无',
+            icon: Activity,
+          },
+        ]}
+        overview={overviewTab}
+        dashboard={
+          <NodeObservability
+            nodeId={node.id}
+            variant="compact"
+            connectionHint="隧道并发连接数"
+          />
+        }
+        manage={manageTab}
+        defaultTab="overview"
       />
 
       <NodeEditorDialog
@@ -368,6 +335,6 @@ export function TunnelNodeDetail({ node }: { node: NodeItem }) {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </>
   );
 }

docs/changelog/index.md

@@ -49,6 +49,7 @@ sidebar: false
 - 前端 UI 打磨：节点/WAF/DNS/配置清理等 Dialog 补 RHF+Zod；代理规则详情与访问日志 Tab 补 error 态；`pnpm build:embed` 增至 47 静态页。
 - 修复开发模式下 `/api/*` 尾斜杠引发 Next.js 308 与 Gin 301 循环重定向：前端 Service 与 `api-client` 请求拦截器规范化路径、强制浏览器同源代理、Next `skipTrailingSlashRedirect`、后端 `RegisterCollection` 双路径注册；Access Token 管理员权限校验对齐 `token_admin`。
 - 补全 Wavelet 边缘节点详情数据看板：迁移运行诊断摘要、系统信息、实时资源、网络流量、24 小时请求/容量/网络/磁盘趋势、请求结构分布与健康事件时间线。
+- 节点详情页改为 Tabs 布局（概览 / 数据看板 / 配置与部署），统一 Edge/Relay/Tunnel 详情壳层并支持 `tab` URL 参数深链。
 - OpenFlare 前端路由去除 `/openflare` 前缀，业务页面直接挂载于 `/`（如 `/nodes`、`/websites`）；侧栏移除「首页」「我的文件」；旧路径 `/openflare/*`、`/home` 永久重定向至新路径。
 
 ## [v2.3.4] - 2026-06-17