@zhin.js/client 1.0.2 → 1.0.4

package/README.md

@@ -1,16 +1,23 @@
-# Zhin Client - 动态页面路由系统
+# Zhin Client - 动态页面路由与插件配置系统
 
-基于 React Router 7.0 的动态页面管理系统，支持在 `main.tsx` 中直接进行页面路由操作。
+基于 React Router 7.0 的动态页面管理系统，集成插件配置功能，支持基于 Schema 的自动表单生成。
 
 ## 特性
 
+### 路由系统
 - 🌳 **树形路由结构** - 使用树形结构管理页面路由，支持任意深度的嵌套
 - ✅ **动态页面管理** - 运行时添加、删除、更新页面
 - ✅ **React Router 7.0** - 使用最新的 React Router
 - ✅ **TypeScript 支持** - 完整的类型定义
 - ✅ **WebSocket 集成** - 支持动态加载插件入口脚本
 - ✅ **Redux 状态管理** - 集成 Redux 持久化
-- ✅ **简单易用** - 在 `main.tsx` 中直接操作页面路由
+
+### 配置系统
+- 🔧 **Schema 驱动** - 支持 15 种 Schema 数据类型
+- 📝 **自动表单生成** - 根据 Schema 自动生成配置表单
+- 🎨 **智能 UI 组件** - 针对不同类型自动选择最佳 UI 控件
+- 🔄 **实时配置更新** - 支持配置文件的实时读取和保存
+- 🧩 **模块化设计** - 17 个独立的字段渲染器，易于扩展
 
 ## 安装
 
