prettier

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

@@ -1,18 +1,18 @@
 'use client';
 
 import Link from 'next/link';
-import {usePathname, useRouter, useSearchParams} from 'next/navigation';
-import {type ReactNode, useCallback, useMemo} from 'react';
-import type {LucideIcon} from 'lucide-react';
-import {ArrowLeft} from 'lucide-react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { type ReactNode, useCallback, useMemo } 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 { 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';
+import { NodeKpiCard } from './node-detail-primitives';
+import { NodeStatusBadge } from './node-status-badge';
+import type { StatusTone } from './node-utils';
 
 export type NodeDetailTabId = 'overview' | 'dashboard' | 'manage';
 
@@ -89,23 +89,30 @@ export function NodeDetailShell({
   );
 
   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" />
+    <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>
+              <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">
+                <div className='flex flex-wrap items-center gap-2'>
                   {statusBadges.map((badge) => (
                     <NodeStatusBadge
                       key={badge.label}
@@ -117,11 +124,11 @@ export function NodeDetailShell({
               </div>
             </div>
 
-            <div className="flex flex-wrap items-center gap-2">{actions}</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">
+            <div className='grid gap-3 sm:grid-cols-2 xl:grid-cols-4'>
               {kpis.map((kpi) => (
                 <NodeKpiCard
                   key={kpi.label}
@@ -142,10 +149,13 @@ export function NodeDetailShell({
             setActiveTab(value);
           }
         }}
-        className="w-full gap-0"
+        className='w-full gap-0'
       >
-        <div className="space-y-3 pb-1">
-          <TabsList variant="line" className="h-auto w-full justify-start gap-6 bg-transparent p-0">
+        <div className='space-y-3 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}
@@ -161,13 +171,13 @@ export function NodeDetailShell({
           </TabsList>
         </div>
 
-        <TabsContent value="overview" className="mt-6 outline-none">
+        <TabsContent value='overview' className='mt-6 outline-none'>
           {activeTab === 'overview' ? overview : null}
         </TabsContent>
-        <TabsContent value="dashboard" className="mt-6 outline-none">
+        <TabsContent value='dashboard' className='mt-6 outline-none'>
           {activeTab === 'dashboard' ? dashboard : null}
         </TabsContent>
-        <TabsContent value="manage" className="mt-6 outline-none">
+        <TabsContent value='manage' className='mt-6 outline-none'>
           {activeTab === 'manage' ? manage : null}
         </TabsContent>
       </Tabs>