@zhin.js/client 1.0.4 → 1.0.6

package/app/src/components/PluginConfigForm/index.tsx

@@ -1,237 +0,0 @@
-/**
- * PluginConfigForm 主组件
- * 插件配置表单 - 基于 Schema 自动生成
- * 改为折叠面板形式，使用 WebSocket 传递配置
- */
-
-import { useState, useEffect } from 'react'
-import { 
-  Flex, 
-  Box, 
-  Text, 
-  Button, 
-  Spinner,
-  Callout,
-  Separator,
-  Badge,
-  ScrollArea,
-  Card
-} from '@radix-ui/themes'
-import { Accordion } from 'radix-ui'
-import { Icons, useConfig } from '@zhin.js/client'
-import type { PluginConfigFormProps, SchemaField, Schema } from './types.js'
-import { FieldRenderer, isComplexField } from './FieldRenderer.js'
-import { NestedFieldRenderer } from './NestedFieldRenderer.js'
-
-export function PluginConfigForm({ pluginName, onSuccess }: Omit<PluginConfigFormProps, 'schema' | 'initialConfig'>) {
-  const [localConfig, setLocalConfig] = useState<Record<string, any>>({})
-  const [successMessage, setSuccessMessage] = useState<string | null>(null)
-  const [isExpanded, setIsExpanded] = useState<string | undefined>(undefined)
-
-  // 使用 WebSocket 配置管理
-  const { config, schema, loading, error, connected, setConfig } = useConfig(pluginName)
-  // 当远程配置改变时更新本地配置
-  useEffect(() => {
-    if (config) {
-      setLocalConfig(config)
-    }
-  }, [config])
-
-  const handleSave = async () => {
-    if (!connected) {
-      setSuccessMessage(null)
-      return
-    }
-
-    try {
-      await setConfig(localConfig)
-      setSuccessMessage('配置已保存成功')
-      setTimeout(() => {
-        setIsExpanded(undefined) // 收起面板
-        onSuccess?.()
-        setSuccessMessage(null)
-      }, 1500)
-    } catch (err) {
-      console.error('保存配置失败:', err)
-    }
-  }
-
-  const handleFieldChange = (fieldName: string, value: any) => {
-    setLocalConfig(prev => ({ ...prev, [fieldName]: value }))
-  }
-
-  const handleNestedFieldChange = (parentPath: string, childKey: string, value: any) => {
-    setLocalConfig(prev => ({
-      ...prev,
-      [parentPath]: {
-        ...(prev[parentPath] || {}),
-        [childKey]: value
-      }
-    }))
-  }
-
-  const handleArrayItemChange = (fieldName: string, index: number, value: any) => {
-    setLocalConfig(prev => {
-      const arr = Array.isArray(prev[fieldName]) ? [...prev[fieldName]] : []
-      arr[index] = value
-      return { ...prev, [fieldName]: arr }
-    })
-  }
-
-  const renderField = (fieldName: string, field: SchemaField, parentPath?: string): React.ReactElement => {
-    const fullPath = parentPath ? `${parentPath}.${fieldName}` : fieldName
-    const value = parentPath 
-      ? localConfig[parentPath]?.[fieldName] ?? field.default
-      : localConfig[fieldName] ?? field.default
-
-    const onChange = parentPath
-      ? (val: any) => handleNestedFieldChange(parentPath, fieldName, val)
-      : (val: any) => handleFieldChange(fieldName, val)
-
-    return (
-      <FieldRenderer
-        fieldName={fieldName}
-        field={field}
-        value={value}
-        onChange={onChange}
-        parentPath={parentPath}
-        onNestedChange={handleNestedFieldChange}
-        onArrayItemChange={handleArrayItemChange}
-        renderField={renderField}
-        renderNestedField={(fn, f, v, oc) => (
-          <NestedFieldRenderer fieldName={fn} field={f} value={v} onChange={oc} />
-        )}
-      />
-    )
-  }
-
-  const fields = schema?.properties || schema?.dict || {}
-  
-  if (!schema || !fields || Object.keys(fields).length === 0) {
-    return null // 没有配置则不显示
-  }
-
-  return (
-    <Card size="2" className="mt-4">
-      <Accordion.Root 
-        type="single" 
-        collapsible 
-        value={isExpanded}
-        onValueChange={setIsExpanded}
-      >
-        <Accordion.Item value="config" className="border-none">
-          <Accordion.Header>
-            <Accordion.Trigger className="w-full group">
-              <Flex 
-                justify="between" 
-                align="center" 
-                className="w-full p-3 hover:bg-gray-50 dark:hover:bg-gray-900/50 rounded-lg transition-colors"
-              >
-                <Flex align="center" gap="2">
-                  <Icons.Settings className="w-5 h-5 text-blue-600 dark:text-blue-400" />
-                  <Text size="3" weight="bold">插件配置</Text>
-                  <Badge size="1" color="gray" variant="soft">
-                    {Object.keys(fields).length} 项
-                  </Badge>
-                </Flex>
-                <Icons.ChevronDown 
-                  className="w-5 h-5 text-gray-500 transition-transform duration-200 group-data-[state=open]:rotate-180" 
-                />
-              </Flex>
-            </Accordion.Trigger>
-          </Accordion.Header>
-          
-          <Accordion.Content className="overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up">
-            <Box className="pt-2 pb-4">
-              {/* 成功提示 */}
-              {successMessage && (
-                <div className="mb-3 animate-in fade-in slide-in-from-top-2 duration-300">
-                  <Callout.Root color="green" size="1" className="shadow-sm">
-                    <Callout.Icon><Icons.CheckCircle /></Callout.Icon>
-                    <Callout.Text className="font-medium">{successMessage}</Callout.Text>
-                  </Callout.Root>
-                </div>
-              )}
-
-              {/* 错误提示 */}
-              {error && (
-                <div className="mb-3 animate-in fade-in slide-in-from-top-2 duration-300">
-                  <Callout.Root color="red" size="1" className="shadow-sm">
-                    <Callout.Icon><Icons.AlertCircle /></Callout.Icon>
-                    <Callout.Text className="font-medium">{error}</Callout.Text>
-                  </Callout.Root>
-                </div>
-              )}
-
-              {/* 配置表单 */}
-              <Flex direction="column" gap="3">
-                {Object.entries(fields).map(([fieldName, field]) => {
-                  const schemaField = field as SchemaField
-                  return (
-                    <div 
-                      key={fieldName} 
-                      className="group p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors border border-gray-200 dark:border-gray-800"
-                    >
-                      <Flex direction="column" gap="2">
-                        <Flex align="center" gap="1">
-                          <Text size="2" weight="bold" className="text-gray-900 dark:text-gray-100">
-                            {schemaField.key || fieldName}
-                          </Text>
-                          {schemaField.required && (
-                            <Text size="2" weight="bold" color="red" className="leading-none">
-                              *
-                            </Text>
-                          )}
-                        </Flex>
-                        {schemaField.description && (
-                          <Text size="1" color="gray" className="leading-relaxed">
-                            {schemaField.description}
-                          </Text>
-                        )}
-                        <div className="mt-1">
-                          {renderField(schemaField.key || fieldName, schemaField)}
-                        </div>
-                      </Flex>
-                    </div>
-                  )
-                })}
-              </Flex>
-
-              {/* 操作按钮 */}
-              <Flex gap="2" justify="end" className="mt-4 pt-3 border-t border-gray-200 dark:border-gray-800">
-                <Button 
-                  size="2" 
-                  variant="soft" 
-                  onClick={() => setIsExpanded(undefined)} 
-                  disabled={loading}
-                  className="hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
-                >
-                  <Icons.X className="w-4 h-4" />
-                  取消
-                </Button>
-                <Button 
-                  size="2" 
-                  onClick={handleSave} 
-                  disabled={loading}
-                  className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white transition-colors shadow-sm"
-                >
-                  {loading ? (
-                    <>
-                      <Spinner />
-                      <span>保存中...</span>
-                    </>
-                  ) : (
-                    <>
-                      <Icons.Save className="w-4 h-4" />
-                      <span>保存配置</span>
-                    </>
-                  )}
-                </Button>
-              </Flex>
-            </Box>
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
-    </Card>
-  )
-}