@@ -361,6 +368,113 @@ routerManager.onRouteAdd((route) => {
 3. **性能考虑** - 大量路由时考虑使用懒加载
 4. **类型安全** - 使用 TypeScript 确保类型安全
 
+## 插件配置系统
+
+### Schema 支持的数据类型
+
+Zhin Client 配置系统完整支持所有 15 种 Schema 数据类型：
+
+#### 基础类型
+- `string` - 字符串（支持枚举/多行/单行）
+- `number` / `integer` - 数字（支持 min/max 限制）
+- `boolean` - 布尔值（开关控件）
+
+#### 特殊类型
+- `percent` - 百分比（滑块 + 数字输入）
+- `date` - 日期（日期选择器）
+- `regexp` - 正则表达式（带验证）
+- `const` - 常量（只读显示）
+
+#### 集合类型
+- `list` - 列表（支持嵌套）
+- `tuple` - 元组（固定字段）
+- `object` - 对象（嵌套结构）
+- `dict` - 字典（JSON 编辑器）
+
+#### 组合类型
+- `union` - 联合类型（多选一）
+- `intersect` - 交叉类型（满足所有）
+
+#### 通用类型
+- `any` - 任意类型（JSON 编辑器）
+- `never` - 永不类型（警告提示）
+
+### 使用插件配置组件
+
+```tsx
+import PluginConfigForm from '@zhin.js/client/components/PluginConfigForm'
+
+<PluginConfigForm
+  pluginName="my-plugin"
+  onClose={() => setDialogOpen(false)}
+  onSuccess={() => refetchPlugin()}
+/>
+```
+
+### 定义插件配置 Schema
+
+```typescript
+import { Schema } from 'zhin.js'
+
+export const config = Schema.object({
+  // 基础类型
+  name: Schema.string('插件名称').required(),
+  enabled: Schema.boolean('是否启用').default(true),
+  port: Schema.number('端口').min(1).max(65535).default(3000),
+  
+  // 特殊类型
+  opacity: Schema.percent('透明度').default(0.8),
+  startDate: Schema.date('开始日期'),
+  pattern: Schema.regexp('匹配模式'),
+  
+  // 集合类型
+  tags: Schema.list(Schema.string(), '标签'),
+  server: Schema.object({
+    host: Schema.string().default('localhost'),
+    port: Schema.number().default(3000)
+  }),
+  
+  // 组合类型
+  mode: Schema.union([
+    Schema.const('auto'),
+    Schema.const('manual')
+  ])
+})
+```
+
+### 配置表单特性
+
+- **自动渲染**: 根据 Schema 类型自动选择合适的 UI 组件
+- **智能分组**: 简单字段直接展示，复杂字段可折叠
+- **嵌套支持**: 完整支持任意深度的嵌套结构
+- **实时验证**: 输入时进行类型验证和格式检查
+- **紧凑布局**: 使用 ScrollArea 和 Accordion 优化空间使用
+
+## 组件架构
+
+### PluginConfigForm 模块结构
+
+```
+PluginConfigForm/
+├── types.ts                      - 类型定义
+├── BasicFieldRenderers.tsx       - 基础类型渲染器 (9个)
+├── CollectionFieldRenderers.tsx  - 集合类型渲染器 (5个)
+├── CompositeFieldRenderers.tsx   - 组合类型渲染器 (2个)
+├── FieldRenderer.tsx             - 字段渲染器主入口
+├── NestedFieldRenderer.tsx       - 嵌套字段渲染器
+└── index.tsx                     - 主组件
+```
+
+17 个独立渲染器，职责单一，易于测试和扩展。
+
+## 注意事项
+
+1. **路由路径唯一性** - 确保路由路径的唯一性，避免冲突
+2. **事件清理** - 记得清理事件监听器，避免内存泄漏
+3. **性能考虑** - 大量路由时考虑使用懒加载
+4. **类型安全** - 使用 TypeScript 确保类型安全
+5. **Schema 定义** - 为插件配置定义清晰的 Schema，提供友好的描述信息
+
 ## 示例项目
 
 查看 `app/src/main.tsx` 中的完整示例。

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

@@ -0,0 +1,253 @@
+/**
+ * 基础类型字段渲染器
+ * 处理: string, number, boolean, percent, date, regexp, const
+ */
+
+import { Flex, Box, Text, TextField, TextArea, Switch, Select, Badge, Callout } from '@radix-ui/themes'
+import { Icons } from '@zhin.js/client'
+import type { FieldRendererProps } from './types.js'
+
+export function StringFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  // 枚举类型 - 下拉选择 - 优化样式
+  if (field.enum) {
+    return (
+      <Select.Root
+        size="2"
+        value={value?.toString() || ''}
+        onValueChange={onChange}
+      >
+        <Select.Trigger className="w-full hover:border-blue-500 dark:hover:border-blue-400 transition-colors" />
+        <Select.Content className="shadow-lg">
+          {field.enum.map((option) => (
+            <Select.Item 
+              key={option} 
+              value={option.toString()}
+              className="hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
+            >
+              {option.toString()}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+    )
+  }
+  
+  // 多行文本 - 优化样式
+  if (field.description?.includes('多行') || field.key?.includes('description')) {
+    return (
+      <TextArea
+        size="2"
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={field.description || `请输入`}
+        rows={3}
+        className="font-sans resize-y hover:border-blue-500 dark:hover:border-blue-400 transition-colors focus:ring-2 focus:ring-blue-500/20"
+      />
+    )
+  }
+  
+  // 单行文本 - 优化样式
+  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"
+    />
+  )
+}
+
+export function NumberFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  return (
+    <TextField.Root
+      size="2"
+      type="number"
+      value={value?.toString() || ''}
+      onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
+      placeholder={field.description || `请输入数字`}
+      min={field.min}
+      max={field.max}
+      className="hover:border-blue-500 dark:hover:border-blue-400 transition-colors focus-within:ring-2 focus-within:ring-blue-500/20"
+    />
+  )
+}
+
+export function BooleanFieldRenderer({ value, onChange }: FieldRendererProps) {
+  return (
+    <Flex align="center" gap="3" className="p-3 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
+      <Switch
+        size="2"
+        checked={value === true}
+        onCheckedChange={onChange}
+        className="cursor-pointer"
+      />
+      <Flex direction="column" gap="1">
+        <Text size="2" weight="bold" color={value ? 'green' : 'gray'}>
+          {value ? '已启用' : '已禁用'}
+        </Text>
+        <Text size="1" color="gray">
+          {value ? '功能当前处于开启状态' : '功能当前处于关闭状态'}
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}
+
+export function PercentFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  const percentValue = typeof value === 'number' ? value : (field.default || 0)
+  
+  return (
+    <div className="p-4 rounded-lg bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 border border-blue-200 dark:border-blue-800">
+      <Flex direction="column" gap="3">
+        <Flex align="center" gap="3">
+          <input
+            type="range"
+            min={field.min || 0}
+            max={field.max || 1}
+            step={field.step || 0.01}
+            value={percentValue}
+            onChange={(e) => onChange(parseFloat(e.target.value))}
+            className="flex-1 h-2 rounded-lg appearance-none cursor-pointer bg-blue-200 dark:bg-blue-800 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 dark:[&::-webkit-slider-thumb]:bg-blue-400 [&::-webkit-slider-thumb]:cursor-pointer hover:[&::-webkit-slider-thumb]:bg-blue-700 dark:hover:[&::-webkit-slider-thumb]:bg-blue-300 transition-all"
+          />
+          <TextField.Root
+            size="2"
+            type="number"
+            value={(percentValue * 100).toFixed(0)}
+            onChange={(e) => onChange(parseFloat(e.target.value) / 100)}
+            min={(field.min || 0) * 100}
+            max={(field.max || 1) * 100}
+            className="w-24"
+          >
+            <TextField.Slot side="right">
+              <Text size="1" weight="bold" className="text-blue-600 dark:text-blue-400">%</Text>
+            </TextField.Slot>
+          </TextField.Root>
+        </Flex>
+        <Flex align="center" justify="between">
+          <Text size="1" color="gray">
+            当前值
+          </Text>
+          <Badge color="blue" size="2" variant="soft" className="font-mono">
+            {(percentValue * 100).toFixed(1)}%
+          </Badge>
+        </Flex>
+      </Flex>
+    </div>
+  )
+}
+
+export function DateFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  const dateValue = value instanceof Date 
+    ? value.toISOString().split('T')[0]
+    : value || ''
+    
+  return (
+    <div className="relative">
+      <TextField.Root
+        size="2"
+        type="date"
+        value={dateValue}
+        onChange={(e) => onChange(new Date(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"
+      >
+        <TextField.Slot side="left">
+          <Icons.Calendar className="w-4 h-4 text-gray-500" />
+        </TextField.Slot>
+      </TextField.Root>
+    </div>
+  )
+}
+
+export function RegexpFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  const regexpValue = value instanceof RegExp 
+    ? value.source 
+    : (typeof value === 'string' ? value : '')
+    
+  return (
+    <div className="p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+      <Flex direction="column" gap="2">
+        <TextField.Root
+          size="2"
+          value={regexpValue}
+          onChange={(e) => {
+            try {
+              onChange(new RegExp(e.target.value))
+            } catch {
+              onChange(e.target.value)
+            }
+          }}
+          placeholder={field.description || '请输入正则表达式'}
+          className="font-mono text-sm hover:border-amber-500 dark:hover:border-amber-400 transition-colors"
+        >
+          <TextField.Slot side="left">
+            <Text size="1" className="text-amber-600 dark:text-amber-400 font-bold">/</Text>
+          </TextField.Slot>
+          <TextField.Slot side="right">
+            <Text size="1" className="text-amber-600 dark:text-amber-400 font-bold">/</Text>
+          </TextField.Slot>
+        </TextField.Root>
+        <Flex align="center" gap="2">
+          <Icons.Info className="w-3 h-3 text-amber-600 dark:text-amber-400" />
+          <Text size="1" className="text-amber-700 dark:text-amber-300">
+            输入正则表达式模式 (省略斜杠)
+          </Text>
+        </Flex>
+      </Flex>
+    </div>
+  )
+}
+
+export function ConstFieldRenderer({ field, value }: FieldRendererProps) {
+  const constValue = field.default || value
+  
+  return (
+    <div className="p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700">
+      <Flex align="center" gap="3">
+        <Icons.Lock className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+        <Badge variant="soft" size="2" className="font-mono">
+          {String(constValue)}
+        </Badge>
+        <Text size="1" color="gray" className="ml-auto">
+          (常量，不可修改)
+        </Text>
+      </Flex>
+    </div>
+  )
+}
+
+export function AnyFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  return (
+    <div className="p-3 rounded-lg bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">
+      <Flex direction="column" gap="3">
+        <Flex align="center" gap="2">
+          <Icons.Code className="w-4 h-4 text-purple-600 dark:text-purple-400" />
+          <Text size="1" weight="bold" className="text-purple-700 dark:text-purple-300">
+            JSON 格式输入
+          </Text>
+        </Flex>
+        <TextArea
+          size="2"
+          value={typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value || '')}
+          onChange={(e) => {
+            try {
+              onChange(JSON.parse(e.target.value))
+            } catch {
+              onChange(e.target.value)
+            }
+          }}
+          placeholder={field.description || '支持任意类型 (JSON 格式)'}
+          rows={4}
+          className="font-mono text-sm bg-white dark:bg-gray-950 hover:border-purple-500 dark:hover:border-purple-400 transition-colors"
+        />
+        <Flex align="center" gap="2">
+          <Icons.Info className="w-3 h-3 text-purple-600 dark:text-purple-400" />
+          <Text size="1" className="text-purple-700 dark:text-purple-300">
+            支持: 字符串、数字、布尔值、对象、数组
+          </Text>
+        </Flex>
+      </Flex>
+    </div>
+  )
+}

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

@@ -0,0 +1,261 @@
+/**
+ * 集合类型字段渲染器
+ * 处理: list, tuple, object, dict
+ */
+
+import { Flex, Box, Text, TextArea, Button, Badge, Card, Separator } from '@radix-ui/themes'
+import { Icons } from '@zhin.js/client'
+import type { FieldRendererProps, SchemaField } from './types.js'
+
+interface CollectionFieldProps extends FieldRendererProps {
+  renderNestedField: (
+    fieldName: string,
+    field: SchemaField,
+    value: any,
+    onChange: (val: any) => void
+  ) => React.ReactElement
+}
+
+export function ListFieldRenderer({ 
+  fieldName,
+  field, 
+  value, 
+  onChange,
+  onArrayItemChange,
+  renderNestedField
+}: CollectionFieldProps) {
+  const arrayValue = Array.isArray(value) ? value : []
+  const innerField = field.inner || field.items
+  
+  // 简单类型 - 使用多行文本 - 优化样式
+  if (innerField && ['string', 'number'].includes(innerField.type)) {
+    return (
+      <div className="p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
+        <Flex direction="column" gap="2">
+          <Flex align="center" gap="2">
+            <Icons.List className="w-4 h-4 text-green-600 dark:text-green-400" />
+            <Text size="1" weight="bold" className="text-green-700 dark:text-green-300">
+              列表输入 (每行一个值)
+            </Text>
+          </Flex>
+          <TextArea
+            size="2"
+            value={arrayValue.join('\n')}
+            onChange={(e) => {
+              const lines = e.target.value.split('\n').filter(Boolean)
+              const parsed = innerField.type === 'number' 
+                ? lines.map(l => parseFloat(l) || 0)
+                : lines
+              onChange(parsed)
+            }}
+            placeholder={`每行一个值\n${field.description || ''}`}
+            rows={4}
+            className="font-mono text-sm bg-white dark:bg-gray-950 hover:border-green-500 dark:hover:border-green-400 transition-colors"
+          />
+        </Flex>
+      </div>
+    )
+  }
+  
+  // 复杂类型 - Card 列表 - 优化样式
+  return (
+    <Flex direction="column" gap="2">
+      <div className="space-y-2">
+        {arrayValue.map((item, index) => (
+          <Card 
+            key={index} 
+            size="1" 
+            variant="surface"
+            className="border border-gray-200 dark:border-gray-800 hover:border-blue-300 dark:hover:border-blue-700 transition-colors group"
+          >
+            <Flex direction="column" gap="2" className="p-3">
+              <Flex justify="between" align="center">
+                <Flex align="center" gap="2">
+                  <Badge size="1" variant="soft" color="blue" className="font-mono">
+                    {index + 1}
+                  </Badge>
+                </Flex>
+                <Button
+                  size="1"
+                  variant="ghost"
+                  color="red"
+                  onClick={() => {
+                    const newArr = arrayValue.filter((_, i) => i !== index)
+                    onChange(newArr)
+                  }}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <Icons.Trash2 className="w-3 h-3" />
+                </Button>
+              </Flex>
+              <div className="pl-2 border-l-2 border-blue-200 dark:border-blue-800">
+                {innerField && renderNestedField(`${fieldName}[${index}]`, innerField, item, (val) => {
+                  onArrayItemChange?.(fieldName, index, val)
+                })}
+              </div>
+            </Flex>
+          </Card>
+        ))}
+      </div>
+      <Button
+        size="2"
+        variant="soft"
+        onClick={() => {
+          const newItem = innerField?.default || (innerField?.type === 'object' ? {} : '')
+          onChange([...arrayValue, newItem])
+        }}
+        className="w-full hover:bg-blue-100 dark:hover:bg-blue-900/30 border-2 border-dashed border-blue-300 dark:border-blue-700 hover:border-blue-500 dark:hover:border-blue-500 transition-colors"
+      >
+        <Icons.Plus className="w-4 h-4" />
+        添加项
+      </Button>
+    </Flex>
+  )
+}
+
+export function ArrayFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  // 兼容旧格式 - 优化样式
+  return (
+    <div className="p-3 rounded-lg bg-cyan-50 dark:bg-cyan-900/20 border border-cyan-200 dark:border-cyan-800">
+      <Flex direction="column" gap="2">
+        <Flex align="center" gap="2">
+          <Icons.List className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
+          <Text size="1" weight="bold" className="text-cyan-700 dark:text-cyan-300">
+            数组输入 (每行一个值)
+          </Text>
+        </Flex>
+        <TextArea
+          size="2"
+          value={Array.isArray(value) ? value.join('\n') : ''}
+          onChange={(e) => onChange(e.target.value.split('\n').filter(Boolean))}
+          placeholder={`每行一个值\n${field.description || ''}`}
+          rows={3}
+          className="font-mono text-sm bg-white dark:bg-gray-950 hover:border-cyan-500 dark:hover:border-cyan-400 transition-colors"
+        />
+      </Flex>
+    </div>
+  )
+}
+
+export function TupleFieldRenderer({
+  fieldName,
+  field,
+  value,
+  onArrayItemChange,
+  renderNestedField
+}: CollectionFieldProps) {
+  const tupleValue = Array.isArray(value) ? value : []
+  const tupleFields = field.list || []
+  
+  return (
+    <div className="space-y-3">
+      {tupleFields.map((tupleField, index) => (
+        <div 
+          key={index}
+          className="p-3 rounded-lg bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 transition-colors"
+        >
+          <Flex direction="column" gap="2">
+            <Flex align="center" gap="2">
+              <Badge size="1" variant="soft" color="indigo" className="font-mono">
+                #{index + 1}
+              </Badge>
+            </Flex>
+            {tupleField.description && (
+              <Text size="1" className="text-indigo-700 dark:text-indigo-300">
+                {tupleField.description}
+              </Text>
+            )}
+            <div className="mt-1">
+              {renderNestedField(`${fieldName}[${index}]`, tupleField, tupleValue[index], (val) => {
+                onArrayItemChange?.(fieldName, index, val)
+              })}
+            </div>
+          </Flex>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function ObjectFieldRenderer({
+  fieldName,
+  field,
+  value,
+  renderField
+}: CollectionFieldProps & { renderField: (fieldName: string, field: SchemaField, parentPath?: string) => React.ReactElement }) {
+  const objectFields = field.dict || field.properties || {}
+  
+  return (
+    <div className="rounded-lg border-2 border-blue-200 dark:border-blue-800 bg-gradient-to-br from-blue-50/50 to-cyan-50/50 dark:from-blue-900/10 dark:to-cyan-900/10 overflow-hidden">
+      <div className="px-4 py-2 bg-blue-100 dark:bg-blue-900/30 border-b border-blue-200 dark:border-blue-800">
+        <Flex align="center" gap="2">
+          <Icons.Package className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+        </Flex>
+      </div>
+      <div className="p-4 space-y-3">
+        {Object.entries(objectFields).map(([key, nestedField]: [string, any], index) => (
+          <div key={key}>
+            <div className="p-3 rounded-md bg-white dark:bg-gray-950 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">
+                    {nestedField.key || key}
+                  </Text>
+                  {nestedField.required && (
+                    <Text size="2" weight="bold" color="red" className="leading-none">
+                      *
+                    </Text>
+                  )}
+                </Flex>
+                {nestedField.description && (
+                  <Text size="1" color="gray">
+                    {nestedField.description}
+                  </Text>
+                )}
+                <div className="mt-1">
+                  {renderField(key, nestedField, fieldName)}
+                </div>
+              </Flex>
+            </div>
+            {index < Object.entries(objectFields).length - 1 && (
+              <Separator size="4" className="my-2" />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function DictFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  return (
+    <div className="p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800">
+      <Flex direction="column" gap="3">
+        <Flex align="center" gap="2">
+          <Icons.Code className="w-4 h-4 text-violet-600 dark:text-violet-400" />
+        </Flex>
+        <TextArea
+          size="2"
+          value={typeof value === 'object' ? JSON.stringify(value, null, 2) : value || '{}'}
+          onChange={(e) => {
+            try {
+              const parsed = JSON.parse(e.target.value)
+              onChange(parsed)
+            } catch {
+              // 忽略解析错误，继续编辑
+            }
+          }}
+          placeholder={field.description || '请输入 JSON 格式'}
+          rows={6}
+          className="font-mono text-sm bg-white dark:bg-gray-950 hover:border-violet-500 dark:hover:border-violet-400 transition-colors"
+        />
+        <Flex align="center" gap="2">
+          <Icons.Info className="w-3 h-3 text-violet-600 dark:text-violet-400" />
+          <Text size="1" className="text-violet-700 dark:text-violet-300">
+            键值对格式: &#123;"key": "value"&#125;
+          </Text>
+        </Flex>
+      </Flex>
+    </div>
+  )
+}