@zhin.js/client 1.0.4 → 1.0.6

package/app/src/pages/dashboard-logs.tsx

@@ -1,298 +0,0 @@
-import { useEffect, useState, useRef } from 'react'
-import { Flex, Box, Spinner, Text, Callout, Heading, Badge, Grid, Card, Button, Select, Checkbox } from '@radix-ui/themes'
-import { Info, AlertTriangle, XCircle, Circle, Trash2, RefreshCw, FileText, AlertCircle } from 'lucide-react'
-
-interface LogEntry {
-  level: 'info' | 'warn' | 'error'
-  message: string
-  timestamp: string
-  source: string
-}
-
-interface LogStats {
-  total: number
-  byLevel: Record<string, number>
-  oldestTimestamp: string | null
-}
-
-export default function DashboardLogs() {
-  const [logs, setLogs] = useState<LogEntry[]>([])
-  const [stats, setStats] = useState<LogStats | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [levelFilter, setLevelFilter] = useState<string>('all')
-  const [autoScroll, setAutoScroll] = useState(true)
-  const logsEndRef = useRef<HTMLDivElement>(null)
-  const [prevLogCount, setPrevLogCount] = useState(0)
-
-  useEffect(() => {
-    fetchLogs()
-    fetchStats()
-    const interval = setInterval(() => {
-      fetchLogs()
-      fetchStats()
-    }, 3000)
-    return () => clearInterval(interval)
-  }, [levelFilter])
-
-  useEffect(() => {
-    if (autoScroll && logs.length > prevLogCount) {
-      logsEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-    }
-    setPrevLogCount(logs.length)
-  }, [logs, autoScroll])
-
-  const fetchLogs = async () => {
-    try {
-      const url = levelFilter === 'all' 
-        ? '/api/logs?limit=100' 
-        : `/api/logs?limit=100&level=${levelFilter}`
-      
-      const res = await fetch(url, { credentials: 'include' })
-      if (!res.ok) throw new Error('API 请求失败')
-
-      const data = await res.json()
-      if (data.success && Array.isArray(data.data)) {
-        setLogs(data.data.reverse())
-        setError(null)
-      }
-    } catch (err) {
-      setError((err as Error).message)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const fetchStats = async () => {
-    try {
-      const res = await fetch('/api/logs/stats', { credentials: 'include' })
-      if (!res.ok) return
-
-      const data = await res.json()
-      if (data.success) {
-        setStats(data.data)
-      }
-    } catch (err) {
-      console.error('Failed to fetch stats:', err)
-    }
-  }
-
-  const handleCleanup = async (days?: number, maxRecords?: number) => {
-    const message = days 
-      ? `确定清理 ${days} 天前的日志吗？`
-      : `确定只保留最近 ${maxRecords} 条日志吗？`
-    
-    if (!confirm(message)) return
-
-    try {
-      const res = await fetch('/api/logs/cleanup', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ days, maxRecords }),
-        credentials: 'include'
-      })
-
-      if (!res.ok) throw new Error('清理失败')
-
-      const data = await res.json()
-      if (data.success) {
-        alert(`成功清理 ${data.data.deletedCount} 条日志`)
-        fetchLogs()
-        fetchStats()
-      }
-    } catch (err) {
-      alert((err as Error).message)
-    }
-  }
-
-  const getLevelColor = (level: string): 'blue' | 'amber' | 'red' | 'gray' => {
-    switch (level) {
-      case 'info': return 'blue'
-      case 'warn': return 'amber'
-      case 'error': return 'red'
-      default: return 'gray'
-    }
-  }
-
-  const getLevelIcon = (level: string) => {
-    switch (level) {
-      case 'info': return <Info size={14} />
-      case 'warn': return <AlertTriangle size={14} />
-      case 'error': return <XCircle size={14} />
-      default: return <Circle size={14} />
-    }
-  }
-
-  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>
-    )
-  }
-
-  return (
-    <Box>
-      {/* 页面标题 */}
-      <Flex direction="column" gap="2" mb="4">
-        <Heading size="8">系统日志</Heading>
-        <Text color="gray">实时查看系统运行日志</Text>
-      </Flex>
-
-      {/* 日志统计 */}
-      {stats && (
-        <Grid columns={{ initial: '2', sm: '4' }} gap="3" mb="4">
-          <Card>
-            <Flex direction="column" align="center" gap="1" p="3">
-              <Text size="5" weight="bold">{stats.total}</Text>
-              <Text size="1" color="gray">总日志数</Text>
-            </Flex>
-          </Card>
-          <Card>
-            <Flex direction="column" align="center" gap="1" p="3">
-              <Text size="5" weight="bold" color="blue">{stats.byLevel.info || 0}</Text>
-              <Text size="1" color="gray">Info</Text>
-            </Flex>
-          </Card>
-          <Card>
-            <Flex direction="column" align="center" gap="1" p="3">
-              <Text size="5" weight="bold" color="amber">{stats.byLevel.warn || 0}</Text>
-              <Text size="1" color="gray">Warn</Text>
-            </Flex>
-          </Card>
-          <Card>
-            <Flex direction="column" align="center" gap="1" p="3">
-              <Text size="5" weight="bold" color="red">{stats.byLevel.error || 0}</Text>
-              <Text size="1" color="gray">Error</Text>
-            </Flex>
-          </Card>
-        </Grid>
-      )}
-
-      {/* 工具栏 */}
-      <Card mb="4">
-        <Flex justify="between" align="center" p="3" wrap="wrap" gap="3">
-          <Flex align="center" gap="3" wrap="wrap">
-            <Select.Root value={levelFilter} onValueChange={setLevelFilter}>
-              <Select.Trigger style={{ minWidth: '120px' }} />
-              <Select.Content>
-                <Select.Item value="all">所有级别</Select.Item>
-                <Select.Item value="info">Info</Select.Item>
-                <Select.Item value="warn">Warn</Select.Item>
-                <Select.Item value="error">Error</Select.Item>
-              </Select.Content>
-            </Select.Root>
-
-            <Flex as="span">
-              <Checkbox 
-                checked={autoScroll} 
-                onCheckedChange={(checked) => setAutoScroll(checked as boolean)}
-              />
-              <Text size="2">自动滚动</Text>
-            </Flex>
-          </Flex>
-
-          <Flex gap="2">
-            <Button 
-              variant="soft" 
-              onClick={() => handleCleanup(7)}
-              size="2"
-            >
-              <Trash2 size={14} />
-              清理7天前
-            </Button>
-            <Button 
-              variant="soft" 
-              onClick={() => handleCleanup(undefined, 5000)}
-              size="2"
-            >
-              <Trash2 size={14} />
-              保留5000条
-            </Button>
-            <Button 
-              variant="soft" 
-              onClick={() => fetchLogs()}
-              size="2"
-            >
-              <RefreshCw size={14} />
-              刷新
-            </Button>
-          </Flex>
-        </Flex>
-      </Card>
-
-      {/* 日志列表 */}
-      <Card>
-        <Box 
-          p="4" 
-          style={{ 
-            maxHeight: '600px', 
-            overflowY: 'auto',
-            backgroundColor: 'var(--gray-1)'
-          }}
-        >
-          {error ? (
-            <Callout.Root color="red">
-              <Callout.Icon>
-                <AlertCircle />
-              </Callout.Icon>
-              <Callout.Text>
-                加载失败: {error}
-              </Callout.Text>
-            </Callout.Root>
-          ) : logs.length === 0 ? (
-            <Flex direction="column" align="center" gap="3" py="9">
-              <FileText size={48} color="var(--gray-6)" />
-              <Text color="gray">暂无日志</Text>
-            </Flex>
-          ) : (
-            <Flex direction="column" gap="2">
-              {logs.map((log, index) => (
-                <Box 
-                  key={`${log.timestamp}-${index}`}
-                  p="3"
-                  style={{ 
-                    borderRadius: '6px',
-                    backgroundColor: 'var(--gray-2)',
-                    borderLeft: `3px solid var(--${getLevelColor(log.level)}-9)`
-                  }}
-                >
-                  <Flex direction="column" gap="1">
-                    <Flex align="center" gap="2">
-                      <Badge color={getLevelColor(log.level)} size="1">
-                        <Flex align="center" gap="1">
-                          {getLevelIcon(log.level)}
-                          {log.level.toUpperCase()}
-                        </Flex>
-                      </Badge>
-                      <Text size="1" color="gray">
-                        {new Date(log.timestamp).toLocaleString()}
-                      </Text>
-                      {log.source && (
-                        <Badge variant="soft" size="1">{log.source}</Badge>
-                      )}
-                    </Flex>
-                    <Text 
-                      size="2" 
-                      style={{ 
-                        fontFamily: 'monospace',
-                        whiteSpace: 'pre-wrap',
-                        wordBreak: 'break-word'
-                      }}
-                    >
-                      {log.message}
-                    </Text>
-                  </Flex>
-                </Box>
-              ))}
-              <div ref={logsEndRef} />
-            </Flex>
-          )}
-        </Box>
-      </Card>
-    </Box>
-  )
-}