package/app/src/components/PluginConfigForm/types.ts

@@ -1,46 +0,0 @@
-/**
- * PluginConfigForm 类型定义
- */
-
-export interface SchemaField {
-  key?: string
-  type: string
-  description?: string
-  default?: any
-  required?: boolean
-  enum?: any[]
-  min?: number
-  max?: number
-  step?: number  // 用于 percent 类型
-  pattern?: string
-  inner?: SchemaField  // 用于 list/dict 类型
-  items?: SchemaField  // 兼容旧格式
-  list?: SchemaField[]  // 用于 tuple/union/intersect 类型
-  properties?: Record<string, SchemaField>
-  dict?: Record<string, SchemaField>  // object 类型的字段
-  component?: string  // UI 组件提示
-}
-
-export interface Schema {
-  type: string
-  properties?: Record<string, SchemaField>
-  dict?: Record<string, SchemaField>
-  description?: string
-}
-
-export interface PluginConfigFormProps {
-  pluginName: string
-  schema: Schema | null
-  initialConfig?: Record<string, any>
-  onSuccess?: () => void
-}
-
-export interface FieldRendererProps {
-  fieldName: string
-  field: SchemaField
-  value: any
-  onChange: (value: any) => void
-  parentPath?: string
-  onNestedChange?: (parentPath: string, childKey: string, value: any) => void
-  onArrayItemChange?: (fieldName: string, index: number, value: any) => void
-}

package/app/src/components/ThemeToggle.tsx

@@ -1,21 +0,0 @@
-import { useTheme } from '../hooks/useTheme'
-import { Icons } from '@zhin.js/client'
-
-export function ThemeToggle() {
-  const { theme, toggleTheme } = useTheme()
-
-  return (
-    <button
-      onClick={toggleTheme}
-      className="p-2 hover:bg-accent rounded-lg transition-colors text-foreground"
-      title={theme === 'light' ? '切换到暗色模式' : '切换到亮色模式'}
-    >
-      {theme === 'light' ? (
-        <Icons.Moon className="w-5 h-5" />
-      ) : (
-        <Icons.Sun className="w-5 h-5" />
-      )}
-    </button>
-  )
-}
-

package/app/src/hooks/useTheme.ts

@@ -1,17 +0,0 @@
-import { useState, useEffect } from 'react'
-import { type Theme, applyTheme, getInitialTheme } from '../theme'
-
-export function useTheme() {
-  const [theme, setTheme] = useState<Theme>(getInitialTheme)
-
-  useEffect(() => {
-    applyTheme(theme)
-  }, [theme])
-
-  const toggleTheme = () => {
-    setTheme(prev => prev === 'light' ? 'dark' : 'light')
-  }
-
-  return { theme, setTheme, toggleTheme }
-}
-

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>
-    )
-}