@zhin.js/console 1.0.51 → 1.0.52

package/client/src/pages/bots.tsx

@@ -1,6 +1,8 @@
-import { useEffect, useState } from 'react'
-import { Bot, AlertCircle, Wifi, WifiOff, Activity, Package, Zap } from 'lucide-react'
-import { apiFetch } from '../utils/auth'
+import { useEffect, useState, useCallback } from 'react'
+import { Link } from 'react-router'
+import { Bot, AlertCircle, Wifi, WifiOff, Activity, Package, Zap, ChevronRight, RefreshCw } from 'lucide-react'
+import { useWebSocket, useSelector, selectConfigConnected } from '@zhin.js/client'
+import { Button } from '../components/ui/button'
 import { Card, CardContent } from '../components/ui/card'
 import { Badge } from '../components/ui/badge'
 import { Alert, AlertDescription } from '../components/ui/alert'
@@ -12,34 +14,48 @@ interface BotInfo {
   adapter: string
   connected: boolean
   status: 'online' | 'offline'
+  pendingRequestCount?: number
+  pendingNoticeCount?: number
 }
 
-export default function BotMangePage() {
+export default function BotManagePage() {
   const [bots, setBots] = useState<BotInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const connected = useSelector(selectConfigConnected)
+  const { sendRequest } = useWebSocket()
 
-  useEffect(() => {
-    fetchBots()
-    const interval = setInterval(fetchBots, 5000)
-    return () => clearInterval(interval)
-  }, [])
-
-  const fetchBots = async () => {
+  const fetchBots = useCallback(async () => {
+    if (!connected) {
+      setLoading(false)
+      setError('WebSocket 未连接，请刷新页面')
+      return
+    }
     try {
-      const res = await apiFetch('/api/bots')
-      if (!res.ok) throw new Error('API 请求失败')
-      const data = await res.json()
-      if (data.success) { setBots(data.data); setError(null) }
-      else throw new Error('数据格式错误')
+      const data = await sendRequest<{ bots: BotInfo[] }>({ type: 'bot:list' })
+      setBots(data.bots || [])
+      setError(null)
     } catch (err) {
       setError((err as Error).message)
     } finally {
       setLoading(false)
     }
-  }
+  }, [connected, sendRequest])
+
+  useEffect(() => {
+    if (connected) {
+      setLoading(true)
+      fetchBots()
+    }
+  }, [connected, fetchBots])
+
+  useEffect(() => {
+    if (!connected) return
+    const interval = setInterval(fetchBots, 8000)
+    return () => clearInterval(interval)
+  }, [connected, fetchBots])
 
-  if (loading) {
+  if (loading && connected) {
     return (
       <div className="space-y-6">
         <Skeleton className="h-8 w-48" />
@@ -63,80 +79,102 @@ export default function BotMangePage() {
 
   return (
     <div className="space-y-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">机器人管理</h1>
-        <div className="flex items-center gap-2 mt-1">
-          <span className="text-sm text-muted-foreground">共 {bots.length} 个机器人，</span>
-          <Badge variant="success">{bots.filter(b => b.connected).length}</Badge>
-          <span className="text-sm text-muted-foreground">个在线</span>
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">机器人管理</h1>
+          <div className="flex items-center gap-2 mt-1">
+            <span className="text-sm text-muted-foreground">共 {bots.length} 个机器人，</span>
+            <Badge variant="success">{bots.filter(b => b.connected).length}</Badge>
+            <span className="text-sm text-muted-foreground">个在线</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-2">
+            ICQQ 扫码/验证码登录请前往侧栏{' '}
+            <Link to="/icqq" className="text-primary underline-offset-4 hover:underline font-medium">
+              ICQQ 管理
+            </Link>
+            。
+          </p>
         </div>
+        <Button variant="outline" size="sm" onClick={() => { setLoading(true); void fetchBots(); }} disabled={!connected || loading}>
+          <RefreshCw className={loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4'} />
+          刷新
+        </Button>
       </div>
 
       <Separator />
 
-      {/* Bot grid */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         {bots.map((bot, index) => (
-          <Card key={`${bot.adapter}-${bot.name}-${index}`}>
-            <CardContent className="p-5 space-y-4">
-              {/* Header */}
-              <div className="flex justify-between items-center">
-                <div className="flex items-center gap-2">
-                  <div className={`p-2 rounded-md ${bot.connected ? 'bg-emerald-100 dark:bg-emerald-900/30' : 'bg-muted'}`}>
-                    <Bot className={`w-5 h-5 ${bot.connected ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`} />
+          <Link
+            key={`${bot.adapter}-${bot.name}-${index}`}
+            to={`/bots/${encodeURIComponent(bot.adapter)}/${encodeURIComponent(bot.name)}`}
+            className="block transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-xl"
+          >
+            <Card className="h-full cursor-pointer hover:border-primary/40">
+              <CardContent className="p-5 space-y-4">
+                <div className="flex justify-between items-center">
+                  <div className="flex items-center gap-2">
+                    <div className={`p-2 rounded-md ${bot.connected ? 'bg-emerald-100 dark:bg-emerald-900/30' : 'bg-muted'}`}>
+                      <Bot className={`w-5 h-5 ${bot.connected ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`} />
+                    </div>
+                    <span className="text-lg font-bold">{bot.name}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Badge variant={bot.connected ? 'success' : 'secondary'}>
+                      {bot.connected ? <><Wifi className="w-3 h-3 mr-1" />在线</> : <><WifiOff className="w-3 h-3 mr-1" />离线</>}
+                    </Badge>
+                    <ChevronRight className="w-4 h-4 text-muted-foreground" />
                   </div>
-                  <span className="text-lg font-bold">{bot.name}</span>
-                </div>
-                <div className="relative">
-                  <Badge variant={bot.connected ? 'success' : 'secondary'}>
-                    {bot.connected ? <><Wifi className="w-3 h-3 mr-1" />在线</> : <><WifiOff className="w-3 h-3 mr-1" />离线</>}
-                  </Badge>
                 </div>
-              </div>
 
-              {/* Adapter */}
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-muted-foreground">适配器:</span>
-                <Badge variant="outline">{bot.adapter}</Badge>
-              </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-muted-foreground">适配器:</span>
+                  <Badge variant="outline">{bot.adapter}</Badge>
+                </div>
 
-              <Separator />
+                <Separator />
 
-              {/* Details */}
-              <div className="space-y-2">
-                <div className="flex justify-between items-center p-2 rounded-md bg-muted/50">
-                  <div className="flex items-center gap-2 text-sm">
-                    <Activity className={`w-4 h-4 ${bot.status === 'online' ? 'text-emerald-500' : 'text-muted-foreground'}`} />
-                    <span className="text-muted-foreground">运行状态</span>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center p-2 rounded-md bg-muted/50">
+                    <div className="flex items-center gap-2 text-sm">
+                      <Activity className={`w-4 h-4 ${bot.status === 'online' ? 'text-emerald-500' : 'text-muted-foreground'}`} />
+                      <span className="text-muted-foreground">运行状态</span>
+                    </div>
+                    <Badge variant={bot.status === 'online' ? 'success' : 'secondary'}>
+                      {bot.status === 'online' ? '运行中' : '已停止'}
+                    </Badge>
                   </div>
-                  <Badge variant={bot.status === 'online' ? 'success' : 'secondary'}>
-                    {bot.status === 'online' ? '运行中' : '已停止'}
-                  </Badge>
-                </div>
-                <div className="flex justify-between items-center p-2 rounded-md bg-muted/50">
-                  <div className="flex items-center gap-2 text-sm">
-                    <Package className="w-4 h-4 text-muted-foreground" />
-                    <span className="text-muted-foreground">适配器类型</span>
+                  <div className="flex justify-between items-center p-2 rounded-md bg-muted/50">
+                    <div className="flex items-center gap-2 text-sm">
+                      <Package className="w-4 h-4 text-muted-foreground" />
+                      <span className="text-muted-foreground">适配器类型</span>
+                    </div>
+                    <span className="text-sm font-medium">{bot.adapter}</span>
                   </div>
-                  <span className="text-sm font-medium">{bot.adapter}</span>
-                </div>
-                <div className="flex justify-between items-center p-2 rounded-md bg-muted/50">
-                  <div className="flex items-center gap-2 text-sm">
-                    <Zap className="w-4 h-4 text-muted-foreground" />
-                    <span className="text-muted-foreground">连接状态</span>
+                  <div className="flex justify-between items-center p-2 rounded-md bg-muted/50">
+                    <div className="flex items-center gap-2 text-sm">
+                      <Zap className="w-4 h-4 text-muted-foreground" />
+                      <span className="text-muted-foreground">连接状态</span>
+                    </div>
+                    <span className={`text-sm font-medium ${bot.connected ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`}>
+                      {bot.connected ? '已连接' : '未连接'}
+                    </span>
                   </div>
-                  <span className={`text-sm font-medium ${bot.connected ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`}>
-                    {bot.connected ? '已连接' : '未连接'}
-                  </span>
                 </div>
-              </div>
-            </CardContent>
-          </Card>
+                <div className="flex flex-wrap items-center justify-center gap-1.5 pt-1">
+                  {(bot.pendingRequestCount ?? 0) + (bot.pendingNoticeCount ?? 0) > 0 && (
+                    <span className="text-xs text-amber-600 dark:text-amber-400 font-medium">
+                      {(bot.pendingRequestCount ?? 0) + (bot.pendingNoticeCount ?? 0)} 条待处理
+                    </span>
+                  )}
+                  <p className="text-xs text-primary">点击进入管理</p>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
         ))}
       </div>
 
-      {/* Empty state */}
       {bots.length === 0 && (
         <Card>
           <CardContent className="flex flex-col items-center gap-4 py-12">

package/client/src/pages/database/constants.ts

@@ -0,0 +1,16 @@
+import type { DatabaseType } from '@zhin.js/client'
+
+export const DB_TYPE_LABELS: Record<DatabaseType, string> = {
+  related: '关系型',
+  document: '文档型',
+  keyvalue: '键值型',
+}
+
+export const DIALECT_LABELS: Record<string, string> = {
+  sqlite: 'SQLite',
+  mysql: 'MySQL',
+  pg: 'PostgreSQL',
+  memory: 'Memory',
+  mongodb: 'MongoDB',
+  redis: 'Redis',
+}

package/client/src/pages/database/database-page.tsx

@@ -0,0 +1,170 @@
+import { useState, useMemo, type MouseEvent } from 'react'
+import { useDatabase } from '@zhin.js/client'
+import type { DatabaseType, TableInfo } from '@zhin.js/client'
+import { Database, Table2, Trash2, RefreshCw, Loader2, AlertCircle, Key } from 'lucide-react'
+import { Card, CardContent } from '../../components/ui/card'
+import { Button } from '../../components/ui/button'
+import { Alert, AlertDescription } from '../../components/ui/alert'
+import { Badge } from '../../components/ui/badge'
+import { ScrollArea } from '../../components/ui/scroll-area'
+import { PageHeader } from '../../components/PageHeader'
+import { DB_TYPE_LABELS, DIALECT_LABELS } from './constants'
+import { RelatedTableView } from './related-table-view'
+import { DocumentCollectionView } from './document-collection-view'
+import { KvBucketView } from './kv-bucket-view'
+
+export default function DatabasePage() {
+  const {
+    info, tables, loading, error,
+    loadInfo, loadTables, dropTable,
+    select, insert, update, remove,
+    kvGet, kvSet, kvDelete, kvEntries,
+  } = useDatabase()
+
+  const [selectedTable, setSelectedTable] = useState<string | null>(null)
+  const selectedTableInfo = useMemo(() => tables.find((t: TableInfo) => t.name === selectedTable), [tables, selectedTable])
+  const dbType: DatabaseType = info?.type ?? 'related'
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="数据库管理"
+        description={`浏览和管理 ${DB_TYPE_LABELS[dbType]} 中的数据；左栏选择对象，右侧查看与编辑。`}
+        actions={
+          <div className="flex items-center gap-2">
+            {info && (
+              <Badge variant="secondary" className="font-normal">
+                {DIALECT_LABELS[info.dialect] || info.dialect} · {DB_TYPE_LABELS[info.type]}
+              </Badge>
+            )}
+            <Button variant="outline" size="sm" onClick={() => { loadInfo().catch(() => {}); loadTables().catch(() => {}) }} disabled={loading}>
+              <RefreshCw className={`w-4 h-4 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新
+            </Button>
+          </div>
+        }
+      />
+
+      {error && (
+        <Alert variant="destructive" className="py-2">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <Card className="overflow-hidden border-border/80 shadow-sm">
+        <CardContent className="p-0">
+          <div className="flex min-h-[min(520px,calc(100vh-11rem))]">
+            <div className="w-56 border-r flex flex-col shrink-0">
+              <div className="px-3 py-2 border-b bg-muted/30">
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  {dbType === 'related' ? '数据表' : dbType === 'document' ? '集合' : '桶'}
+                </span>
+              </div>
+              <ScrollArea className="flex-1">
+                <div className="py-1">
+                  {loading && !tables.length ? (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : !tables.length ? (
+                    <p className="text-sm text-muted-foreground text-center py-8">暂无数据</p>
+                  ) : tables.map((t: TableInfo) => (
+                    <button
+                      key={t.name}
+                      className={`
+                        group w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left
+                        hover:bg-accent transition-colors rounded-sm
+                        ${selectedTable === t.name ? 'bg-accent text-accent-foreground font-medium' : ''}
+                      `}
+                      onClick={() => setSelectedTable(t.name)}
+                    >
+                      {dbType === 'keyvalue' ? <Key className="w-3.5 h-3.5 text-muted-foreground shrink-0" /> : <Table2 className="w-3.5 h-3.5 text-muted-foreground shrink-0" />}
+                      <span className="truncate flex-1">{t.name}</span>
+                      {t.columns && <Badge variant="secondary" className="ml-auto text-[10px] px-1 py-0">{Object.keys(t.columns).length}</Badge>}
+                      <Button
+                        size="sm" variant="ghost"
+                        className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-destructive shrink-0"
+                        onClick={(e: MouseEvent) => {
+                          e.stopPropagation()
+                          const label = dbType === 'related' ? '表' : dbType === 'document' ? '集合' : '桶'
+                          if (!confirm(`确定要删除${label} "${t.name}" 吗？此操作不可撤销！`)) return
+                          dropTable(t.name).then(() => {
+                            if (selectedTable === t.name) setSelectedTable(null)
+                          }).catch(() => {})
+                        }}
+                      >
+                        <Trash2 className="w-3 h-3" />
+                      </Button>
+                    </button>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+
+            <div className="flex-1 min-w-0 p-4">
+              {selectedTable ? (
+                <>
+                  <div className="flex items-center gap-2 mb-4">
+                    <Table2 className="w-5 h-5 text-muted-foreground" />
+                    <h2 className="text-lg font-semibold">{selectedTable}</h2>
+                    {selectedTableInfo?.columns && (
+                      <div className="flex gap-1 ml-2 flex-wrap">
+                        {(Object.entries(selectedTableInfo.columns) as [string, { type: string; primary?: boolean }][]).slice(0, 8).map(([col, def]) => (
+                          <Badge key={col} variant="outline" className="text-[10px] px-1.5 py-0">
+                            {col}{def.primary ? ' 🔑' : ''}: {def.type}
+                          </Badge>
+                        ))}
+                        {Object.keys(selectedTableInfo.columns).length > 8 && (
+                          <Badge variant="outline" className="text-[10px] px-1.5 py-0">+{Object.keys(selectedTableInfo.columns).length - 8}</Badge>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {dbType === 'keyvalue' ? (
+                    <KvBucketView
+                      key={selectedTable}
+                      tableName={selectedTable}
+                      kvGet={kvGet}
+                      kvSet={kvSet}
+                      kvDelete={kvDelete}
+                      kvEntries={kvEntries}
+                    />
+                  ) : dbType === 'document' ? (
+                    <DocumentCollectionView
+                      key={selectedTable}
+                      tableName={selectedTable}
+                      select={select}
+                      insert={insert}
+                      update={update}
+                      remove={remove}
+                    />
+                  ) : (
+                    <RelatedTableView
+                      key={selectedTable}
+                      tableName={selectedTable}
+                      tableInfo={selectedTableInfo}
+                      select={select}
+                      insert={insert}
+                      update={update}
+                      remove={remove}
+                    />
+                  )}
+                </>
+              ) : (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  <div className="text-center">
+                    <Database className="w-12 h-12 mx-auto mb-3 opacity-30" />
+                    <p className="text-sm">
+                      在左侧选择{dbType === 'related' ? '一个表' : dbType === 'document' ? '一个集合' : '一个桶'}开始管理
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/client/src/pages/database/document-collection-view.tsx

@@ -0,0 +1,155 @@
+import { useState, useEffect, useCallback, type ChangeEvent } from 'react'
+import type { SelectResult } from '@zhin.js/client'
+import { Plus, Trash2, Pencil, RefreshCw, Loader2, AlertCircle, CheckCircle, ChevronLeft, ChevronRight, Save } from 'lucide-react'
+import { Card, CardContent } from '../../components/ui/card'
+import { Button } from '../../components/ui/button'
+import { Alert, AlertDescription } from '../../components/ui/alert'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '../../components/ui/dialog'
+
+export function DocumentCollectionView({
+  tableName,
+  select,
+  insert,
+  update,
+  remove,
+}: {
+  tableName: string
+  select: (table: string, page?: number, pageSize?: number, where?: any) => Promise<SelectResult>
+  insert: (table: string, row: any) => Promise<any>
+  update: (table: string, row: any, where: any) => Promise<any>
+  remove: (table: string, where: any) => Promise<any>
+}) {
+  const [data, setData] = useState<SelectResult | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [page, setPage] = useState(1)
+  const [msg, setMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+  const [editDoc, setEditDoc] = useState<any>(null)
+  const [addDoc, setAddDoc] = useState(false)
+  const [jsonText, setJsonText] = useState('')
+  const pageSize = 20
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setMsg(null)
+    try {
+      const result = await select(tableName, page, pageSize)
+      setData(result)
+    } catch (err) {
+      setMsg({ type: 'error', text: (err as Error).message })
+    } finally {
+      setLoading(false)
+    }
+  }, [tableName, page, select])
+
+  useEffect(() => { load() }, [load])
+
+  const handleSave = async (isNew: boolean) => {
+    try {
+      const doc = JSON.parse(jsonText)
+      if (isNew) {
+        await insert(tableName, doc)
+      } else {
+        const { _id, ...rest } = doc
+        await update(tableName, rest, { _id: editDoc._id })
+      }
+      setMsg({ type: 'success', text: isNew ? '添加成功' : '更新成功' })
+      setEditDoc(null)
+      setAddDoc(false)
+      setJsonText('')
+      setTimeout(() => setMsg(null), 2000)
+      await load()
+    } catch (err) {
+      setMsg({ type: 'error', text: (err as Error).message })
+    }
+  }
+
+  const handleDelete = async (doc: any) => {
+    if (!confirm('确定要删除这条文档吗？')) return
+    try {
+      await remove(tableName, { _id: doc._id })
+      setMsg({ type: 'success', text: '删除成功' })
+      setTimeout(() => setMsg(null), 2000)
+      await load()
+    } catch (err) {
+      setMsg({ type: 'error', text: (err as Error).message })
+    }
+  }
+
+  const totalPages = data ? Math.ceil(data.total / pageSize) : 0
+
+  return (
+    <div className="space-y-3">
+      {msg && (
+        <Alert variant={msg.type === 'error' ? 'destructive' : 'success'} className="py-2">
+          {msg.type === 'error' ? <AlertCircle className="h-4 w-4" /> : <CheckCircle className="h-4 w-4" />}
+          <AlertDescription>{msg.text}</AlertDescription>
+        </Alert>
+      )}
+
+      <div className="flex items-center gap-2">
+        <Button size="sm" variant="outline" onClick={load} disabled={loading}>
+          <RefreshCw className={`w-3.5 h-3.5 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新
+        </Button>
+        <Button size="sm" onClick={() => { setAddDoc(true); setJsonText('{\n  \n}') }}>
+          <Plus className="w-3.5 h-3.5 mr-1" />添加文档
+        </Button>
+        <span className="text-xs text-muted-foreground ml-auto">共 {data?.total ?? 0} 条 · 第 {page}/{totalPages || 1} 页</span>
+      </div>
+
+      <div className="space-y-2">
+        {loading && !data ? (
+          <div className="text-center py-8"><Loader2 className="w-4 h-4 animate-spin inline-block" /></div>
+        ) : !data?.rows?.length ? (
+          <p className="text-center py-8 text-muted-foreground text-sm">暂无文档</p>
+        ) : data.rows.map((doc: any, i: number) => (
+          <Card key={doc._id || i} className="overflow-hidden">
+            <CardContent className="p-3">
+              <div className="flex items-start justify-between gap-2">
+                <pre className="text-xs font-mono flex-1 overflow-x-auto whitespace-pre-wrap break-all">{JSON.stringify(doc, null, 2)}</pre>
+                <div className="flex flex-col gap-1 shrink-0">
+                  <Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={() => {
+                    setEditDoc(doc)
+                    setAddDoc(false)
+                    setJsonText(JSON.stringify(doc, null, 2))
+                  }}><Pencil className="w-3 h-3" /></Button>
+                  <Button size="sm" variant="ghost" className="h-6 w-6 p-0 text-destructive" onClick={() => handleDelete(doc)}><Trash2 className="w-3 h-3" /></Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          <Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage((p: number) => p - 1)}><ChevronLeft className="w-4 h-4" /></Button>
+          <span className="text-xs text-muted-foreground">{page} / {totalPages}</span>
+          <Button size="sm" variant="outline" disabled={page >= totalPages} onClick={() => setPage((p: number) => p + 1)}><ChevronRight className="w-4 h-4" /></Button>
+        </div>
+      )}
+
+      <Dialog open={editDoc !== null || addDoc} onOpenChange={(open) => { if (!open) { setEditDoc(null); setAddDoc(false) } }}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader><DialogTitle>{addDoc ? '添加文档' : '编辑文档'}</DialogTitle></DialogHeader>
+          <textarea
+            value={jsonText}
+            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setJsonText(e.target.value)}
+            className="w-full h-60 font-mono text-xs p-3 border rounded-md resize-none bg-background"
+            spellCheck={false}
+          />
+          <DialogFooter>
+            <DialogClose asChild><Button variant="outline" size="sm">取消</Button></DialogClose>
+            <Button size="sm" onClick={() => handleSave(addDoc)}><Save className="w-3.5 h-3.5 mr-1" />保存</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/client/src/pages/database/index.tsx

@@ -0,0 +1 @@
+export { default } from './database-page'

package/client/src/pages/database/json-field.tsx

@@ -0,0 +1,11 @@
+import type { ChangeEvent } from 'react'
+import { Input } from '../../components/ui/input'
+
+export function JsonField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="space-y-1">
+      <label className="text-xs font-medium text-muted-foreground">{label}</label>
+      <Input value={value} onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} className="font-mono text-xs" />
+    </div>
+  )
+}