96 lines (77 loc) · 2.93 KB

日志查看功能实现总结

完成时间

2026-02-19 16:08

实现内容

1. 类型定义更新 (`types/index.ts`)

在 LogEntry 接口中添加了 component 字段（可选），用于标识日志来源组件

2. API Mock 数据 (`lib/api.ts`)

新增 getInstanceLogs(instanceId, limit) 方法
生成真实感的 OpenClaw 日志数据，包含：
- 组件：gateway, telegram, session, anthropic, rate-limit, websocket
- 日志级别：INFO, WARN, ERROR
- 时间戳：分布在过去 1 小时内
- 真实的消息内容（如 "listening on ws://[::1]:18789"）

3. 日志查看组件 (`components/log-viewer.tsx`)

创建了功能完整的终端风格日志查看器，包含：

UI 特性：

终端风格：黑底 (bg-gray-950)，等宽字体 (font-mono)
颜色编码：
- INFO: 白色
- WARN: 黄色 (text-yellow-400)
- ERROR: 红色 (text-red-400)
- 时间戳: 灰色 (text-gray-500)
- 组件名: 青色 (text-cyan-400)

功能特性：

搜索/过滤：支持按关键词和日志级别筛选
自动滚动：可切换自动滚动到底部
手动刷新：独立的刷新按钮
日志计数：显示过滤后的日志数量
高度固定：600px，超出部分滚动查看
悬停高亮：鼠标悬停时行背景变化

4. 实例详情页改造 (`app/instances/[id]/page.tsx`)

添加了 Tab 导航：Overview 和 Logs
现有内容移到 "Overview" tab
新增 "Logs" tab 展示日志查看器
延迟加载：只有切换到 Logs tab 时才加载日志数据
独立的加载状态：日志加载不影响实例详情展示

技术细节

状态管理

activeTab: 控制当前显示的 tab
logs: 存储日志数据
logsLoading: 日志加载状态
autoScroll: 自动滚动开关
searchQuery: 搜索关键词
levelFilter: 日志级别过滤

性能优化

使用 useRef 管理滚动容器
按需加载日志（只在切换到 Logs tab 时加载）
前端过滤，避免频繁请求后端

UI/UX 优化

响应式设计：搜索框和按钮在小屏幕上垂直排列
平滑过渡：tab 切换和按钮状态变化有动画
清晰反馈：显示过滤结果数量，空状态提示
可访问性：按钮禁用状态视觉明确

验证结果

✅ pnpm dev 成功启动 ✅ Next.js 16.1.6 编译通过（Ready in 982ms） ✅ 无 TypeScript 错误 ✅ 无运行时错误

后续优化建议

实时日志流
- 集成 WebSocket 实现日志实时推送
- 添加暂停/恢复功能
日志导出
- 支持导出为 .txt 或 .log 文件
- 支持复制选中的日志行
高级过滤
- 时间范围选择
- 正则表达式搜索
- 多组件同时筛选
性能优化
- 虚拟滚动（处理大量日志）
- 日志分页加载
- 压缩显示（折叠重复日志）
后端集成
- 替换 mock 数据为真实 API
- 实现服务器端过滤和搜索
- 支持日志持久化存储