@zhin.js/console 1.0.51 → 1.0.52

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

@@ -0,0 +1,133 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Save, Loader2, AlertCircle, CheckCircle, X } from 'lucide-react'
+import { Badge } from '../../components/ui/badge'
+import { Button } from '../../components/ui/button'
+import { Alert, AlertDescription } from '../../components/ui/alert'
+import { CodeEditor } from './code-editor'
+import { getFileIcon } from './file-icons'
+import { getLanguage } from './language'
+
+export function FileEditor({
+  filePath,
+  readFile,
+  saveFile,
+  onClose,
+}: {
+  filePath: string
+  readFile: (path: string) => Promise<string>
+  saveFile: (path: string, content: string) => Promise<unknown>
+  onClose: () => void
+}) {
+  const [content, setContent] = useState('')
+  const [originalContent, setOriginalContent] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+
+  const loadContent = useCallback(async () => {
+    setLoading(true)
+    setMessage(null)
+    try {
+      const text = await readFile(filePath)
+      setContent(text)
+      setOriginalContent(text)
+    } catch (err) {
+      setMessage({ type: 'error', text: `加载失败: ${err instanceof Error ? err.message : '未知错误'}` })
+    } finally {
+      setLoading(false)
+    }
+  }, [filePath, readFile])
+
+  useEffect(() => {
+    loadContent()
+  }, [loadContent])
+
+  const handleSave = useCallback(async () => {
+    setSaving(true)
+    setMessage(null)
+    try {
+      await saveFile(filePath, content)
+      setOriginalContent(content)
+      setMessage({ type: 'success', text: '已保存' })
+      setTimeout(() => setMessage(null), 3000)
+    } catch (err) {
+      setMessage({ type: 'error', text: `保存失败: ${err instanceof Error ? err.message : '未知错误'}` })
+    } finally {
+      setSaving(false)
+    }
+  }, [filePath, content, saveFile])
+
+  const dirty = content !== originalContent
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault()
+        if (dirty && !saving) void handleSave()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [dirty, saving, handleSave])
+
+  const fileName = filePath.split('/').pop() || filePath
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+        <span className="ml-2 text-sm text-muted-foreground">加载中...</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30">
+        <div className="flex items-center gap-2">
+          {getFileIcon(fileName)}
+          <span className="text-sm font-medium">{filePath}</span>
+          {dirty && <Badge variant="secondary" className="text-[10px] px-1.5 py-0">未保存</Badge>}
+        </div>
+        <div className="flex items-center gap-1">
+          <Button size="sm" variant="ghost" onClick={onClose} title="关闭">
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {message && (
+        <Alert variant={message.type === 'error' ? 'destructive' : 'success'} className="mx-4 mt-2 py-2">
+          {message.type === 'error'
+            ? <AlertCircle className="h-4 w-4" />
+            : <CheckCircle className="h-4 w-4" />}
+          <AlertDescription>{message.text}</AlertDescription>
+        </Alert>
+      )}
+
+      <div className="flex-1 min-h-0">
+        <CodeEditor
+          value={content}
+          onChange={setContent}
+          language={getLanguage(fileName)}
+        />
+      </div>
+
+      <div className="flex items-center gap-2 px-4 py-2 border-t bg-muted/30">
+        <Button size="sm" onClick={() => void handleSave()} disabled={saving || !dirty}>
+          {saving
+            ? <><Loader2 className="w-4 h-4 mr-1 animate-spin" />保存中...</>
+            : <><Save className="w-4 h-4 mr-1" />保存</>}
+        </Button>
+        {dirty && (
+          <Button variant="outline" size="sm" onClick={() => setContent(originalContent)}>
+            撤销更改
+          </Button>
+        )}
+        <span className="text-xs text-muted-foreground ml-auto">
+          {content.split('\n').length} 行 · Ctrl+S 保存
+        </span>
+      </div>
+    </div>
+  )
+}

package/client/src/pages/files/file-icons.tsx

