npm - @zhin.js/console - Versions diffs - 1.0.6 → 1.0.8 - Mend

@zhin.js/console 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/README.md +86 -21
package/app/bin.ts +52 -0
package/app/build.ts +211 -0
package/app/dev.ts +83 -0
package/app/index.ts +193 -0
package/app/websocket.ts +109 -0
package/client/index.html +13 -0
package/client/postcss.config.js +5 -0
package/client/public/vendor/react-dom.production.min.js +1 -0
package/client/public/vendor/react.production.min.js +1 -0
package/client/src/components/PluginConfigForm/BasicFieldRenderers.tsx +253 -0
package/client/src/components/PluginConfigForm/CollectionFieldRenderers.tsx +261 -0
package/client/src/components/PluginConfigForm/CompositeFieldRenderers.tsx +105 -0
package/client/src/components/PluginConfigForm/FieldRenderer.tsx +110 -0
package/client/src/components/PluginConfigForm/NestedFieldRenderer.tsx +95 -0
package/client/src/components/PluginConfigForm/index.tsx +237 -0
package/client/src/components/PluginConfigForm/types.ts +46 -0
package/client/src/components/ThemeToggle.tsx +21 -0
package/client/src/hooks/useTheme.ts +17 -0
package/client/src/layouts/dashboard.tsx +259 -0
package/client/src/main.tsx +121 -0
package/client/src/pages/dashboard-bots.tsx +198 -0
package/client/src/pages/dashboard-home.tsx +301 -0
package/client/src/pages/dashboard-logs.tsx +298 -0
package/client/src/pages/dashboard-plugin-detail.tsx +360 -0
package/client/src/pages/dashboard-plugins.tsx +166 -0
package/client/src/style.css +1105 -0
package/client/src/theme/index.ts +92 -0
package/client/tailwind.config.js +85 -0
package/client/tsconfig.json +17 -0
package/lib/bin.d.ts +3 -0
package/lib/bin.d.ts.map +1 -0
package/lib/bin.js +45 -0
package/lib/bin.js.map +1 -0
package/lib/build.d.ts +33 -0
package/lib/build.d.ts.map +1 -0
package/lib/build.js +168 -0
package/lib/build.js.map +1 -0
package/lib/dev.d.ts +16 -0
package/lib/dev.d.ts.map +1 -0
package/lib/dev.js +70 -0
package/lib/dev.js.map +1 -0
package/lib/index.d.ts +4 -4
package/lib/index.d.ts.map +1 -1
package/lib/index.js +107 -269
package/lib/index.js.map +1 -1
package/lib/websocket.d.ts +14 -0
package/lib/websocket.d.ts.map +1 -0
package/lib/websocket.js +85 -0
package/lib/websocket.js.map +1 -0
package/package.json +28 -10
package/src/index.ts +0 -370

package/app/websocket.ts ADDED Viewed

@@ -0,0 +1,109 @@
+import WebSocket from "ws";
+import type { WebServer } from "./index.js";
+/**
+ * 设置 WebSocket 连接处理
+ */
+export function setupWebSocket(webServer: WebServer) {
+  webServer.ws.on("connection", (ws: WebSocket) => {
+    // 发送初始数据同步
+    ws.send(
+      JSON.stringify({
+        type: "sync",
+        data: {
+          key: "entries",
+          value: Object.values(webServer.entries),
+        },
+      })
+    );
+    // 通知客户端进行数据初始化
+    ws.send(
+      JSON.stringify({
+        type: "init-data",
+        timestamp: Date.now(),
+      })
+    );
+    // 处理客户端消息
+    ws.on("message", async (data) => {
+      try {
+        const message = JSON.parse(data.toString());
+        await handleWebSocketMessage(ws, message, webServer);
+      } catch (error) {
+        console.error("WebSocket 消息处理错误:", error);
+        ws.send(
+          JSON.stringify({
+            error: "Invalid message format",
+          })
+        );
+      }
+    });
+    ws.on("close", () => {
+      // 连接关闭时的清理工作
+    });
+    ws.on("error", (error) => {
+      console.error("WebSocket 错误:", error);
+    });
+  });
+}
+/**
+ * 处理 WebSocket 消息
+ */
+async function handleWebSocketMessage(
+  ws: WebSocket,
+  message: any,
+  webServer: WebServer
+) {
+  const { type, requestId } = message;
+  switch (type) {
+    case "ping":
+      // 心跳检测
+      ws.send(JSON.stringify({ type: "pong", requestId }));
+      break;
+    case "entries:get":
+      // 获取所有入口文件
+      ws.send(
+        JSON.stringify({
+          requestId,
+          data: Object.values(webServer.entries),
+        })
+      );
+      break;
+    default:
+      // 未知消息类型
+      ws.send(
+        JSON.stringify({
+          requestId,
+          error: `Unknown message type: ${type}`,
+        })
+      );
+  }
+}
+/**
+ * 广播消息给所有连接的客户端
+ */
+export function broadcastToAll(webServer: WebServer, message: any) {
+  for (const ws of webServer.ws.clients || []) {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(message));
+    }
+  }
+}
+/**
+ * 通知数据更新
+ */
+export function notifyDataUpdate(webServer: WebServer) {
+  broadcastToAll(webServer, {
+    type: "data-update",
+    timestamp: Date.now(),
+  });
+}

package/client/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <meta charset='UTF-8'>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Zhin</title>
+</head>
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script src='/src/main.tsx' type='module'></script>
+</body>
+</html>

package/client/postcss.config.js ADDED Viewed

@@ -0,0 +1,5 @@
+export default {
+    plugins: {
+      "@tailwindcss/postcss": {},
+    },
+  };

package/client/public/vendor/react-dom.production.min.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ Not found: /react-dom@19.2.0/umd/react-dom.production.min.js

package/client/public/vendor/react.production.min.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ Not found: /react@19.2.0/umd/react.production.min.js

package/client/src/components/PluginConfigForm/BasicFieldRenderers.tsx ADDED Viewed

@@ -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/client/src/components/PluginConfigForm/CollectionFieldRenderers.tsx ADDED Viewed

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