深色系AI日志监控页面：垂直时间轴与四色编码设计

By admin, 15 April, 2026

角色

assistant

content

```json
{
"summary": "设计了一个深色系、极具科技感的 AI 应用日志监控页面。采用垂直时间轴布局，将最新日志置于顶部。通过色彩编码区分四种核心日志类型：模型参数（深灰）、提示词（翠绿）、工具调用（靛蓝）和报错信息（玫瑰红）。使用了 JetBrains Mono 字体增强代码阅读体验，并加入微动效和毛玻璃效果提升视觉深度。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>AI Application Live Logs</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=…\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #0b0f1a;\n --card-bg: rgba(23, 28, 41, 0.8);\n --border-color: rgba(255, 255, 255, 0.08);\n }\n body {\n background-color: var(--bg-color);\n color: #e2e8f0;\n font-family: 'Inter', sans-serif;\n background-image: \n radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);\n background-size: 40px 40px;\n }\n .mono {\n font-family: 'JetBrains Mono', monospace;\n }\n .timeline-line {\n position: absolute;\n left: 27px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: linear-gradient(to bottom, #3b82f6 0%, #1e293b 100%);\n }\n .log-card {\n background: var(--card-bg);\n backdrop-filter: blur(12px);\n border: 1px solid var(--border-color);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .log-card:hover {\n border-color: rgba(59, 130, 246, 0.5);\n transform: translateX(4px);\n box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);\n }\n .pulse-dot {\n animation: pulse 2s infinite;\n }\n @keyframes pulse {\n 0% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.5); opacity: 0.5; }\n 100% { transform: scale(1); opacity: 1; }\n }\n .code-block {\n background: rgba(0, 0, 0, 0.3);\n border-radius: 6px;\n padding: 12px;\n font-size: 0.875rem;\n border-left: 3px solid #3b82f6;\n }\n </style>\n</head>\n<body class=\"antialiased\">\n <div class=\"max-w-5xl mx-auto py-12 px-6\">\n \n <header class=\"mb-12 flex justify-between items-end\">\n <div>\n <h1 class=\"text-3xl font-bold tracking-tight text-white mb-2\">应用运行日志</h1>\n <p class=\"text-slate-400 flex items-center gap-2\">\n <span class=\"relative flex h-3 w-3\">\n <span class=\"pulse-dot absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75\"></span>\n <span class=\"relative inline-flex rounded-full h-3 w-3 bg-emerald-600\"></span>\n </span>\n 实时监控中 · 节点: Node-Cluster-01\n </p>\n </div>\n <div class=\"flex gap-3\">\n <button class=\"px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-sm font-medium transition-colors border border-slate-700\">\n <i class=\"fas fa-download mr-2\"></i>导出日志\n </button>\n <button class=\"px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-sm font-medium transition-colors\">\n <i class=\"fas fa-filter mr-2\"></i>筛选类型\n </button>\n </div>\n </header>\n\n \n <div class=\"relative\">\n <div class=\"timeline-line\"></div>\n\n \n <div class=\"relative pl-16 mb-10\">\n <div class=\"absolute left-0 top-2 w-14 flex justify-center\">\n <div class=\"w-10 h-10 rounded-full bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center text-rose-500 z-10 bg-slate-900\">\n <i class=\"fas fa-exclamation-triangle\"></i>\n </div>\n </div>\n <div class=\"log-card p-6 rounded-xl\">\n <div class=\"flex justify-between items-start mb-4\">\n <div>\n <span class=\"px-2 py-1 rounded bg-rose-500/10 text-rose-500 text-xs font-bold uppercase tracking-wider\">Error</span>\n <h3 class=\"text-lg font-semibold text-white mt-2\">API 调用超时</h3>\n </div>\n <time class=\"text-slate-500 text-sm mono\">2023-10-27 14:22:05.124</time>\n </div>\n <div class=\"code-block border-rose-500 text-rose-200 mono\">\n <p>FetchError: network timeout at: https://api.openai.com/v1/chat/completions</p>\n <p class=\"mt-2 opacity-60 text-xs\">at /app/node_modules/node-fetch/lib/index.js:1461:11</p>\n </div>\n </div>\n </div>\n\n \n <div class=\"relative pl-16 mb-10\">\n <div class=\"absolute left-0 top-2 w-14 flex justify-center\">\n <div class=\"w-10 h-10 rounded-full bg-indigo-500/20 border-2 border-indigo-500 flex items-center justify-center text-indigo-400 z-10 bg-slate-900\">\n <i class=\"fas fa-wrench\"></i>\n </div>\n </div>\n <div class=\"log-card p-6 rounded-xl\">\n <div class=\"flex justify-between items-start mb-4\">\n <div>\n <span class=\"px-2 py-1 rounded bg-indigo-500/10 text-indigo-400 text-xs font-bold uppercase tracking-wider\">Tool Call</span>\n <h3 class=\"text-lg font-semibold text-white mt-2\">执行外部工具: get_weather_data</h3>\n </div>\n <time class=\"text-slate-500 text-sm mono\">2023-10-27 14:21:58.890</time>\n </div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"code-block border-indigo-500\">\n <span class=\"text-indigo-400 text-xs block mb-1 uppercase\">Arguments</span>\n <code class=\"text-slate-300\">{ \"location\": \"Shanghai\", \"unit\": \"celsius\" }</code>\n </div>\n <div class=\"code-block border-emerald-500\">\n <span class=\"text-emerald-400 text-xs block mb-1 uppercase\">Response</span>\n <code class=\"text-slate-300\">{ \"temp\": 22, \"condition\": \"Sunny\" }</code>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"relative pl-16 mb-10\">\n <div class=\"absolute left-0 top-2 w-14 flex justify-center\">\n <div class=\"w-10 h-10 rounded-full bg-emerald-500/20 border-2 border-emerald-500 flex items-center justify-center text-emerald-400 z-10 bg-slate-900\">\n <i class=\"fas fa-comment-dots\"></i>\n </div>\n </div>\n <div class=\"log-card p-6 rounded-xl\">\n <div class=\"flex justify-between items-start mb-4\">\n <div>\n <span class=\"px-2 py-1 rounded bg-emerald-500/10 text-emerald-400 text-xs font-bold uppercase tracking-wider\">Prompt</span>\n <h3 class=\"text-lg font-semibold text-white mt-2\">用户输入与系统提示词</h3>\n </div>\n <time class=\"text-slate-500 text-sm mono\">2023-10-27 14:21:55.002</time>\n </div>\n <div class=\"space-y-3\">\n <div class=\"p-4 bg-slate-900/50 rounded-lg border border-slate-800\">\n <span class=\"text-xs text-slate-500 block mb-1\">System Message</span>\n <p class=\"text-slate-300 italic\">\"你是一个专业的助手，请根据用户提供的地理位置查询天气并给出穿衣建议。\"</p>\n </div>\n <div class=\"p-4 bg-slate-900/50 rounded-lg border border-slate-800\">\n <span class=\"text-xs text-slate-500 block mb-1\">User Message</span>\n <p class=\"text-white\">\"帮我看看上海现在的天气怎么样？\"</p>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"relative pl-16 mb-10\">\n <div class=\"absolute left-0 top-2 w-14 flex justify-center\">\n <div class=\"w-10 h-10 rounded-full bg-slate-500/20 border-2 border-slate-500 flex items-center justify-center text-slate-400 z-10 bg-slate-900\">\n <i class=\"fas fa-microchip\"></i>\n </div>\n </div>\n <div class=\"log-card p-6 rounded-xl\">\n <div class=\"flex justify-between items-start mb-4\">\n <div>\n <span class=\"px-2 py-1 rounded bg-slate-500/10 text-slate-400 text-xs font-bold uppercase tracking-wider\">Model Info</span>\n <h3 class=\"text-lg font-semibold text-white mt-2\">会话初始化参数</h3>\n </div>\n <time class=\"text-slate-500 text-sm mono\">2023-10-27 14:21:54.450</time>\n </div>\n <div class=\"flex flex-wrap gap-4\">\n <div class=\"flex items-center gap-3 px-4 py-2 bg-slate-900/80 rounded-lg border border-slate-800\">\n <i class=\"fas fa-robot text-blue-400\"></i>\n <div>\n <p class=\"text-[10px] text-slate-500 uppercase\">Model</p>\n <p class=\"text-sm font-medium text-slate-200\">gpt-4-turbo-preview</p>\n </div>\n </div>\n <div class=\"flex items-center gap-3 px-4 py-2 bg-slate-900/80 rounded-lg border border-slate-800\">\n <i class=\"fas fa-layer-group text-purple-400\"></i>\n <div>\n <p class=\"text-[10px] text-slate-500 uppercase\">App Type</p>\n <p class=\"text-sm font-medium text-slate-200\">Conversational Agent</p>\n </div>\n </div>\n <div class=\"flex items-center gap-3 px-4 py-2 bg-slate-900/80 rounded-lg border border-slate-800\">\n <i class=\"fas fa-thermometer-half text-orange-400\"></i>\n <div>\n <p class=\"text-[10px] text-slate-500 uppercase\">Temperature</p>\n <p class=\"text-sm font-medium text-slate-200\">0.7</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n \n <footer class=\"mt-12 pt-8 border-t border-slate-800 flex justify-between text-slate-500 text-xs mono\">\n <div class=\"flex gap-6\">\n <span>TOTAL LOGS: 1,284</span>\n <span>ERRORS: 12 (0.9%)</span>\n <span>AVG LATENCY: 1.2s</span>\n </div>\n <div>\n SYSTEM UPTIME: 14D 2H 45M\n </div>\n </footer>\n </div>\n</body>\n</html>"
},
"next": [
"集成日志实时搜索",
"添加Token消耗统计",
"支持错误堆栈展开",
"实现日志自动滚动",
"增加多模型对比视图"
],
"breakpoint": "none"
}
```

total_tokens

9834

summary

设计了一个深色系、极具科技感的 AI 应用日志监控页面。采用垂直时间轴布局，将最新日志置于顶部。通过色彩编码区分四种核心日志类型：模型参数（深灰）、提示词（翠绿）、工具调用（靛蓝）和报错信息（玫瑰红）。使用了 JetBrains Mono 字体增强代码阅读体验，并加入微动效和毛玻璃效果提升视觉深度。

uiParsing

关闭