@zhin.js/client 1.0.4 → 1.0.5

package/app/src/layouts/dashboard.tsx

@@ -1,259 +0,0 @@
-import { Outlet, Link, useSelector, useDispatch, toggleSidebar, setActiveMenu, useWebSocket } from "@zhin.js/client"
-import React, { useMemo } from "react"
-import { Avatar, DropdownMenu } from 'radix-ui'
-import * as Themes from '@radix-ui/themes'
-import { Icons, cn } from "@zhin.js/client"
-import { ThemeToggle } from "../components/ThemeToggle"
-
-const { Box, Flex, Text, Heading, IconButton, Badge, TextField, ScrollArea, Container } = Themes
-
-export default function DashboardLayout() {
-    const dispatch = useDispatch()
-    const ws = useWebSocket()
-    const sidebarOpen = useSelector(state => state.ui.sidebarOpen)
-    const activeMenu = useSelector(state => state.ui.activeMenu)
-    const routes = useSelector(state => state.route.routes)
-
-    const menuItems = useMemo(() => {
-        // 找到 dashboard 路由
-        const dashboardRoute = routes.find(route => route.key === 'dashboard-layout')
-        if (!dashboardRoute || !dashboardRoute.children) {
-            return []
-        }
-        return dashboardRoute.children
-            .filter(route => !route.meta?.hideInMenu && route.key !== 'dashboard-layout')
-            .map((route, index) => ({
-                key: route.key || `menu-item-${index}`,
-                title: route.title,
-                index: route.index,
-                icon: route.icon,
-                href: route.path
-            }))
-    }, [routes])
-
-    return (
-        <Flex className="h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-            {/* 侧边栏 */}
-            <Flex
-                direction="column"
-                className={cn(
-                    "glass transition-all duration-300 shadow-xl border-r border-gray-200/50 dark:border-gray-700/50",
-                    sidebarOpen ? "w-64" : "w-20"
-                )}
-            >
-                {/* Logo 区域 */}
-                <Box p="4" className="border-b border-gray-200/50 dark:border-gray-700/50">
-                    <Flex
-                        align="center"
-                        className={cn(
-                            "transition-all duration-300",
-                            sidebarOpen ? "gap-3" : "justify-center"
-                        )}
-                    >
-                        <Flex
-                            align="center"
-                            justify="center"
-                            className="w-11 min-w-11 h-11 rounded-xl shadow-md bg-gradient-to-br from-blue-500 to-purple-600"
-                        >
-                            <Text size="5" weight="bold" className="text-white">
-                                Z
-                            </Text>
-                        </Flex>
-                        {sidebarOpen && (
-                            <Flex direction="column" gap="0">
-                                <Heading size="4" className="text-gray-900 dark:text-gray-100">
-                                    Zhin.js
-                                </Heading>
-                                <Text size="1" color="gray">管理控制台</Text>
-                            </Flex>
-                        )}
-                    </Flex>
-                </Box>
-
-                {/* 菜单列表 */}
-                <ScrollArea className="flex-1" scrollbars="vertical">
-                    <Box p="3">
-                        <Flex direction="column" gap="2">
-                            {menuItems.map((item) => {
-                                const isActive = activeMenu === item.key
-                                return (
-                                    <Link
-                                        key={item.key}
-                                        to={item.href}
-                                        onClick={() => dispatch(setActiveMenu(item.key))}
-                                        className={cn("menu-item", isActive && "active")}
-                                    >
-                                        {item.icon && React.isValidElement(item.icon) && (
-                                            <div className="icon">
-                                                {item.icon}
-                                            </div>
-                                        )}
-                                        {sidebarOpen && (
-                                            <div className="text">
-                                                <div className="title">{item.title}</div>
-                                            </div>
-                                        )}
-                                        {isActive && sidebarOpen && <div className="indicator" />}
-                                    </Link>
-                                )
-                            })}
-                        </Flex>
-                    </Box>
-                </ScrollArea>
-
-                {/* 侧边栏底部用户信息 */}
-                <Flex p="3" className="border-t border-gray-200/50 dark:border-gray-700/50 flex-shrink-0">
-                    <Flex
-                        align="center"
-                        gap="2"
-                        p="2"
-                        className={cn(
-                            "rounded-xl bg-gray-50/50 dark:bg-gray-800/50 transition-all duration-200 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700",
-                            !sidebarOpen && "justify-center"
-                        )}
-                    >
-                        <Avatar.Root className="w-8 h-8 min-w-8 border-2 border-gray-200 dark:border-gray-700 flex-shrink-0">
-                            <Avatar.Image src="https://i.pravatar.cc/150?u=admin" alt="管理员" />
-                            <Avatar.Fallback>管</Avatar.Fallback>
-                        </Avatar.Root>
-                        {sidebarOpen && (
-                            <Flex direction="column" gap="0" className="flex-1 min-w-0">
-                                <Text size="2" weight="medium" className="truncate text-gray-900 dark:text-gray-100">
-                                    管理员
-                                </Text>
-                                <Text size="1" color="gray" className="truncate">
-                                    admin@zhin.com
-                                </Text>
-                            </Flex>
-                        )}
-                    </Flex>
-                </Flex>
-            </Flex>
-
-            {/* 主内容区域 */}
-            <Flex direction="column" className="flex-1 overflow-hidden">
-                {/* 顶部导航栏 */}
-                <Box className="glass border-b border-gray-200/50 dark:border-gray-700/50 shadow-sm">
-                    <Flex justify="between" align="center" px="4" className="h-16">
-                        {/* 左侧 */}
-                        <Flex align="center" gap="3">
-                            <IconButton
-                                variant="ghost"
-                                size="2"
-                                onClick={() => dispatch(toggleSidebar())}
-                                className="hover-lift rounded-xl"
-                            >
-                                <Icons.Menu className="w-5 h-5" />
-                            </IconButton>
-                            <Flex direction="column" gap="0">
-                                <Heading size="3" className="text-gray-900 dark:text-gray-100">控制台</Heading>
-                                <Text size="1" color="gray">欢迎回来！</Text>
-                            </Flex>
-                        </Flex>
-
-                        {/* 中间搜索栏 */}
-                        <Flex className="hidden md:flex flex-1 max-w-xl mx-6">
-                            <Box className="relative">
-                                <Icons.Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" />
-                                <TextField.Root
-                                    placeholder="搜索功能、用户、设置..."
-                                    size="2"
-                                    className="w-full pl-10"
-                                />
-                            </Box>
-                        </Flex>
-
-                        {/* 右侧操作区 */}
-                        <Flex align="center" gap="2">
-                            {/* 主题切换 */}
-                            <ThemeToggle />
-
-                            {/* 通知按钮 */}
-                            <Box className="relative">
-                                <IconButton
-                                    variant="ghost"
-                                    size="2"
-                                    className="hover-lift rounded-xl"
-                                >
-                                    <Icons.Bell className="w-5 h-5" />
-                                </IconButton>
-                                <Badge
-                                    color="red"
-                                    variant="solid"
-                                    size="1"
-                                    className="absolute -top-1 -right-1 min-w-5 h-5 flex items-center justify-center p-0"
-                                >
-                                    3
-                                </Badge>
-                            </Box>
-
-                            {/* 用户菜单 */}
-                            <DropdownMenu.Root>
-                                <DropdownMenu.Trigger asChild>
-                                    <Flex
-                                        align="center"
-                                        gap="2"
-                                        px="2"
-                                        py="1"
-                                        className="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 rounded-xl"
-                                    >
-                                        <Avatar.Root className="w-8 h-8 border-2 border-blue-500/20 dark:border-blue-400/30">
-                                            <Avatar.Image src="https://i.pravatar.cc/150?u=admin" alt="管理员" />
-                                            <Avatar.Fallback>管</Avatar.Fallback>
-                                        </Avatar.Root>
-                                        <Flex direction="column" gap="0" className="hidden lg:flex">
-                                            <Text size="2" weight="medium" className="text-gray-900 dark:text-gray-100">
-                                                管理员
-                                            </Text>
-                                            <Text size="1" color="gray">
-                                                admin@zhin.com
-                                            </Text>
-                                        </Flex>
-                                    </Flex>
-                                </DropdownMenu.Trigger>
-                                <DropdownMenu.Content align="end" className="min-w-56">
-                                    <Box p="3" className="border-b border-gray-200 dark:border-gray-700">
-                                        <Text size="2" weight="bold" className="block">
-                                            登录为
-                                        </Text>
-                                        <Text size="1" color="gray" className="block">
-                                            admin@zhin.com
-                                        </Text>
-                                    </Box>
-                                    <DropdownMenu.Item>
-                                        <Icons.User className="mr-2 h-4 w-4" />
-                                        我的设置
-                                    </DropdownMenu.Item>
-                                    <DropdownMenu.Item>
-                                        <Icons.Users className="mr-2 h-4 w-4" />
-                                        团队设置
-                                    </DropdownMenu.Item>
-                                    <DropdownMenu.Item>
-                                        <Icons.BarChart3 className="mr-2 h-4 w-4" />
-                                        数据分析
-                                    </DropdownMenu.Item>
-                                    <DropdownMenu.Item>
-                                        <Icons.HelpCircle className="mr-2 h-4 w-4" />
-                                        帮助与反馈
-                                    </DropdownMenu.Item>
-                                    <DropdownMenu.Separator />
-                                    <DropdownMenu.Item color="red">
-                                        <Icons.LogOut className="mr-2 h-4 w-4" />
-                                        退出登录
-                                    </DropdownMenu.Item>
-                                </DropdownMenu.Content>
-                            </DropdownMenu.Root>
-                        </Flex>
-                    </Flex>
-                </Box>
-
-                {/* 主内容区域 */}
-                <Flex className="flex-1 overflow-auto">
-                    <Container size="4" p="6">
-            <Outlet />
-                    </Container>
-                </Flex>
-            </Flex>
-        </Flex>
-    )
-}

