feat: 添加左侧实时执行日志面板

功能:
- 日志面板位于聊天区左侧,可折叠/展开
- 实时展示所有执行事件:
  - 🤔 模型思考过程
  - 📡 流式响应状态
  - 🔧 工具调用(参数+结果)
  - ⚠️ 错误和警告
  - ℹ️ Agent Loop 迭代
  -  操作完成
- 日志自动滚动、最大 500 条、可清空
- 等宽字体显示,按级别着色
- 头部新增日志开关按钮
This commit is contained in:
Metona Fix
2026-04-06 19:14:51 +08:00
parent dd5e789e35
commit 1033cefdfb
6 changed files with 369 additions and 2 deletions
+32 -1
View File
@@ -11,9 +11,40 @@
<body>
<div id="app">
<!-- ═══════════════ 日志面板(左侧)═══════════════ -->
<aside class="log-panel" id="logPanel" style="display:none;">
<div class="log-panel-header">
<span class="log-panel-title">📋 执行日志</span>
<div class="log-panel-actions">
<button class="icon-btn log-btn" id="btnClearLog" title="清空日志">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>
</button>
<button class="icon-btn log-btn" id="btnCloseLog" title="关闭日志">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
</div>
<div class="log-panel-body" id="logPanelBody"></div>
</aside>
<!-- ═══════════════ 主内容区 ═══════════════ -->
<div class="main-wrap" id="mainWrap">
<!-- ═══════════════ 顶部导航 ═══════════════ -->
<header class="app-header">
<div class="header-left">
<button class="icon-btn" id="btnToggleLog" title="执行日志">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
</svg>
</button>
<span class="logo">🦙</span>
<span class="app-title">Metona Ollama</span>
<span class="app-version">v3.0.0</span>
@@ -149,7 +180,7 @@
</button>
</div>
</div>
</div>
</div><!-- /.main-wrap -->
<!-- ═══════════════ 设置模态框 ═══════════════ -->
<div class="modal-overlay" id="settingsModal" style="display:none;">