@zhin.js/console 1.0.21 → 1.0.23

package/client/src/layouts/dashboard.tsx

@@ -1,22 +1,20 @@
-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 {Menu, Search,Bell,User,Users,BarChart3,HelpCircle,LogOut} from 'lucide-react'
+import { Outlet, Link, useSelector, useDispatch, toggleSidebar, setActiveMenu } from "@zhin.js/client"
+import { useMemo } from "react"
+import { Menu, Search } from 'lucide-react'
 import { cn } from "@zhin.js/client"
 import { ThemeToggle } from "../components/ThemeToggle"
-
-const { Box, Flex, Text, Heading, IconButton, Badge, TextField, ScrollArea, Container } = Themes
+import { Button } from "../components/ui/button"
+import { Input } from "../components/ui/input"
+import { ScrollArea } from "../components/ui/scroll-area"
+import { Avatar, AvatarImage, AvatarFallback } from "../components/ui/avatar"
 
 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 []
@@ -33,226 +31,98 @@ export default function DashboardLayout() {
     }, [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>
+        <div className="flex h-screen bg-background">
+            {/* Sidebar */}
+            <div className={cn(
+                "flex flex-col border-r bg-sidebar transition-all duration-300",
+                sidebarOpen ? "w-64" : "w-16"
+            )}>
+                {/* Logo */}
+                <div className="p-4 border-b">
+                    <div className={cn(
+                        "flex items-center transition-all duration-300",
+                        sidebarOpen ? "gap-3" : "justify-center"
+                    )}>
+                        <div className="flex items-center justify-center w-9 h-9 min-w-9 rounded-lg bg-foreground text-background font-bold text-lg">
+                            Z
+                        </div>
                         {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>
+                            <div className="flex flex-col">
+                                <span className="text-base font-semibold">Zhin.js</span>
+                                <span className="text-xs text-muted-foreground">管理控制台</span>
+                            </div>
                         )}
-                    </Flex>
-                </Box>
+                    </div>
+                </div>
 
-                {/* 菜单列表 */}
-                <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")}
-                                    >
-                                        <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>
+                {/* Menu */}
+                <ScrollArea className="flex-1">
+                    <div className="p-2 space-y-1">
+                        {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",
+                                        !sidebarOpen && "justify-center px-2"
+                                    )}
+                                >
+                                    <span className="shrink-0">{item.icon}</span>
+                                    {sidebarOpen && <span className="truncate">{item.title}</span>}
+                                </Link>
+                            )
+                        })}
+                    </div>
                 </ScrollArea>
+            </div>
 
-                {/* 侧边栏底部用户信息 */}
-                <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"
-                            >
-                                <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">
-                                <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 />
+            {/* Main content area */}
+            <div className="flex flex-col flex-1 overflow-hidden">
+                {/* Top bar */}
+                <header className="flex items-center justify-between h-14 px-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+                    {/* Left */}
+                    <div className="flex items-center gap-3">
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => dispatch(toggleSidebar())}
+                        >
+                            <Menu className="h-5 w-5" />
+                        </Button>
+                        <div className="flex flex-col">
+                            <h2 className="text-sm font-semibold">控制台</h2>
+                            <span className="text-xs text-muted-foreground">欢迎回来</span>
+                        </div>
+                    </div>
 
-                            {/* 通知按钮 */}
-                            <Box className="relative">
-                                <IconButton
-                                    variant="ghost"
-                                    size="2"
-                                    className="hover-lift rounded-xl"
-                                >
-                                    <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>
+                    {/* Center search */}
+                    <div className="hidden md:flex flex-1 max-w-md mx-6">
+                        <div className="relative w-full">
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                            <Input
+                                placeholder="搜索功能、插件、设置..."
+                                className="pl-9 bg-muted/50"
+                            />
+                        </div>
+                    </div>
 
-                            {/* 用户菜单 */}
-                            <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>
-                                        <User className="mr-2 h-4 w-4" />
-                                        我的设置
-                                    </DropdownMenu.Item>
-                                    <DropdownMenu.Item>
-                                        <Users className="mr-2 h-4 w-4" />
-                                        团队设置
-                                    </DropdownMenu.Item>
-                                    <DropdownMenu.Item>
-                                        <BarChart3 className="mr-2 h-4 w-4" />
-                                        数据分析
-                                    </DropdownMenu.Item>
-                                    <DropdownMenu.Item>
-                                        <HelpCircle className="mr-2 h-4 w-4" />
-                                        帮助与反馈
-                                    </DropdownMenu.Item>
-                                    <DropdownMenu.Separator />
-                                    <DropdownMenu.Item color="red">
-                                        <LogOut className="mr-2 h-4 w-4" />
-                                        退出登录
-                                    </DropdownMenu.Item>
-                                </DropdownMenu.Content>
-                            </DropdownMenu.Root>
-                        </Flex>
-                    </Flex>
-                </Box>
+                    {/* Right actions */}
+                    <div className="flex items-center gap-1">
+                        <ThemeToggle />
+                    </div>
+                </header>
 