@@ -0,0 +1,25 @@
+import { File, FileCode } from 'lucide-react'
+
+export function getFileIcon(name: string) {
+  const ext = name.split('.').pop()?.toLowerCase()
+  switch (ext) {
+    case 'ts':
+    case 'tsx':
+      return <FileCode className="w-4 h-4 text-blue-500" />
+    case 'js':
+    case 'jsx':
+      return <FileCode className="w-4 h-4 text-yellow-500" />
+    case 'json':
+      return <File className="w-4 h-4 text-green-500" />
+    case 'yml':
+    case 'yaml':
+      return <File className="w-4 h-4 text-red-400" />
+    case 'md':
+      return <File className="w-4 h-4 text-gray-400" />
+    case 'env':
+      return <File className="w-4 h-4 text-orange-500" />
+    default:
+      if (name.startsWith('.env')) return <File className="w-4 h-4 text-orange-500" />
+      return <File className="w-4 h-4 text-muted-foreground" />
+  }
+}

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

@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import { useFiles } from '@zhin.js/client'
+import { FolderOpen, Loader2, RefreshCw, AlertCircle } from 'lucide-react'
+import { Card, CardContent } from '../../components/ui/card'
+import { Button } from '../../components/ui/button'
+import { Alert, AlertDescription } from '../../components/ui/alert'
+import { ScrollArea } from '../../components/ui/scroll-area'
+import { useHljsTheme } from './use-hljs-theme'
+import { TreeNode } from './tree-node'
+import { FileEditor } from './file-editor'
+
+export default function FileManagePage() {
+  useHljsTheme()
+  const { tree, loading, error, loadTree, readFile, saveFile } = useFiles()
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+
+  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">
+            浏览和编辑工作空间中的配置文件和源代码
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => loadTree()} 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">
+        <CardContent className="p-0">
+          <div className="flex" style={{ height: '600px' }}>
+            <div className="w-64 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">文件浏览器</span>
+              </div>
+              <ScrollArea className="flex-1">
+                <div className="py-1">
+                  {loading && tree.length === 0 ? (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : tree.length === 0 ? (
+                    <p className="text-sm text-muted-foreground text-center py-8">暂无文件</p>
+                  ) : (
+                    tree.map((node) => (
+                      <TreeNode
+                        key={node.path}
+                        node={node}
+                        selectedPath={selectedFile}
+                        onSelect={setSelectedFile}
+                      />
+                    ))
+                  )}
+                </div>
+              </ScrollArea>
+            </div>
+
+            <div className="flex-1 min-w-0">
+              {selectedFile ? (
+                <FileEditor
+                  key={selectedFile}
+                  filePath={selectedFile}
+                  readFile={readFile}
+                  saveFile={saveFile}
+                  onClose={() => setSelectedFile(null)}
+                />
+              ) : (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  <div className="text-center">
+                    <FolderOpen className="w-12 h-12 mx-auto mb-3 opacity-30" />
+                    <p className="text-sm">在左侧选择一个文件开始编辑</p>
+                    <p className="text-xs mt-1 opacity-60">支持 .env、src/、package.json 等关键文件</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/client/src/pages/files/hljs-global.d.ts

@@ -0,0 +1,10 @@
+export {}
+
+declare global {
+  interface Window {
+    hljs?: {
+      highlight: (code: string, options: { language: string }) => { value: string }
+      getLanguage: (name: string) => unknown
+    }
+  }
+}

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

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

package/client/src/pages/files/language.ts

@@ -0,0 +1,18 @@
+export function getLanguage(fileName: string): string | null {
+  const name = fileName.split('/').pop()?.toLowerCase() || ''
+  if (name === '.env' || name.startsWith('.env.')) return 'ini'
+  const ext = name.split('.').pop()?.toLowerCase()
+  switch (ext) {
+    case 'ts': case 'tsx': return 'typescript'
+    case 'js': case 'jsx': return 'javascript'
+    case 'css': return 'css'
+    case 'scss': return 'scss'
+    case 'less': return 'less'
+    case 'json': return 'json'
+    case 'yml': case 'yaml': return 'yaml'
+    case 'md': return 'markdown'
+    case 'xml': case 'html': return 'xml'
+    case 'sh': case 'bash': return 'bash'
+    default: return null
+  }
+}

package/client/src/pages/files/tree-node.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react'
+import type { FileTreeNode } from '@zhin.js/client'
+import { FolderOpen, ChevronRight, ChevronDown } from 'lucide-react'
+import { getFileIcon } from './file-icons'
+
+export function TreeNode({
+  node,
+  selectedPath,
+  onSelect,
+  depth = 0,
+}: {
+  node: FileTreeNode
+  selectedPath: string | null
+  onSelect: (path: string) => void
+  depth?: number
+}) {
+  const [expanded, setExpanded] = useState(depth < 1)
+  const isSelected = node.path === selectedPath
+  const isDir = node.type === 'directory'
+
+  return (
+    <div>
+      <button
+        className={`
+          w-full flex items-center gap-1.5 px-2 py-1 text-sm rounded-sm text-left
+          hover:bg-accent transition-colors
+          ${isSelected ? 'bg-accent text-accent-foreground font-medium' : ''}
+        `}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        onClick={() => {
+          if (isDir) {
+            setExpanded(!expanded)
+          } else {
+            onSelect(node.path)
+          }
+        }}
+      >
+        {isDir ? (
+          expanded ? (
+            <ChevronDown className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+          )
+        ) : (
+          <span className="w-3.5" />
+        )}
+        {isDir ? (
+          <FolderOpen className="w-4 h-4 shrink-0 text-amber-500" />
+        ) : (
+          getFileIcon(node.name)
+        )}
+        <span className="truncate">{node.name}</span>
+      </button>
+      {isDir && expanded && node.children && (
+        <div>
+          {node.children.map((child) => (
+            <TreeNode
+              key={child.path}
+              node={child}
+              selectedPath={selectedPath}
+              onSelect={onSelect}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/client/src/pages/files/use-hljs-theme.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import { HLJS_CDN } from './editor-constants'
+
+export function useHljsTheme() {
+  useEffect(() => {
+    const linkId = 'hljs-theme-css'
+    let link = document.getElementById(linkId) as HTMLLinkElement | null
+    if (!link) {
+      link = document.createElement('link')
+      link.id = linkId
+      link.rel = 'stylesheet'
+      document.head.appendChild(link)
+    }
+    const update = () => {
+      const isDark = document.documentElement.classList.contains('dark')
+      link!.href = `${HLJS_CDN}/${isDark ? 'github-dark' : 'github'}.min.css`
+    }
+    update()
+    const obs = new MutationObserver(update)
+    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => obs.disconnect()
+  }, [])
+}

package/client/src/pages/logs.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState, useRef } from 'react'
-import { Info, AlertTriangle, XCircle, Circle, Trash2, RefreshCw, FileText, AlertCircle } from 'lucide-react'
+import { useEffect, useState, useRef, useMemo } from 'react'
+import { Info, AlertTriangle, XCircle, Circle, Trash2, RefreshCw, FileText, AlertCircle, Copy, Search } from 'lucide-react'
 import { apiFetch } from '../utils/auth'
 import { Card, CardContent } from '../components/ui/card'
 import { Badge } from '../components/ui/badge'
@@ -9,6 +9,7 @@ import { Skeleton } from '../components/ui/skeleton'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select'
 import { Checkbox } from '../components/ui/checkbox'
 import { cn } from '@zhin.js/client'
+import { PageHeader } from '../components/PageHeader'
 
 interface LogEntry {
   level: 'info' | 'warn' | 'error'
@@ -31,7 +32,19 @@ export default function LogsPage() {
   const [levelFilter, setLevelFilter] = useState<string>('all')
   const [autoScroll, setAutoScroll] = useState(true)
   const logsEndRef = useRef<HTMLDivElement>(null)
-  const [prevLogCount, setPrevLogCount] = useState(0)
+  const prevRawLogCountRef = useRef(0)
+  const [textFilter, setTextFilter] = useState('')
+
+  const filteredLogs = useMemo(() => {
+    const q = textFilter.trim().toLowerCase()
+    if (!q) return logs
+    return logs.filter(
+      (l) =>
+        l.message.toLowerCase().includes(q) ||
+        l.source.toLowerCase().includes(q) ||
+        l.level.toLowerCase().includes(q),
+    )
+  }, [logs, textFilter])
 
   useEffect(() => {
     fetchLogs()
@@ -41,11 +54,11 @@ export default function LogsPage() {
   }, [levelFilter])
 
   useEffect(() => {
-    if (autoScroll && logs.length > prevLogCount) {
+    if (autoScroll && logs.length > prevRawLogCountRef.current) {
       logsEndRef.current?.scrollIntoView({ behavior: 'smooth' })
     }
-    setPrevLogCount(logs.length)
-  }, [logs, autoScroll])
+    prevRawLogCountRef.current = logs.length
+  }, [logs.length, autoScroll])
 
   const fetchLogs = async () => {
     try {
@@ -105,13 +118,20 @@ export default function LogsPage() {
     )
   }
 
+  const copyLine = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch {
+      // ignore
+    }
+  }
+
   return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">系统日志</h1>
-        <p className="text-sm text-muted-foreground">实时查看系统运行日志</p>
-      </div>
+    <div className="space-y-6">
+      <PageHeader
+        title="系统日志"
+        description="实时查看与筛选系统运行日志；支持按级别与关键字过滤。"
+      />
 
       {/* Stats */}
       {stats && (
@@ -144,9 +164,19 @@ export default function LogsPage() {
       )}
 
       {/* Toolbar */}
-      <Card>
+      <Card className="border-border/80 shadow-sm">
         <CardContent className="flex justify-between items-center p-3 flex-wrap gap-3">
           <div className="flex items-center gap-3 flex-wrap">
+            <div className="relative flex-1 min-w-[180px] max-w-xs">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+              <input
+                type="search"
+                placeholder="搜索消息、来源…"
+                value={textFilter}
+                onChange={(e) => setTextFilter(e.target.value)}
+                className="w-full h-9 pl-9 pr-3 rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+            </div>
             <Select value={levelFilter} onValueChange={setLevelFilter}>
               <SelectTrigger className="w-32">
                 <SelectValue placeholder="所有级别" />
@@ -184,9 +214,9 @@ export default function LogsPage() {
       </Card>
 
       {/* Logs */}
-      <Card>
+      <Card className="border-border/80 shadow-sm">
         <CardContent className="p-4">
-          <div className="max-h-[600px] overflow-y-auto rounded-md bg-muted/30 p-2 space-y-1.5">
+          <div className="max-h-[min(70vh,720px)] overflow-y-auto rounded-md border border-border/60 bg-muted/20 dark:bg-muted/30 p-2 space-y-1.5">
             {error ? (
               <Alert variant="destructive">
                 <AlertCircle className="h-4 w-4" />
@@ -197,24 +227,49 @@ export default function LogsPage() {
                 <FileText className="w-12 h-12 text-muted-foreground/30" />
                 <span className="text-sm text-muted-foreground">暂无日志</span>
               </div>
+            ) : filteredLogs.length === 0 ? (
+              <div className="flex flex-col items-center gap-2 py-10 text-sm text-muted-foreground">
+                没有符合「{textFilter}」的条目，请调整筛选条件
+              </div>
             ) : (
-              logs.map((log, index) => {
+              filteredLogs.map((log, index) => {
                 const style = getLevelStyle(log.level)
+                const lineText = `[${log.timestamp}] [${log.level}] ${log.source ? log.source + ' ' : ''}${log.message}`
                 return (
                   <div
                     key={`${log.timestamp}-${index}`}
-                    className={cn("p-3 rounded-md bg-background border-l-[3px]", style.border)}
+                    className={cn(
+                      'group relative p-3 rounded-md border border-border/50 bg-card/80 dark:bg-card/60 shadow-sm',
+                      'border-l-[3px]',
+                      style.border,
+                    )}
                   >
-                    <div className="flex items-center gap-2 mb-1">
-                      <Badge variant={style.badge} className="gap-1 text-[10px] px-1.5 py-0">
+                    <div className="flex items-center gap-2 mb-1 flex-wrap pr-8">
+                      <Badge variant={style.badge} className="gap-1 text-[10px] px-1.5 py-0 font-medium">
                         {style.icon} {log.level.toUpperCase()}
                       </Badge>
-                      <span className="text-[11px] text-muted-foreground">
+                      <span className="text-[11px] tabular-nums text-muted-foreground">
                         {new Date(log.timestamp).toLocaleString()}
                       </span>
-                      {log.source && <Badge variant="outline" className="text-[10px] px-1.5 py-0">{log.source}</Badge>}
+                      {log.source && (
+                        <Badge variant="outline" className="text-[10px] px-1.5 py-0 font-normal">
+                          {log.source}
+                        </Badge>
+                      )}
                     </div>
-                    <p className="text-sm font-mono whitespace-pre-wrap break-words">{log.message}</p>
+                    <p className="text-[13px] leading-relaxed font-mono text-foreground/95 whitespace-pre-wrap break-words pr-2">
+                      {log.message}
+                    </p>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="absolute top-2 right-2 h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
+                      title="复制本行"
+                      onClick={() => void copyLine(lineText)}
+                    >
+                      <Copy className="w-3.5 h-3.5" />
+                    </Button>
                   </div>
                 )
               })