@zhin.js/console 1.0.21 → 1.0.22

package/client/src/pages/dashboard-home.tsx

@@ -1,7 +1,11 @@
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
-import {Flex,Box,Spinner,Text,Callout,Heading,Badge,Grid,Card,Button} from '@radix-ui/themes'
 import { Bot, AlertCircle, Activity, Package, Clock, Cpu, MemoryStick, FileText, TrendingUp } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../components/ui/card'
+import { Badge } from '../components/ui/badge'
+import { Button } from '../components/ui/button'
+import { Alert, AlertDescription } from '../components/ui/alert'
+import { Skeleton } from '../components/ui/skeleton'
 
 interface Stats {
   plugins: { total: number; active: number }
@@ -14,16 +18,8 @@ interface Stats {
 
 interface SystemStatus {
   uptime: number
-  memory: {
-    rss: number
-    heapTotal: number
-    heapUsed: number
-    external: number
-  }
-  cpu: {
-    user: number
-    system: number
-  }
+  memory: { rss: number; heapTotal: number; heapUsed: number; external: number }
+  cpu: { user: number; system: number }
   platform: string
   nodeVersion: string
 }
@@ -47,12 +43,9 @@ export default function DashboardHome() {
         fetch('/api/stats', { credentials: 'include' }),
         fetch('/api/system/status', { credentials: 'include' })
       ])
-
       if (!statsRes.ok || !statusRes.ok) throw new Error('API 请求失败')
-
       const statsData = await statsRes.json()
       const statusData = await statusRes.json()
-
       if (statsData.success && statusData.success) {
         setStats(statsData.data)
         setSystemStatus(statusData.data)
@@ -72,230 +65,166 @@ export default function DashboardHome() {
     return `${days}天 ${hours}小时 ${minutes}分钟`
   }
 
-  const formatMemory = (bytes: number) => {
-    return `${(bytes / 1024 / 1024).toFixed(2)} MB`
-  }
+  const formatMemory = (bytes: number) => `${(bytes / 1024 / 1024).toFixed(2)} MB`
 
   if (loading) {
     return (
-      <Flex align="center" justify="center" style={{ height: '100%' }}>
-        <Box>
-          <Spinner size="3" />
-          <Text size="2" color="gray" style={{ marginTop: '8px' }}>加载中...</Text>
-        </Box>
-      </Flex>
+      <div className="space-y-6">
+        <div><Skeleton className="h-8 w-48" /><Skeleton className="h-4 w-64 mt-2" /></div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-32" />)}
+        </div>
+      </div>
     )
   }
 
   if (error) {
     return (
-      <Flex align="center" justify="center" style={{ height: '100%' }}>
-        <Callout.Root color="red">
-          <Callout.Icon>
-            <AlertCircle />
-          </Callout.Icon>
-          <Callout.Text>
-            加载失败: {error}
-          </Callout.Text>
-        </Callout.Root>
-      </Flex>
+      <div className="flex items-center justify-center h-full">
+        <Alert variant="destructive" className="max-w-md">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>加载失败: {error}</AlertDescription>
+        </Alert>
+      </div>
     )
   }
 
   return (
-    <Box>
-      {/* 页面标题 */}
-      <Flex direction="column" gap="2" mb="6">
-        <Heading size="8">系统概览</Heading>
-        <Text color="gray">实时监控您的机器人框架运行状态</Text>
-      </Flex>
-
-      {/* 统计卡片 */}
-      <Grid columns={{ initial: '1', sm: '2', lg: '4' }} gap="4" mb="6">
+    <div className="space-y-6">
+      {/* Page header */}
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">系统概览</h1>
+        <p className="text-muted-foreground">实时监控您的机器人框架运行状态</p>
+      </div>
+
+      {/* Stats cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         <Card>
-          <Flex direction="column" gap="2">
-            <Flex justify="between" align="center">
-              <Text size="2" weight="medium" color="gray">插件总数</Text>
-              <Box p="2" style={{ borderRadius: '8px', backgroundColor: 'var(--purple-3)' }}>
-                <Package size={16} color="var(--purple-9)" />
-              </Box>
-            </Flex>
-            <Heading size="7">{stats?.plugins.total || 0}</Heading>
-            <Flex align="center" gap="1">
-              <Badge color="blue">{stats?.plugins.active || 0}</Badge>
-              <Text size="1" color="gray">个活跃</Text>
-            </Flex>
-          </Flex>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">插件总数</CardTitle>
+            <Package className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{stats?.plugins.total || 0}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              <Badge variant="secondary" className="mr-1">{stats?.plugins.active || 0}</Badge>个活跃
+            </p>
+          </CardContent>
         </Card>
 
         <Card>
-          <Flex direction="column" gap="2">
-            <Flex justify="between" align="center">
-              <Text size="2" weight="medium" color="gray">机器人</Text>
-              <Bot size={16} color="var(--gray-9)" />
-            </Flex>
-            <Heading size="7">{stats?.bots.total || 0}</Heading>
-            <Text size="1" color="green">
-              {stats?.bots.online || 0} 个在线
-            </Text>
-          </Flex>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">机器人</CardTitle>
+            <Bot className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{stats?.bots.total || 0}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              <Badge variant="success" className="mr-1">{stats?.bots.online || 0}</Badge>个在线
+            </p>
+          </CardContent>
         </Card>
 
         <Card>
-          <Flex direction="column" gap="2">
-            <Flex justify="between" align="center">
-              <Text size="2" weight="medium" color="gray">命令数量</Text>
-              <Activity size={16} color="var(--gray-9)" />
-            </Flex>
-            <Heading size="7">{stats?.commands || 0}</Heading>
-            <Text size="1" color="gray">可用命令</Text>
-          </Flex>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">命令数量</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{stats?.commands || 0}</div>
+            <p className="text-xs text-muted-foreground mt-1">可用命令</p>
+          </CardContent>
         </Card>
 
         <Card>
-          <Flex direction="column" gap="2">
-            <Flex justify="between" align="center">
-              <Text size="2" weight="medium" color="gray">组件数量</Text>
-              <TrendingUp size={16} color="var(--gray-9)" />
-            </Flex>
-            <Heading size="7">{stats?.components || 0}</Heading>
-            <Text size="1" color="gray">已注册组件</Text>
-          </Flex>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">组件数量</CardTitle>
+            <TrendingUp className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{stats?.components || 0}</div>
+            <p className="text-xs text-muted-foreground mt-1">已注册组件</p>
+          </CardContent>
         </Card>
-      </Grid>
+      </div>
 
-      {/* 系统状态 */}
-      <Grid columns={{ initial: '1', md: '2' }} gap="4" mb="6">
+      {/* System status */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <Card>
-          <Flex direction="column" gap="4">
-            <Box>
-              <Heading size="5" mb="1">系统信息</Heading>
-              <Text size="2" color="gray">服务器运行状态</Text>
-            </Box>
-
-            <Flex direction="column" gap="3">
-              <Flex justify="between" align="center">
-                <Flex align="center" gap="2">
-                  <Clock size={16} color="var(--gray-9)" />
-                  <Text size="2">运行时间</Text>
-                </Flex>
-                <Badge variant="soft">
-                  {systemStatus ? formatUptime(systemStatus.uptime) : '-'}
-                </Badge>
-              </Flex>
-
-              <Flex justify="between" align="center">
-                <Flex align="center" gap="2">
-                  <Cpu size={16} color="var(--gray-9)" />
-                  <Text size="2">平台</Text>
-                </Flex>
-                <Badge variant="soft">
-                  {systemStatus?.platform || '-'}
-                </Badge>
-              </Flex>
-
-              <Flex justify="between" align="center">
-                <Flex align="center" gap="2">
-                  <Activity size={16} color="var(--gray-9)" />
-                  <Text size="2">Node 版本</Text>
-                </Flex>
-                <Badge variant="soft">
-                  {systemStatus?.nodeVersion || '-'}
-                </Badge>
-              </Flex>
-            </Flex>
-          </Flex>
+          <CardHeader>
+            <CardTitle>系统信息</CardTitle>
+            <CardDescription>服务器运行状态</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-2 text-sm"><Clock className="h-4 w-4 text-muted-foreground" />运行时间</div>
+              <Badge variant="secondary">{systemStatus ? formatUptime(systemStatus.uptime) : '-'}</Badge>
+            </div>
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-2 text-sm"><Cpu className="h-4 w-4 text-muted-foreground" />平台</div>
+              <Badge variant="secondary">{systemStatus?.platform || '-'}</Badge>
+            </div>
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-2 text-sm"><Activity className="h-4 w-4 text-muted-foreground" />Node 版本</div>
+              <Badge variant="secondary">{systemStatus?.nodeVersion || '-'}</Badge>
+            </div>
+          </CardContent>
         </Card>
 
         <Card>
-          <Flex direction="column" gap="4">
-            <Box>
-              <Heading size="5" mb="1">资源使用</Heading>
-              <Text size="2" color="gray">内存使用情况</Text>
-            </Box>
-
-            <Flex direction="column" gap="3">
-              <Flex justify="between" align="center">
-                <Flex align="center" gap="2">
-                  <MemoryStick size={16} color="var(--gray-9)" />
-                  <Text size="2">堆内存使用</Text>
-                </Flex>
-                <Badge variant="soft">
-                  {stats ? `${stats.memory.toFixed(2)} MB` : '-'}
-                </Badge>
-              </Flex>
-
-              <Flex justify="between" align="center">
-                <Flex align="center" gap="2">
-                  <MemoryStick size={16} color="var(--gray-9)" />
-                  <Text size="2">总堆内存</Text>
-                </Flex>
-                <Badge variant="soft">
-                  {systemStatus ? formatMemory(systemStatus.memory.heapTotal) : '-'}
-                </Badge>
-              </Flex>
-
-              <Flex justify="between" align="center">
-                <Flex align="center" gap="2">
-                  <MemoryStick size={16} color="var(--gray-9)" />
-                  <Text size="2">RSS</Text>
-                </Flex>
-                <Badge variant="soft">
-                  {systemStatus ? formatMemory(systemStatus.memory.rss) : '-'}
-                </Badge>
-              </Flex>
-            </Flex>
-          </Flex>
+          <CardHeader>
+            <CardTitle>资源使用</CardTitle>
+            <CardDescription>内存使用情况</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-2 text-sm"><MemoryStick className="h-4 w-4 text-muted-foreground" />堆内存使用</div>
+              <Badge variant="secondary">{stats ? `${stats.memory.toFixed(2)} MB` : '-'}</Badge>
+            </div>
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-2 text-sm"><MemoryStick className="h-4 w-4 text-muted-foreground" />总堆内存</div>
+              <Badge variant="secondary">{systemStatus ? formatMemory(systemStatus.memory.heapTotal) : '-'}</Badge>
+            </div>
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-2 text-sm"><MemoryStick className="h-4 w-4 text-muted-foreground" />RSS</div>
+              <Badge variant="secondary">{systemStatus ? formatMemory(systemStatus.memory.rss) : '-'}</Badge>
+            </div>
+          </CardContent>
         </Card>
-      </Grid>
+      </div>
 
-      {/* 快速操作 */}
+      {/* Quick actions */}
       <Card>
-        <Flex direction="column" gap="4">
-          <Box>
-            <Heading size="5" mb="1">快速操作</Heading>
-            <Text size="2" color="gray">常用功能快捷入口</Text>
-          </Box>
-
-          <Grid columns={{ initial: '1', md: '3' }} gap="3">
-            <Button 
-              variant="outline"
-              onClick={() => navigate('/plugins')}
-              style={{ height: 'auto', padding: '16px', cursor: 'pointer' }}
-            >
-              <Flex direction="column" align="start" gap="2" style={{ width: '100%' }}>
-                <Package size={20} color="var(--blue-9)" />
-                <Text weight="medium">插件管理</Text>
-                <Text size="1" color="gray">查看和管理插件</Text>
-              </Flex>
+        <CardHeader>
+          <CardTitle>快速操作</CardTitle>
+          <CardDescription>常用功能快捷入口</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+            <Button variant="outline" className="h-auto p-4 justify-start" onClick={() => navigate('/plugins')}>
+              <div className="flex flex-col items-start gap-1">
+                <Package className="h-5 w-5 mb-1" />
+                <span className="font-medium">插件管理</span>
+                <span className="text-xs text-muted-foreground">查看和管理插件</span>
+              </div>
             </Button>
-
-            <Button 
-              variant="outline"
-              onClick={() => navigate('/bots')}
-              style={{ height: 'auto', padding: '16px', cursor: 'pointer' }}
-            >
-              <Flex direction="column" align="start" gap="2" style={{ width: '100%' }}>
-                <Bot size={20} color="var(--green-9)" />
-                <Text weight="medium">机器人状态</Text>
-                <Text size="1" color="gray">监控机器人运行</Text>
-              </Flex>
+            <Button variant="outline" className="h-auto p-4 justify-start" onClick={() => navigate('/bots')}>
+              <div className="flex flex-col items-start gap-1">
+                <Bot className="h-5 w-5 mb-1" />
+                <span className="font-medium">机器人状态</span>
+                <span className="text-xs text-muted-foreground">监控机器人运行</span>
+              </div>
             </Button>
-
-            <Button 
-              variant="outline"
-              onClick={() => navigate('/logs')}
-              style={{ height: 'auto', padding: '16px', cursor: 'pointer' }}
-            >
-              <Flex direction="column" align="start" gap="2" style={{ width: '100%' }}>
-                <FileText size={20} color="var(--purple-9)" />
-                <Text weight="medium">系统日志</Text>
-                <Text size="1" color="gray">查看运行日志</Text>
-              </Flex>
+            <Button variant="outline" className="h-auto p-4 justify-start" onClick={() => navigate('/logs')}>
+              <div className="flex flex-col items-start gap-1">
+                <FileText className="h-5 w-5 mb-1" />
+                <span className="font-medium">系统日志</span>
+                <span className="text-xs text-muted-foreground">查看运行日志</span>
+              </div>
             </Button>
-          </Grid>
-        </Flex>
+          </div>
+        </CardContent>
       </Card>
-    </Box>
+    </div>
   )
 }