@zhin.js/client 1.0.4 → 1.0.5

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

@@ -1,105 +0,0 @@
-/**
- * 组合类型字段渲染器
- * 处理: union, intersect
- */
-
-import { Flex, Box, Text, TextField, Select, Card, Badge } from '@radix-ui/themes'
-import { Icons } from '@zhin.js/client'
-import type { FieldRendererProps, SchemaField } from './types.js'
-
-interface CompositeFieldProps extends FieldRendererProps {
-  renderNestedField: (
-    fieldName: string,
-    field: SchemaField,
-    value: any,
-    onChange: (val: any) => void
-  ) => React.ReactElement
-}
-
-export function UnionFieldRenderer({ field, value, onChange }: FieldRendererProps) {
-  const unionFields = field.list || []
-  
-  if (unionFields.length === 0) {
-    return (
-      <TextField.Root
-        size="2"
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={field.description || '请输入值'}
-        className="hover:border-blue-500 dark:hover:border-blue-400 transition-colors focus-within:ring-2 focus-within:ring-blue-500/20"
-      />
-    )
-  }
-  
-  // 如果所有选项都是简单类型，使用下拉选择 - 优化样式
-  const options = unionFields.map((uf: any) => uf.default || uf.type)
-  
-  return (
-    <div className="p-3 rounded-lg bg-gradient-to-br from-pink-50 to-rose-50 dark:from-pink-900/20 dark:to-rose-900/20 border border-pink-200 dark:border-pink-800">
-      <Flex direction="column" gap="2">
-        <Flex align="center" gap="2">
-          <Icons.GitBranch className="w-4 h-4 text-pink-600 dark:text-pink-400" />
-        </Flex>
-        <Select.Root
-          size="2"
-          value={value?.toString() || ''}
-          onValueChange={onChange}
-        >
-          <Select.Trigger className="w-full hover:border-pink-500 dark:hover:border-pink-400 transition-colors" />
-          <Select.Content className="shadow-lg">
-            {options.map((option: any, index: number) => (
-              <Select.Item 
-                key={index} 
-                value={String(option)}
-                className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors"
-              >
-                <Flex align="center" gap="2">
-                  <Text>{String(option)}</Text>
-                </Flex>
-              </Select.Item>
-            ))}
-          </Select.Content>
-        </Select.Root>
-      </Flex>
-    </div>
-  )
-}
-
-export function IntersectFieldRenderer({
-  fieldName,
-  field,
-  value,
-  onChange,
-  renderNestedField
-}: CompositeFieldProps) {
-  const intersectFields = field.list || []
-  
-  return (
-    <div className="rounded-lg border-2 border-teal-200 dark:border-teal-800 bg-gradient-to-br from-teal-50/50 to-emerald-50/50 dark:from-teal-900/10 dark:to-emerald-900/10 overflow-hidden">
-      <div className="px-4 py-2 bg-teal-100 dark:bg-teal-900/30 border-b border-teal-200 dark:border-teal-800">
-        <Flex align="center" gap="2">
-          <Icons.Layers className="w-4 h-4 text-teal-600 dark:text-teal-400" />
-        </Flex>
-      </div>
-      <div className="p-4 space-y-3">
-        {intersectFields.map((iField: any, index: number) => (
-          <div 
-            key={index}
-            className="p-3 rounded-md bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800"
-          >
-            <Flex direction="column" gap="2">
-              {iField.description && (
-                <Text size="1" color="gray">
-                  {iField.description}
-                </Text>
-              )}
-              <div className="mt-1">
-                {renderNestedField(`${fieldName}[${index}]`, iField, value, onChange)}
-              </div>
-            </Flex>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

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

@@ -1,110 +0,0 @@
-/**
- * 字段渲染器主入口
- * 根据字段类型分发到对应的渲染器
- */
-
-import { TextArea } from '@radix-ui/themes'
-import type { FieldRendererProps, SchemaField } from './types.js'
-import {
-  StringFieldRenderer,
-  NumberFieldRenderer,
-  BooleanFieldRenderer,
-  PercentFieldRenderer,
-  DateFieldRenderer,
-  RegexpFieldRenderer,
-  ConstFieldRenderer,
-  AnyFieldRenderer
-} from './BasicFieldRenderers.js'
-import {
-  ListFieldRenderer,
-  ArrayFieldRenderer,
-  TupleFieldRenderer,
-  ObjectFieldRenderer,
-  DictFieldRenderer
-} from './CollectionFieldRenderers.js'
-import {
-  UnionFieldRenderer,
-  IntersectFieldRenderer
-} from './CompositeFieldRenderers.js'
-
-interface FieldRendererConfig extends FieldRendererProps {
-  renderField: (fieldName: string, field: SchemaField, parentPath?: string) => React.ReactElement
-  renderNestedField: (fieldName: string, field: SchemaField, value: any, onChange: (val: any) => void) => React.ReactElement
-}
-
-export function FieldRenderer(props: FieldRendererConfig) {
-  const { field } = props
-
-  switch (field.type) {
-    case 'string':
-      return <StringFieldRenderer {...props} />
-    
-    case 'number':
-    case 'integer':
-      return <NumberFieldRenderer {...props} />
-    
-    case 'boolean':
-      return <BooleanFieldRenderer {...props} />
-    
-    case 'percent':
-      return <PercentFieldRenderer {...props} />
-    
-    case 'date':
-      return <DateFieldRenderer {...props} />
-    
-    case 'regexp':
-      return <RegexpFieldRenderer {...props} />
-    
-    case 'const':
-      return <ConstFieldRenderer {...props} />
-    case 'any':
-      return <AnyFieldRenderer {...props} />
-    
-    case 'list':
-      return <ListFieldRenderer {...props} />
-    
-    case 'array':
-      return <ArrayFieldRenderer {...props} />
-    
-    case 'tuple':
-      return <TupleFieldRenderer {...props} />
-    
-    case 'object':
-      return <ObjectFieldRenderer {...props} />
-    
-    case 'dict':
-      return <DictFieldRenderer {...props} />
-    
-    case 'union':
-      return <UnionFieldRenderer {...props} />
-    
-    case 'intersect':
-      return <IntersectFieldRenderer {...props} />
-    
-    default:
-      // 默认 JSON 编辑器
-      return (
-        <TextArea
-          size="1"
-          value={typeof props.value === 'object' ? JSON.stringify(props.value, null, 2) : props.value || ''}
-          onChange={(e) => {
-            try {
-              const parsed = JSON.parse(e.target.value)
-              props.onChange(parsed)
-            } catch {
-              props.onChange(e.target.value)
-            }
-          }}
-          placeholder={field.description || `请输入 JSON 格式`}
-          rows={4}
-          className="font-mono text-xs"
-        />
-      )
-  }
-}
-
-// 辅助函数：判断字段是否为复杂类型（需要折叠）
-export function isComplexField(field: SchemaField): boolean {
-  return ['object', 'list', 'tuple', 'union', 'intersect', 'any'].includes(field.type) 
-    || (field.type === 'dict' && !!field.dict)
-}

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

@@ -1,95 +0,0 @@
-/**
- * 嵌套字段渲染器
- * 用于渲染数组项、元组项等嵌套字段
- */
-
-import { Flex, Box, Text, TextField, TextArea, Switch, Card } from '@radix-ui/themes'
-import type { SchemaField } from './types.js'
-
-interface NestedFieldRendererProps {
-  fieldName: string
-  field: SchemaField
-  value: any
-  onChange: (val: any) => void
-}
-
-export function NestedFieldRenderer({ field, value, onChange }: NestedFieldRendererProps): React.ReactElement {
-  switch (field.type) {
-    case 'string':
-      return (
-        <TextField.Root
-          size="1"
-          value={value || ''}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={field.description || '请输入'}
-        />
-      )
-    
-    case 'number':
-    case 'integer':
-      return (
-        <TextField.Root
-          size="1"
-          type="number"
-          value={value?.toString() || ''}
-          onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
-          placeholder={field.description || '请输入数字'}
-          min={field.min}
-          max={field.max}
-        />
-      )
-    
-    case 'boolean':
-      return (
-        <Flex align="center" gap="2">
-          <Switch
-            checked={value === true}
-            onCheckedChange={onChange}
-          />
-          <Text size="2" color={value ? 'green' : 'gray'}>
-            {value ? '已启用' : '已禁用'}
-          </Text>
-        </Flex>
-      )
-    
-    case 'object': {
-      const objectFields = field.dict || field.properties || {}
-      return (
-        <Card size="1">
-          <Flex direction="column" gap="2" p="2">
-            {Object.entries(objectFields).map(([key, nestedField]: [string, any]) => (
-              <Box key={key}>
-                <Text size="1" weight="bold">{key}</Text>
-                <NestedFieldRenderer
-                  fieldName={key}
-                  field={nestedField}
-                  value={value?.[key]}
-                  onChange={(val) => {
-                    onChange({ ...value, [key]: val })
-                  }}
-                />
-              </Box>
-            ))}
-          </Flex>
-        </Card>
-      )
-    }
-    
-    default:
-      return (
-        <TextArea
-          size="1"
-          value={typeof value === 'object' ? JSON.stringify(value, null, 2) : value || ''}
-          onChange={(e) => {
-            try {
-              onChange(JSON.parse(e.target.value))
-            } catch {
-              onChange(e.target.value)
-            }
-          }}
-          rows={3}
-          className="font-mono text-xs"
-        />
-      )
-  }
-}

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