package/app/src/main.tsx

@@ -1,121 +0,0 @@
-import { StrictMode, useEffect, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-import { Provider as ReduxProvider } from 'react-redux'
-import { store, DynamicRouter, persistor, addPage, useSelector, Icons } from '@zhin.js/client'
-import DashboardLayout from './layouts/dashboard'
-import DashboardHome from './pages/dashboard-home'
-import DashboardPlugins from './pages/dashboard-plugins'
-import DashboardPluginDetail from './pages/dashboard-plugin-detail'
-import DashboardBots from './pages/dashboard-bots'
-import DashboardLogs from './pages/dashboard-logs'
-import { Theme } from '@radix-ui/themes';
-import '@radix-ui/themes/styles.css'
-import './style.css'
-import { PersistGate } from 'redux-persist/integration/react'
-import { initializeTheme } from './theme'
-
-// Initialize theme on app load
-initializeTheme()
-
-
-// 路由配置
-const routes = [
-    {
-        key: 'dashboard-layout',
-        path: '/',
-        title: 'Dashboard',
-        element: <DashboardLayout />,
-        redirect: '/dashboard',
-        meta: { order: 0 },
-        children: [
-            {
-                key: 'dashboard-home',
-                index: true,
-                path: '',
-                title: '系统概览',
-                icon: <Icons.Home className="w-5 h-5" />,
-                element: <DashboardHome />,
-            },
-
-             {
-                 key: 'dashboard-plugins',
-                 path: '/plugins',
-                 title: '插件管理',
-                 icon: <Icons.Package className="w-5 h-5" />,
-                 element: <DashboardPlugins />,
-                 meta: { order: 2 }
-             },
-             {
-                 key: 'dashboard-plugin-detail',
-                 title: '插件详情',
-                 path: '/plugins/:name',
-                 element: <DashboardPluginDetail />,
-                 meta: { hideInMenu: true }
-             },
-            {
-                key: 'dashboard-bots',
-                path: '/bots',
-                title: '机器人',
-                icon: <Icons.Bot className="w-5 h-5" />,
-                element: <DashboardBots />,
-                meta: { order: 3 }
-            },
-            {
-                key: 'dashboard-logs',
-                path: '/logs',
-                title: '系统日志',
-                icon: <Icons.FileText className="w-5 h-5" />,
-                element: <DashboardLogs />,
-                meta: { order: 4 }
-            }
-        ]
-    }
-]
-
-// 路由初始化组件
-function RouteInitializer() {
-    const entries = useSelector(state => state.script.entries)
-    const loadedScripts = useSelector(state => state.script.loadedScripts)
-    const [staticRoutesLoaded, setStaticRoutesLoaded] = useState(false)
-
-    useEffect(() => {
-        // 添加静态路由
-        routes.forEach(route => {
-            addPage(route)
-        })
-        setStaticRoutesLoaded(true)
-    }, [])
-
-    // 检查是否所有脚本都已加载
-    const allScriptsLoaded = entries.length === 0 || entries.length === loadedScripts.length
-
-    // 等待静态路由和动态脚本都加载完成
-    if (!staticRoutesLoaded || !allScriptsLoaded) {
-        return (
-            <div className="flex items-center justify-center h-screen">
-                <div className="text-center">
-                    <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
-                    <p className="mt-2 text-gray-600">
-                        加载中... ({loadedScripts.length}/{entries.length})
-                    </p>
-                </div>
-            </div>
-        )
-    }
-
-    return <DynamicRouter />
-}
-
-createRoot(
-    document.getElementById('root'),
-).render(
-    <StrictMode>
-        <Theme accentColor="blue" grayColor="slate" radius="large" scaling="100%">
-            <PersistGate loading={null} persistor={persistor}>
-                <ReduxProvider store={store}>
-                    <RouteInitializer />
-                </ReduxProvider>
-            </PersistGate>
-        </Theme>
-    </StrictMode>,
-)

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

@@ -1,198 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Bot, AlertCircle, Wifi, WifiOff, Activity, Package, Zap } from 'lucide-react'
-import {Flex,Box,Spinner,Text,Callout,Heading,Badge,Separator,Grid,Card} from '@radix-ui/themes'
-
-interface BotInfo {
-  name: string
-  adapter: string
-  connected: boolean
-  status: 'online' | 'offline'
-}
-
-export default function DashboardBots() {
-  const [bots, setBots] = useState<BotInfo[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    fetchBots()
-    const interval = setInterval(fetchBots, 5000)
-    return () => clearInterval(interval)
-  }, [])
-
-  const fetchBots = async () => {
-    try {
-      const res = await fetch('/api/bots', { credentials: 'include' })
-      if (!res.ok) throw new Error('API 请求失败')
-
-      const data = await res.json()
-      if (data.success) {
-        setBots(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" style={{ height: '100%' }}>
-        <Box>
-          <Spinner size="3" />
-          <Text size="2" color="gray" style={{ marginTop: '8px' }}>加载中...</Text>
-        </Box>
-      </Flex>
-    )
-  }
-
-  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>
-    )
-  }
-
-  return (
-    <Box>
-      {/* 页面标题 */}
-      <Flex direction="column" gap="2" mb="6">
-        <Heading size="8">机器人管理</Heading>
-        <Flex align="center" gap="2">
-          <Text color="gray">共 {bots.length} 个机器人，</Text>
-          <Badge color="green">{bots.filter(b => b.connected).length}</Badge>
-          <Text color="gray">个在线</Text>
-        </Flex>
-      </Flex>
-
-      <Separator size="4" mb="6" />
-
-      {/* 机器人列表 */}
-      <Grid columns={{ initial: '1', sm: '2', lg: '3' }} gap="4">
-        {bots.map((bot, index) => (
-          <Card key={`${bot.adapter}-${bot.name}-${index}`}>
-            <Flex direction="column" gap="3">
-              {/* 头部 */}
-              <Flex justify="between" align="center">
-                <Flex align="center" gap="2">
-                  <Box
-                    style={{
-                      padding: '8px',
-                      borderRadius: '8px',
-                      backgroundColor: bot.connected ? 'var(--green-3)' : 'var(--gray-3)'
-                    }}
-                  >
-                    <Bot 
-                      size={20}
-                      color={bot.connected ? 'var(--green-9)' : 'var(--gray-9)'}
-                    />
-                  </Box>
-                  <Text size="4" weight="bold">{bot.name}</Text>
-                </Flex>
-                
-                <Box style={{ position: 'relative' }}>
-                  <Badge color={bot.connected ? 'green' : 'gray'}>
-                    <Flex align="center" gap="1">
-                      {bot.connected ? (
-                        <>
-                          <Wifi size={12} />
-                          在线
-                        </>
-                      ) : (
-                        <>
-                          <WifiOff size={12} />
-                          离线
-                        </>
-                      )}
-                    </Flex>
-                  </Badge>
-                  {bot.connected && (
-                    <Box
-                      style={{
-                        position: 'absolute',
-                        top: '-4px',
-                        right: '-4px',
-                        width: '8px',
-                        height: '8px',
-                        borderRadius: '50%',
-                        backgroundColor: 'var(--green-9)',
-                        animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite'
-                      }}
-                    />
-                  )}
-                </Box>
-              </Flex>
-
-              {/* 适配器信息 */}
-              <Flex align="center" gap="2">
-                <Text size="2" color="gray">适配器:</Text>
-                <Badge variant="outline">{bot.adapter}</Badge>
-              </Flex>
-
-              <Separator size="4" />
-
-              {/* 详细信息 */}
-              <Flex direction="column" gap="2">
-                <Flex justify="between" align="center" p="2" style={{ borderRadius: '6px', backgroundColor: 'var(--gray-2)' }}>
-                  <Flex align="center" gap="2">
-                    <Activity 
-                      size={16}
-                      color={bot.status === 'online' ? 'var(--green-9)' : 'var(--gray-9)'}
-                    />
-                    <Text size="2" color="gray">运行状态</Text>
-                  </Flex>
-                  <Badge color={bot.status === 'online' ? 'green' : 'gray'}>
-                    {bot.status === 'online' ? '运行中' : '已停止'}
-                  </Badge>
-                </Flex>
-
-                <Flex justify="between" align="center" p="2" style={{ borderRadius: '6px', backgroundColor: 'var(--gray-2)' }}>
-                  <Flex align="center" gap="2">
-                    <Package size={16} color="var(--blue-9)" />
-                    <Text size="2" color="gray">适配器类型</Text>
-                  </Flex>
-                  <Text size="2" weight="medium">{bot.adapter}</Text>
-                </Flex>
-
-                <Flex justify="between" align="center" p="2" style={{ borderRadius: '6px', backgroundColor: 'var(--gray-2)' }}>
-                  <Flex align="center" gap="2">
-                    <Zap size={16} color="var(--purple-9)" />
-                    <Text size="2" color="gray">连接状态</Text>
-                  </Flex>
-                  <Text size="2" weight="medium" color={bot.connected ? 'green' : 'gray'}>
-                    {bot.connected ? '已连接' : '未连接'}
-                  </Text>
-                </Flex>
-              </Flex>
-            </Flex>
-          </Card>
-        ))}
-      </Grid>
-
-      {/* 空状态 */}
-      {bots.length === 0 && (
-        <Card>
-          <Flex direction="column" align="center" gap="4" py="9">
-            <Bot size={64} color="var(--gray-6)" />
-            <Flex direction="column" align="center" gap="2">
-              <Heading size="4">暂无机器人</Heading>
-              <Text color="gray">请先配置并启动机器人</Text>
-            </Flex>
-          </Flex>
-        </Card>
-      )}
-    </Box>
-  )
-}