-                {/* 主内容区域 */}
-                <Flex className="flex-1 overflow-auto">
-                    <Container size="4" p="6">
+                {/* Page content */}
+                <main className="flex-1 overflow-auto">
+                    <div className="max-w-7xl mx-auto p-6">
                         <Outlet />
-                    </Container>
-                </Flex>
-            </Flex>
-        </Flex>
+                    </div>
+                </main>
+            </div>
+        </div>
     )
 }

package/client/src/main.tsx

@@ -1,37 +1,38 @@
 import { StrictMode, useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider as ReduxProvider } from 'react-redux'
-import {Home, Package, Bot, FileText} from 'lucide-react'
-import { store, DynamicRouter, persistor, addPage, useSelector } from '@zhin.js/client'
+import { Home, Package, Bot, FileText } from 'lucide-react'
+import { store, DynamicRouter, persistor, addPage, useSelector, useWebSocket } 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'
+import { TooltipProvider } from './components/ui/tooltip'
 
 // Initialize theme on app load
 initializeTheme()
 
-// 路由初始化组件
+// Route initializer component
 function RouteInitializer() {
+    useWebSocket()
+
     const entries = useSelector(state => state.script.entries)
     const loadedScripts = useSelector(state => state.script.loadedScripts)
+    const synced = useSelector(state => state.script.synced)
     const [initialized, setInitialized] = useState(false)
 
     useEffect(() => {
-        // 路由配置 - 使用 Component 属性而不是 element
         const routes = [
             {
                 key: 'dashboard-layout',
                 path: '/',
                 title: 'Dashboard',
-                element: <DashboardLayout/>,
+                element: <DashboardLayout />,
                 redirect: '/dashboard',
                 meta: { order: 0 },
                 children: [
@@ -40,63 +41,58 @@ function RouteInitializer() {
                         index: true,
                         path: '',
                         title: '系统概览',
-                        // Icon 仍然作为数据存储，不是在渲染上下文中使用
-                        icon: <Home className="w-5 h-5" />,
-                        element: <DashboardHome/>,
+                        icon: <Home className="w-4 h-4" />,
+                        element: <DashboardHome />,
+                    },
+                    {
+                        key: 'dashboard-plugins',
+                        path: '/plugins',
+                        title: '插件管理',
+                        icon: <Package className="w-4 h-4" />,
+                        element: <DashboardPlugins />,
+                        meta: { order: 2 }
+                    },
+                    {
+                        key: 'dashboard-plugin-detail',
+                        title: '插件详情',
+                        path: '/plugins/:name',
+                        element: <DashboardPluginDetail />,
+                        meta: { hideInMenu: true }
                     },
-
-                     {
-                         key: 'dashboard-plugins',
-                         path: '/plugins',
-                         title: '插件管理',
-                         icon: <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: <Bot className="w-5 h-5" />,
-                        element: <DashboardBots/>,
+                        icon: <Bot className="w-4 h-4" />,
+                        element: <DashboardBots />,
                         meta: { order: 3 }
                     },
                     {
                         key: 'dashboard-logs',
                         path: '/logs',
                         title: '系统日志',
-                        icon: <FileText className="w-5 h-5" />,
-                        element: <DashboardLogs/>,
+                        icon: <FileText className="w-4 h-4" />,
+                        element: <DashboardLogs />,
                         meta: { order: 4 }
                     }
                 ]
             }
         ]
-        
-        // 添加静态路由
+
         routes.forEach(route => {
             addPage(route)
         })
         setInitialized(true)
     }, [])
 
-    // 检查是否所有脚本都已加载
-    const allScriptsLoaded = entries.length === 0 || entries.length === loadedScripts.length
+    const allScriptsLoaded = synced && (entries.length === 0 || entries.length === loadedScripts.length)
 
-    // 等待静态路由和动态脚本都加载完成
     if (!initialized || !allScriptsLoaded) {
         return (
-            <div className="flex items-center justify-center h-screen">
+            <div className="flex items-center justify-center h-screen bg-background">
                 <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">
+                    <div className="inline-block animate-spin rounded-full h-8 w-8 border-2 border-muted-foreground border-t-foreground"></div>
+                    <p className="mt-3 text-sm text-muted-foreground">
                         加载中... ({loadedScripts.length}/{entries.length})
                     </p>
                 </div>
@@ -108,15 +104,15 @@ function RouteInitializer() {
 }
 
 createRoot(
-    document.getElementById('root'),
+    document.getElementById('root')!,
 ).render(
     <StrictMode>
-        <Theme accentColor="blue" grayColor="slate" radius="large" scaling="100%">
+        <TooltipProvider>
             <PersistGate loading={null} persistor={persistor}>
                 <ReduxProvider store={store}>
                     <RouteInitializer />
                 </ReduxProvider>
             </PersistGate>
-        </Theme>
+        </TooltipProvider>
     </StrictMode>,
-)
+)