@zhin.js/console 1.0.51 → 1.0.53

package/client/src/pages/database/kv-bucket-view.tsx

@@ -0,0 +1,169 @@
+import { useState, useEffect, useCallback } from 'react'
+import type { KvEntry } from '@zhin.js/client'
+import { Plus, Trash2, Pencil, RefreshCw, Loader2, AlertCircle, CheckCircle, Save, Key } from 'lucide-react'
+import { Button } from '../../components/ui/button'
+import { Alert, AlertDescription } from '../../components/ui/alert'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '../../components/ui/dialog'
+import { Input } from '../../components/ui/input'
+import type { ChangeEvent } from 'react'
+
+export function KvBucketView({
+  tableName,
+  kvGet: _kvGet,
+  kvSet,
+  kvDelete,
+  kvEntries,
+}: {
+  tableName: string
+  kvGet: (table: string, key: string) => Promise<{ key: string; value: any }>
+  kvSet: (table: string, key: string, value: any, ttl?: number) => Promise<any>
+  kvDelete: (table: string, key: string) => Promise<any>
+  kvEntries: (table: string) => Promise<{ entries: KvEntry[] }>
+}) {
+  const [entries, setEntries] = useState<KvEntry[]>([])
+  const [loading, setLoading] = useState(false)
+  const [msg, setMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+  const [editEntry, setEditEntry] = useState<KvEntry | null>(null)
+  const [addEntry, setAddEntry] = useState(false)
+  const [keyInput, setKeyInput] = useState('')
+  const [valueInput, setValueInput] = useState('')
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setMsg(null)
+    try {
+      const result = await kvEntries(tableName)
+      setEntries(result.entries)
+    } catch (err) {
+      setMsg({ type: 'error', text: (err as Error).message })
+    } finally {
+      setLoading(false)
+    }
+  }, [tableName, kvEntries])
+
+  useEffect(() => { load() }, [load])
+
+  const handleSave = async (isNew: boolean) => {
+    try {
+      let val: any
+      try { val = JSON.parse(valueInput) } catch { val = valueInput }
+      await kvSet(tableName, keyInput, val)
+      setMsg({ type: 'success', text: isNew ? '添加成功' : '更新成功' })
+      setEditEntry(null)
+      setAddEntry(false)
+      setKeyInput('')
+      setValueInput('')
+      setTimeout(() => setMsg(null), 2000)
+      await load()
+    } catch (err) {
+      setMsg({ type: 'error', text: (err as Error).message })
+    }
+  }
+
+  const handleDelete = async (key: string) => {
+    if (!confirm(`确定要删除键 "${key}" 吗？`)) return
+    try {
+      await kvDelete(tableName, key)
+      setMsg({ type: 'success', text: '删除成功' })
+      setTimeout(() => setMsg(null), 2000)
+      await load()
+    } catch (err) {
+      setMsg({ type: 'error', text: (err as Error).message })
+    }
+  }
+
+  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={() => { setAddEntry(true); setKeyInput(''); setValueInput('') }}>
+          <Plus className="w-3.5 h-3.5 mr-1" />添加键值
+        </Button>
+        <span className="text-xs text-muted-foreground ml-auto">共 {entries.length} 个键</span>
+      </div>
+
+      <div
+        className="border rounded-md max-h-[min(60vh,560px)] overflow-auto overscroll-contain touch-pan-x touch-pan-y bg-card"
+        role="region"
+        aria-label="键值表，可左右滑动"
+      >
+        <table className="text-sm border-collapse min-w-full w-max">
+          <thead className="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm">
+            <tr className="border-b border-border/80">
+              <th className="px-3 py-2 text-left font-medium text-muted-foreground whitespace-nowrap min-w-[8rem]">Key</th>
+              <th className="px-3 py-2 text-left font-medium text-muted-foreground whitespace-nowrap min-w-[12rem]">Value</th>
+              <th className="px-3 py-2 text-right font-medium text-muted-foreground whitespace-nowrap w-24 min-w-[5.5rem]">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading && !entries.length ? (
+              <tr><td colSpan={3} className="text-center py-8"><Loader2 className="w-4 h-4 animate-spin inline-block" /></td></tr>
+            ) : !entries.length ? (
+              <tr><td colSpan={3} className="text-center py-8 text-muted-foreground">暂无数据</td></tr>
+            ) : entries.map((entry) => (
+              <tr key={entry.key} className="border-b border-border/60 hover:bg-muted/30 transition-colors">
+                <td className="px-3 py-1.5 font-mono text-xs whitespace-nowrap align-top">
+                  <Key className="w-3 h-3 inline-block mr-1 text-muted-foreground shrink-0" />
+                  {entry.key}
+                </td>
+                <td className="px-3 py-1.5 font-mono text-xs whitespace-nowrap align-top" title={typeof entry.value === 'object' ? JSON.stringify(entry.value) : String(entry.value ?? '')}>
+                  {typeof entry.value === 'object' ? JSON.stringify(entry.value) : String(entry.value ?? '')}
+                </td>
+                <td className="px-3 py-1.5 text-right space-x-1 whitespace-nowrap">
+                  <Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={() => {
+                    setEditEntry(entry)
+                    setAddEntry(false)
+                    setKeyInput(entry.key)
+                    setValueInput(typeof entry.value === 'object' ? JSON.stringify(entry.value, null, 2) : String(entry.value ?? ''))
+                  }}><Pencil className="w-3 h-3" /></Button>
+                  <Button size="sm" variant="ghost" className="h-6 w-6 p-0 text-destructive" onClick={() => handleDelete(entry.key)}><Trash2 className="w-3 h-3" /></Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <Dialog open={editEntry !== null || addEntry} onOpenChange={(open) => { if (!open) { setEditEntry(null); setAddEntry(false) } }}>
+        <DialogContent className="max-w-md">
+          <DialogHeader><DialogTitle>{addEntry ? '添加键值' : '编辑键值'}</DialogTitle></DialogHeader>
+          <div className="space-y-3 py-2">
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-muted-foreground">Key</label>
+              <Input value={keyInput} onChange={(e: ChangeEvent<HTMLInputElement>) => setKeyInput(e.target.value)} className="font-mono text-xs" disabled={!addEntry} />
+            </div>
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-muted-foreground">Value (JSON 或纯文本)</label>
+              <textarea
+                value={valueInput}
+                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValueInput(e.target.value)}
+                className="w-full h-32 font-mono text-xs p-3 border rounded-md resize-none bg-background"
+                spellCheck={false}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild><Button variant="outline" size="sm">取消</Button></DialogClose>
+            <Button size="sm" onClick={() => handleSave(addEntry)}><Save className="w-3.5 h-3.5 mr-1" />保存</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/client/src/pages/database/related-table-view.tsx

@@ -0,0 +1,221 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import type { TableInfo, SelectResult } from '@zhin.js/client'
+import { Plus, Trash2, Pencil, RefreshCw, Loader2, AlertCircle, CheckCircle, ChevronLeft, ChevronRight, Save } from 'lucide-react'
+import { Button } from '../../components/ui/button'
+import { Alert, AlertDescription } from '../../components/ui/alert'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '../../components/ui/dialog'
+import { JsonField } from './json-field'
+
+export function RelatedTableView({
+  tableName,
+  tableInfo,
+  select,
+  insert,
+  update,
+  remove,
+}: {
+  tableName: string
+  tableInfo?: TableInfo
+  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 [editRow, setEditRow] = useState<any>(null)
+  const [addRow, setAddRow] = useState(false)
+  const [formData, setFormData] = useState<Record<string, string>>({})
+  const pageSize = 50
+
+  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 columns = useMemo(() => {
+    if (tableInfo?.columns) return Object.keys(tableInfo.columns)
+    if (data?.rows?.length) return Object.keys(data.rows[0])
+    return []
+  }, [tableInfo, data])
+
+  const primaryKey = useMemo(() => {
+    if (!tableInfo?.columns) return columns[0] || 'id'
+    const pk = Object.entries(tableInfo.columns).find(([, col]: [string, any]) => col.primary)
+    return pk ? pk[0] : columns[0] || 'id'
+  }, [tableInfo, columns])
+
+  const handleSave = async (isNew: boolean) => {
+    try {
+      const row: any = {}
+      for (const col of columns) {
+        const val = formData[col]
+        if (val === undefined || val === '') continue
+        try { row[col] = JSON.parse(val) } catch { row[col] = val }
+      }
+      if (isNew) {
+        await insert(tableName, row)
+      } else {
+        const where: any = { [primaryKey]: editRow[primaryKey] }
+        await update(tableName, row, where)
+      }
+      setMsg({ type: 'success', text: isNew ? '添加成功' : '更新成功' })
+      setEditRow(null)
+      setAddRow(false)
+      setFormData({})
+      setTimeout(() => setMsg(null), 2000)
+      await load()
+    } catch (err) {
+      setMsg({ type: 'error', text: (err as Error).message })
+    }
+  }
+
+  const handleDelete = async (row: any) => {
+    if (!confirm('确定要删除这条记录吗？')) return
+    try {
+      await remove(tableName, { [primaryKey]: row[primaryKey] })
+      setMsg({ type: 'success', text: '删除成功' })
+      setTimeout(() => setMsg(null), 2000)
+      await load()
+    } catch (err) {
+      setMsg({ type: 'error', text: (err as Error).message })
+    }
+  }
+
+  const openEdit = (row: any) => {
+    setEditRow(row)
+    setAddRow(false)
+    const fd: Record<string, string> = {}
+    for (const col of columns) {
+      fd[col] = typeof row[col] === 'object' ? JSON.stringify(row[col]) : String(row[col] ?? '')
+    }
+    setFormData(fd)
+  }
+
+  const openAdd = () => {
+    setEditRow(null)
+    setAddRow(true)
+    const fd: Record<string, string> = {}
+    for (const col of columns) fd[col] = ''
+    setFormData(fd)
+  }
+
+  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={openAdd}><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="border rounded-md max-h-[min(70vh,720px)] overflow-auto overscroll-contain scroll-smooth touch-pan-x touch-pan-y bg-card"
+        role="region"
+        aria-label="数据表，可左右滑动查看宽表"
+      >
+        <table className="text-sm border-collapse min-w-full w-max">
+          <thead className="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm shadow-sm">
+            <tr className="border-b">
+              {columns.map((col: string) => (
+                <th
+                  key={col}
+                  className="px-3 py-2 text-left font-medium text-muted-foreground whitespace-nowrap border-b border-border/80"
+                >
+                  {col}
+                </th>
+              ))}
+              <th className="px-3 py-2 text-right font-medium text-muted-foreground whitespace-nowrap border-b border-border/80 w-24 min-w-[5.5rem]">
+                操作
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading && !data ? (
+              <tr><td colSpan={columns.length + 1} className="text-center py-8"><Loader2 className="w-4 h-4 animate-spin inline-block" /></td></tr>
+            ) : !data?.rows?.length ? (
+              <tr><td colSpan={columns.length + 1} className="text-center py-8 text-muted-foreground">暂无数据</td></tr>
+            ) : data.rows.map((row: any, i: number) => (
+              <tr key={i} className="border-b border-border/60 hover:bg-muted/30 transition-colors">
+                {columns.map((col: string) => (
+                  <td
+                    key={col}
+                    className="px-3 py-1.5 font-mono text-xs whitespace-nowrap align-top"
+                    title={typeof row[col] === 'object' ? JSON.stringify(row[col]) : String(row[col] ?? '')}
+                  >
+                    {typeof row[col] === 'object' ? JSON.stringify(row[col]) : String(row[col] ?? '')}
+                  </td>
+                ))}
+                <td className="px-3 py-1.5 text-right space-x-1 whitespace-nowrap w-24 min-w-[5.5rem]">
+                  <Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={() => openEdit(row)}><Pencil className="w-3 h-3" /></Button>
+                  <Button size="sm" variant="ghost" className="h-6 w-6 p-0 text-destructive" onClick={() => handleDelete(row)}><Trash2 className="w-3 h-3" /></Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </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={editRow !== null || addRow} onOpenChange={(open) => { if (!open) { setEditRow(null); setAddRow(false) } }}>
+        <DialogContent className="max-w-md max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{addRow ? '添加记录' : '编辑记录'}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {columns.map((col: string) => (
+              <JsonField
+                key={col}
+                label={col}
+                value={formData[col] ?? ''}
+                onChange={(v: string) => setFormData((prev: Record<string, string>) => ({ ...prev, [col]: v }))}
+              />
+            ))}
+          </div>
+          <DialogFooter>
+            <DialogClose asChild><Button variant="outline" size="sm">取消</Button></DialogClose>
+            <Button size="sm" onClick={() => handleSave(addRow)}><Save className="w-3.5 h-3.5 mr-1" />保存</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/client/src/pages/env.tsx

@@ -4,7 +4,8 @@ import {
   KeyRound, AlertCircle, CheckCircle, Save, Loader2,
   RefreshCw, FileWarning, Eye, EyeOff
 } from 'lucide-react'
-import { Card, CardContent } from '../components/ui/card'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'
+import { PageHeader } from '../components/PageHeader'
 import { Badge } from '../components/ui/badge'
 import { Button } from '../components/ui/button'
 import { Alert, AlertDescription } from '../components/ui/alert'
@@ -141,7 +142,7 @@ function EnvFileEditor({
   )
 }
 
-export default function EnvMangePage() {
+export default function EnvManagePage() {
   const { files, loading, error, listFiles, getFile, saveFile } = useEnvFiles()
   const [activeTab, setActiveTab] = useState('.env')
 
@@ -155,9 +156,9 @@ export default function EnvMangePage() {
 
   if (loading && files.length === 0) {
     return (
-      <div className="space-y-4">
-        <h1 className="text-2xl font-bold tracking-tight">环境变量</h1>
-        <div className="flex items-center justify-center py-12">
+      <div className="space-y-6">
+        <PageHeader title="环境变量" description="加载文件列表…" />
+        <div className="flex items-center justify-center py-12 rounded-lg border border-dashed">
           <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
           <span className="ml-2 text-sm text-muted-foreground">加载中...</span>
         </div>
@@ -166,19 +167,17 @@ export default function EnvMangePage() {
   }
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">环境变量</h1>
-          <p className="text-sm text-muted-foreground mt-1">
-            管理 .env 文件中的环境变量，修改后需重启生效
-          </p>
-        </div>
-        <Button variant="outline" size="sm" onClick={handleRefresh} disabled={loading}>
-          <RefreshCw className={`w-4 h-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
-          刷新
-        </Button>
-      </div>
+    <div className="space-y-6">
+      <PageHeader
+        title="环境变量"
+        description="管理 .env / .env.* 中的键值；含 PASSWORD、TOKEN、SECRET 等关键字的行可在未编辑时自动遮罩显示。保存后需重启进程生效。"
+        actions={
+          <Button variant="outline" size="sm" onClick={handleRefresh} disabled={loading}>
+            <RefreshCw className={`w-4 h-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+        }
+      />
 
       {error && (
         <Alert variant="destructive" className="py-2">
@@ -187,12 +186,12 @@ export default function EnvMangePage() {
         </Alert>
       )}
 
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList>
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList className="w-full justify-start flex-wrap h-auto gap-1 bg-muted/40 p-1">
           {['.env', '.env.development', '.env.production'].map(name => {
             const fileInfo = files.find(f => f.name === name)
             return (
-              <TabsTrigger key={name} value={name} className="gap-1.5">
+              <TabsTrigger key={name} value={name} className="gap-1.5 data-[state=active]:shadow-sm">
                 <KeyRound className="w-3.5 h-3.5" />
                 {name}
                 {fileInfo && !fileInfo.exists && (
@@ -204,13 +203,24 @@ export default function EnvMangePage() {
         </TabsList>
 
         {['.env', '.env.development', '.env.production'].map(name => (
-          <TabsContent key={name} value={name}>
-            <EnvFileEditor
-              filename={name}
-              getFile={getFile}
-              saveFile={saveFile}
-              exists={files.find(f => f.name === name)?.exists ?? false}
-            />
+          <TabsContent key={name} value={name} className="mt-0">
+            <Card className="border-border/80 shadow-sm">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base font-semibold">{name}</CardTitle>
+                <CardDescription>
+                  键值对一行一条，格式 <code className="rounded bg-muted px-1 py-0.5 text-xs">KEY=VALUE</code>
+                  ；编辑时始终显示真实内容，保存前请确认环境安全。
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <EnvFileEditor
+                  filename={name}
+                  getFile={getFile}
+                  saveFile={saveFile}
+                  exists={files.find(f => f.name === name)?.exists ?? false}
+                />
+              </CardContent>
+            </Card>
           </TabsContent>
         ))}
       </Tabs>

package/client/src/pages/files/code-editor.tsx

@@ -0,0 +1,85 @@
+import { useMemo, useCallback, useRef, type KeyboardEvent } from 'react'
+import { editorFontStyle } from './editor-constants'
+export function CodeEditor({
+  value,
+  onChange,
+  language,
+}: {
+  value: string
+  onChange: (v: string) => void
+  language: string | null
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const preRef = useRef<HTMLPreElement>(null)
+
+  const highlighted = useMemo(() => {
+    if (window.hljs && language && window.hljs.getLanguage(language)) {
+      try {
+        return window.hljs.highlight(value, { language }).value
+      } catch { /* fallback */ }
+    }
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+  }, [value, language])
+
+  const handleScroll = useCallback(() => {
+    if (preRef.current && textareaRef.current) {
+      preRef.current.scrollTop = textareaRef.current.scrollTop
+      preRef.current.scrollLeft = textareaRef.current.scrollLeft
+    }
+  }, [])
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Tab') {
+        e.preventDefault()
+        const ta = e.currentTarget
+        const start = ta.selectionStart
+        const end = ta.selectionEnd
+        const next = value.substring(0, start) + '  ' + value.substring(end)
+        onChange(next)
+        requestAnimationFrame(() => {
+          ta.selectionStart = ta.selectionEnd = start + 2
+        })
+      }
+    },
+    [value, onChange],
+  )
+
+  return (
+    <div className="relative h-full w-full overflow-hidden">
+      <pre
+        ref={preRef}
+        className="absolute inset-0 m-0 p-4 overflow-auto pointer-events-none"
+        style={editorFontStyle}
+        aria-hidden
+      >
+        <code
+          className={language ? `hljs language-${language}` : ''}
+          dangerouslySetInnerHTML={{ __html: highlighted + '\n' }}
+          style={{ background: 'transparent', padding: 0, display: 'block' }}
+        />
+      </pre>
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onScroll={handleScroll}
+        onKeyDown={handleKeyDown}
+        wrap="off"
+        className="absolute inset-0 w-full h-full resize-none p-4 bg-transparent outline-none border-0"
+        style={{
+          ...editorFontStyle,
+          color: 'transparent',
+          caretColor: 'hsl(var(--foreground))',
+          WebkitTextFillColor: 'transparent',
+        }}
+        spellCheck={false}
+        autoCapitalize="off"
+        autoCorrect="off"
+      />
+    </div>
+  )
+}

package/client/src/pages/files/editor-constants.ts

@@ -0,0 +1,9 @@
+export const HLJS_CDN = 'https://cdn.jsdelivr.net.cn/npm/@highlightjs/cdn-assets@11/styles'
+
+export const editorFontStyle = {
+  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  fontSize: '13px',
+  lineHeight: '20px',
+  tabSize: 2,
+  whiteSpace: 'pre' as const,
+}