package/app/src/pages/dashboard-plugin-detail.tsx

@@ -1,360 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useParams, useNavigate } from 'react-router'
-import * as Themes from '@radix-ui/themes'
-import { Icons } from '@zhin.js/client'
-import {PluginConfigForm} from '../components/PluginConfigForm'
-
-const { Flex, Box, Spinner, Text, Callout, Heading, Badge, Grid, Card, Button, Code, Separator, ScrollArea, Dialog } = Themes
-
-interface PluginDetail {
-  name: string
-  filename: string
-  status: 'active' | 'inactive'
-  description: string
-  commands: Array<{
-    name: string
-  }>
-  components: Array<{
-    name: string
-    props: Record<string, any>
-    type: string
-  }>
-  middlewares: Array<{
-    id: string
-    type: string
-  }>
-  contexts: Array<{
-    name: string
-    description: string
-  }>
-  crons: Array<{
-    id: string
-    pattern: string
-    running: boolean
-  }>
-  definitions: Array<{
-    name: string
-    fields: string[]
-  }>
-  statistics: {
-    commandCount: number
-    componentCount: number
-    middlewareCount: number
-    contextCount: number
-    cronCount: number
-    definitionCount: number
-  }
-}
-
-export default function DashboardPluginDetail() {
-  const { name } = useParams<{ name: string }>()
-  const navigate = useNavigate()
-  const [plugin, setPlugin] = useState<PluginDetail | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (name) {
-      fetchPluginDetail(name)
-    }
-  }, [name])
-
-  const fetchPluginDetail = async (pluginName: string) => {
-    try {
-      const res = await fetch(`/api/plugins/${encodeURIComponent(pluginName)}`, { credentials: 'include' })
-      if (!res.ok) throw new Error('API 请求失败')
-
-      const data = await res.json()
-      if (data.success) {
-        setPlugin(data.data)
-        setError(null)
-      } else {
-        throw new Error('数据格式错误')
-      }
-    } catch (err) {
-      setError((err as Error).message)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-
-
-  if (loading) {
-    return (
-      <Flex align="center" justify="center" className="h-full">
-        <Flex direction="column" align="center" gap="3">
-          <Spinner size="3" />
-          <Text size="2" color="gray">加载中...</Text>
-        </Flex>
-      </Flex>
-    )
-  }
-
-  if (error || !plugin) {
-    return (
-      <Box>
-        <Button variant="ghost" onClick={() => navigate('/plugins')} mb="4" size="2">
-          <Icons.ArrowLeft className="w-4 h-4" />
-          返回
-        </Button>
-        <Callout.Root color="red">
-          <Callout.Icon>
-            <Icons.AlertCircle />
-          </Callout.Icon>
-          <Callout.Text>
-            加载失败: {error || '插件不存在'}
-          </Callout.Text>
-        </Callout.Root>
-      </Box>
-    )
-  }
-
-  return (
-    <Box>
-      {/* 头部 */}
-      <Flex direction="column" gap="3" mb="4">
-        <Button variant="ghost" onClick={() => navigate('/plugins')} size="2">
-          <Icons.ArrowLeft className="w-4 h-4" />
-          返回
-        </Button>
-
-        <Flex align="center" gap="3">
-          <Flex align="center" justify="center" className="w-12 h-12 rounded-xl bg-blue-500/10 dark:bg-blue-400/10">
-            <Icons.Package className="w-6 h-6 text-blue-600 dark:text-blue-400" />
-          </Flex>
-          <Flex direction="column" gap="1">
-            <Flex align="center" gap="2">
-              <Heading size="5">{plugin.name}</Heading>
-              <Badge color={plugin.status === 'active' ? 'green' : 'gray'} size="1">
-                {plugin.status === 'active' ? '运行中' : '已停止'}
-              </Badge>
-            </Flex>
-            <Text size="2" color="gray">{plugin.description || '暂无描述'}</Text>
-          </Flex>
-        </Flex>
-      </Flex>
-
-      {/* 插件配置折叠面板 */}
-      <PluginConfigForm
-        pluginName={plugin.name}
-        onSuccess={() => {
-          // 配置更新会通过 WebSocket 自动同步
-        }}
-      />
-
-      <Separator size="4" my="4" />
-
-      {/* 统计概览 - 紧凑卡片 */}
-      <Grid columns={{ initial: '2', sm: '3', md: '6' }} gap="2" mb="4">
-        <Card size="1">
-          <Flex direction="column" align="center" gap="1" p="2">
-            <Icons.Terminal className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-            <Text size="4" weight="bold">{plugin.statistics.commandCount}</Text>
-            <Text size="1" color="gray">命令</Text>
-          </Flex>
-        </Card>
-
-        <Card size="1">
-          <Flex direction="column" align="center" gap="1" p="2">
-            <Icons.Box className="w-4 h-4 text-green-600 dark:text-green-400" />
-            <Text size="4" weight="bold">{plugin.statistics.componentCount}</Text>
-            <Text size="1" color="gray">组件</Text>
-          </Flex>
-        </Card>
-
-        <Card size="1">
-          <Flex direction="column" align="center" gap="1" p="2">
-            <Icons.Layers className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-            <Text size="4" weight="bold">{plugin.statistics.middlewareCount}</Text>
-            <Text size="1" color="gray">中间件</Text>
-          </Flex>
-        </Card>
-
-        <Card size="1">
-          <Flex direction="column" align="center" gap="1" p="2">
-            <Icons.Database className="w-4 h-4 text-orange-600 dark:text-orange-400" />
-            <Text size="4" weight="bold">{plugin.statistics.contextCount}</Text>
-            <Text size="1" color="gray">上下文</Text>
-          </Flex>
-        </Card>
-
-        <Card size="1">
-          <Flex direction="column" align="center" gap="1" p="2">
-            <Icons.Clock className="w-4 h-4 text-amber-600 dark:text-amber-400" />
-            <Text size="4" weight="bold">{plugin.statistics.cronCount}</Text>
-            <Text size="1" color="gray">定时任务</Text>
-          </Flex>
-        </Card>
-
-        <Card size="1">
-          <Flex direction="column" align="center" gap="1" p="2">
-            <Icons.FileText className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
-            <Text size="4" weight="bold">{plugin.statistics.definitionCount}</Text>
-            <Text size="1" color="gray">数据模型</Text>
-          </Flex>
-        </Card>
-      </Grid>
-
-      {/* 详细信息 - 紧凑布局 */}
-      <Grid columns={{ initial: '1', md: '2' }} gap="3">
-        {/* 命令列表 */}
-        {plugin.commands.length > 0 && (
-          <Card size="2">
-            <Flex direction="column" gap="2" p="3">
-              <Flex align="center" gap="2">
-                <Icons.Terminal className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                <Heading size="3">命令</Heading>
-                <Badge size="1">{plugin.commands.length}</Badge>
-              </Flex>
-              <Separator size="4" />
-              <Flex direction="column" gap="2" className="max-h-60 overflow-y-auto">
-                {plugin.commands.map((cmd, index) => (
-                  <Box key={index} className="rounded-lg bg-gray-50 dark:bg-gray-900 p-2">
-                    <Flex direction="column" gap="1">
-                      <Flex align="center" gap="2">
-                        <Code size="2">{cmd.name}</Code>
-                      </Flex>
-                    </Flex>
-                  </Box>
-                ))}
-              </Flex>
-            </Flex>
-          </Card>
-        )}
-
-        {/* 组件列表 */}
-        {plugin.components.length > 0 && (
-          <Card size="2">
-            <Flex direction="column" gap="2" p="3">
-              <Flex align="center" gap="2">
-                <Icons.Box className="w-4 h-4 text-green-600 dark:text-green-400" />
-                <Heading size="3">组件</Heading>
-                <Badge size="1">{plugin.components.length}</Badge>
-              </Flex>
-              <Separator size="4" />
-              <Flex direction="column" gap="2" className="max-h-60 overflow-y-auto">
-                {plugin.components.map((comp, index) => (
-                  <Box key={index} className="rounded-lg bg-gray-50 dark:bg-gray-900 p-2">
-                    <Flex direction="column" gap="1">
-                      <Flex align="center" gap="2">
-                        <Code size="2">{comp.name}</Code>
-                        <Badge size="1" variant="soft">{comp.type}</Badge>
-                      </Flex>
-                      <Text size="1" color="gray">
-                        属性数: {Object.keys(comp.props).length}
-                      </Text>
-                    </Flex>
-                  </Box>
-                ))}
-              </Flex>
-            </Flex>
-          </Card>
-        )}
-
-        {/* 中间件列表 */}
-        {plugin.middlewares.length > 0 && (
-          <Card size="2">
-            <Flex direction="column" gap="2" p="3">
-              <Flex align="center" gap="2">
-                <Icons.Layers className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-                <Heading size="3">中间件</Heading>
-                <Badge size="1">{plugin.middlewares.length}</Badge>
-              </Flex>
-              <Separator size="4" />
-              <Flex direction="column" gap="2" className="max-h-60 overflow-y-auto">
-                {plugin.middlewares.map((mw, index) => (
-                  <Box key={index} className="rounded-lg bg-gray-50 dark:bg-gray-900 p-2">
-                    <Flex align="center" gap="2">
-                      <Code size="2">{mw.id}</Code>
-                      <Badge size="1" variant="soft">{mw.type}</Badge>
-                    </Flex>
-                  </Box>
-                ))}
-              </Flex>
-            </Flex>
-          </Card>
-        )}
-
-        {/* 上下文列表 */}
-        {plugin.contexts.length > 0 && (
-          <Card size="2">
-            <Flex direction="column" gap="2" p="3">
-              <Flex align="center" gap="2">
-                <Icons.Database className="w-4 h-4 text-orange-600 dark:text-orange-400" />
-                <Heading size="3">上下文</Heading>
-                <Badge size="1">{plugin.contexts.length}</Badge>
-              </Flex>
-              <Separator size="4" />
-              <Flex direction="column" gap="2" className="max-h-60 overflow-y-auto">
-                {plugin.contexts.map((ctx, index) => (
-                  <Box key={index} className="rounded-lg bg-gray-50 dark:bg-gray-900 p-2">
-                    <Flex direction="column" gap="1">
-                      <Code size="2">{ctx.name}</Code>
-                      <Text size="1" color="gray">{ctx.description}</Text>
-                    </Flex>
-                  </Box>
-                ))}
-              </Flex>
-            </Flex>
-          </Card>
-        )}
-
-        {/* 定时任务列表 */}
-        {plugin.crons.length > 0 && (
-          <Card size="2">
-            <Flex direction="column" gap="2" p="3">
-              <Flex align="center" gap="2">
-                <Icons.Clock className="w-4 h-4 text-amber-600 dark:text-amber-400" />
-                <Heading size="3">定时任务</Heading>
-                <Badge size="1">{plugin.crons.length}</Badge>
-              </Flex>
-              <Separator size="4" />
-              <Flex direction="column" gap="2" className="max-h-60 overflow-y-auto">
-                {plugin.crons.map((cron, index) => (
-                  <Box key={index} className="rounded-lg bg-gray-50 dark:bg-gray-900 p-2">
-                    <Flex justify="between" align="center">
-                      <Flex direction="column" gap="1">
-                        <Code size="2">{cron.id}</Code>
-                        <Text size="1" color="gray">{cron.pattern}</Text>
-                      </Flex>
-                      <Badge color={cron.running ? 'green' : 'gray'} size="1">
-                        {cron.running ? '运行中' : '已停止'}
-                      </Badge>
-                    </Flex>
-                  </Box>
-                ))}
-              </Flex>
-            </Flex>
-          </Card>
-        )}
-
-        {/* 数据模型列表 */}
-        {plugin.definitions.length > 0 && (
-          <Card size="2">
-            <Flex direction="column" gap="2" p="3">
-              <Flex align="center" gap="2">
-                <Icons.FileText className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
-                <Heading size="3">数据模型</Heading>
-                <Badge size="1">{plugin.definitions.length}</Badge>
-              </Flex>
-              <Separator size="4" />
-              <Flex direction="column" gap="2" className="max-h-60 overflow-y-auto">
-                {plugin.definitions.map((definition, index) => (
-                  <Box key={index} className="rounded-lg bg-gray-50 dark:bg-gray-900 p-2">
-                    <Flex direction="column" gap="1">
-                      <Code size="2">{definition.name}</Code>
-                      <Text size="1" color="gray">
-                        字段: {definition.fields.join(', ')}
-                      </Text>
-                    </Flex>
-                  </Box>
-                ))}
-              </Flex>
-            </Flex>
-          </Card>
-        )}
-      </Grid>
-    </Box>
-  )
-}