@zhin.js/client 1.0.3 → 1.0.4

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

@@ -0,0 +1,105 @@
+/**
+ * 组合类型字段渲染器
+ * 处理: 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

@@ -0,0 +1,110 @@
+/**
+ * 字段渲染器主入口
+ * 根据字段类型分发到对应的渲染器
+ */
+
+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

@@ -0,0 +1,95 @@
+/**
+ * 嵌套字段渲染器
+ * 用于渲染数组项、元组项等嵌套字段
+ */
+
+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

@@ -0,0 +1,237 @@
+/**
+ * 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

@@ -0,0 +1,46 @@
+/**
+ * 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/pages/dashboard-plugin-detail.tsx

@@ -2,8 +2,9 @@ import { useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router'
 import * as Themes from '@radix-ui/themes'
 import { Icons } from '@zhin.js/client'
+import {PluginConfigForm} from '../components/PluginConfigForm'
 
-const { Flex, Box, Spinner, Text, Callout, Heading, Badge, Grid, Card, Button, Code, Separator, ScrollArea } = Themes
+const { Flex, Box, Spinner, Text, Callout, Heading, Badge, Grid, Card, Button, Code, Separator, ScrollArea, Dialog } = Themes
 
 interface PluginDetail {
   name: string
@@ -31,7 +32,7 @@ interface PluginDetail {
     pattern: string
     running: boolean
   }>
-  schemas: Array<{
+  definitions: Array<{
     name: string
     fields: string[]
   }>
@@ -41,7 +42,7 @@ interface PluginDetail {
     middlewareCount: number
     contextCount: number
     cronCount: number
-    schemaCount: number
+    definitionCount: number
   }
 }
 
@@ -77,6 +78,8 @@ export default function DashboardPluginDetail() {
     }
   }
 
+
+
   if (loading) {
     return (
       <Flex align="center" justify="center" className="h-full">
@@ -111,7 +114,7 @@ export default function DashboardPluginDetail() {
     <Box>
       {/* 头部 */}
       <Flex direction="column" gap="3" mb="4">
-        <Button variant="ghost" onClick={() => navigate('/plugins')} size="2" className="self-start">
+        <Button variant="ghost" onClick={() => navigate('/plugins')} size="2">
           <Icons.ArrowLeft className="w-4 h-4" />
           返回
         </Button>
@@ -132,7 +135,15 @@ export default function DashboardPluginDetail() {
         </Flex>
       </Flex>
 
-      <Separator size="4" mb="4" />
+      {/* 插件配置折叠面板 */}
+      <PluginConfigForm
+        pluginName={plugin.name}
+        onSuccess={() => {
+          // 配置更新会通过 WebSocket 自动同步
+        }}
+      />
+
+      <Separator size="4" my="4" />
 
       {/* 统计概览 - 紧凑卡片 */}
       <Grid columns={{ initial: '2', sm: '3', md: '6' }} gap="2" mb="4">
@@ -179,7 +190,7 @@ export default function DashboardPluginDetail() {
         <Card size="1">
           <Flex direction="column" align="center" gap="1" p="2">
             <Icons.FileText className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
-            <Text size="4" weight="bold">{plugin.statistics.schemaCount}</Text>
+            <Text size="4" weight="bold">{plugin.statistics.definitionCount}</Text>
             <Text size="1" color="gray">数据模型</Text>
           </Flex>
         </Card>
@@ -319,22 +330,22 @@ export default function DashboardPluginDetail() {
         )}
 
         {/* 数据模型列表 */}
-        {plugin.schemas.length > 0 && (
+        {plugin.definitions.length > 0 && (
           <Card size="2">
             <Flex direction="column" gap="2" p="3">
               <Flex align="center" gap="2">
                 <Icons.FileText className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
                 <Heading size="3">数据模型</Heading>
-                <Badge size="1">{plugin.schemas.length}</Badge>
+                <Badge size="1">{plugin.definitions.length}</Badge>
               </Flex>
               <Separator size="4" />
               <Flex direction="column" gap="2" className="max-h-60 overflow-y-auto">
-                {plugin.schemas.map((schema, index) => (
+                {plugin.definitions.map((definition, index) => (
                   <Box key={index} className="rounded-lg bg-gray-50 dark:bg-gray-900 p-2">
                     <Flex direction="column" gap="1">
-                      <Code size="2">{schema.name}</Code>
+                      <Code size="2">{definition.name}</Code>
                       <Text size="1" color="gray">
-                        字段: {schema.fields.join(', ')}
+                        字段: {definition.fields.join(', ')}
                       </Text>
                     </Flex>
                   </Box>