feat(web): 新增日志详情和日志列表页面，包含完整的视图组件和业务脚本逻辑

web/src/views/LogDetailView.vue

@@ -0,0 +1,363 @@
+<template>
+  <section class="log-detail-page">
+    <div class="detail-scroll">
+      <article v-if="loading" class="panel detail-state">
+        <i class="mdi mdi-loading mdi-spin"></i>
+        <strong>正在加载日志详情</strong>
+        <p>系统正在读取当前记录的结构化信息。</p>
+      </article>
+
+      <article v-else-if="error" class="panel detail-state error">
+        <i class="mdi mdi-alert-circle-outline"></i>
+        <strong>日志详情加载失败</strong>
+        <p>{{ error }}</p>
+        <button type="button" @click="loadDetail">重新加载</button>
+      </article>
+
+      <template v-else-if="isHermes && hermesRun">
+        <article class="detail-hero panel">
+          <div class="hero-copy">
+            <div class="hero-tags">
+              <span class="level-pill" :class="resolveLevelTone(resolveRunLevel(hermesRun))">
+                {{ resolveRunLevel(hermesRun) }}
+              </span>
+              <span class="status-pill" :class="resolveStatusTone(hermesRun.status)">
+                {{ resolveStatusLabel(hermesRun.status) }}
+              </span>
+            </div>
+            <h2>{{ resolveRunTitle(hermesRun) }}</h2>
+            <p>{{ hermesRun.result_summary || '暂无运行摘要。' }}</p>
+          </div>
+          <button class="refresh-btn" type="button" :disabled="loading" @click="loadDetail">
+            <i class="mdi mdi-refresh"></i>
+            <span>刷新详情</span>
+          </button>
+        </article>
+
+        <div class="detail-grid">
+          <article class="panel detail-card wide">
+            <div class="card-head">
+              <h3>基本信息</h3>
+              <p>围绕当前 Hermes 任务查看关键字段。</p>
+            </div>
+            <div class="info-grid">
+              <div><span>Trace ID</span><strong>{{ hermesRun.run_id }}</strong></div>
+              <div><span>开始时间</span><strong>{{ formatDateTime(hermesRun.started_at) }}</strong></div>
+              <div><span>结束时间</span><strong>{{ formatDateTime(hermesRun.finished_at) }}</strong></div>
+              <div><span>来源</span><strong>{{ resolveRunSourceLabel(hermesRun.source) }}</strong></div>
+              <div><span>模块</span><strong>{{ resolveRunModuleLabel(hermesRun) }}</strong></div>
+              <div><span>当前进度</span><strong>{{ resolveRunProgress(hermesRun) }}</strong></div>
+            </div>
+          </article>
+
+          <article class="panel detail-card">
+            <div class="card-head">
+              <h3>处理链路</h3>
+              <p>按工具调用顺序查看执行链。</p>
+            </div>
+            <div v-if="(hermesRun.tool_calls || []).length" class="trace-steps">
+              <button
+                v-for="(toolCall, index) in hermesRun.tool_calls || []"
+                :key="toolCall.id"
+                type="button"
+                class="trace-step"
+                :class="{ active: selectedToolCall?.id === toolCall.id }"
+                @click="selectedToolCallId = toolCall.id"
+              >
+                <span class="step-index">{{ index + 1 }}</span>
+                <div class="step-copy">
+                  <strong>{{ toolCall.tool_name }}</strong>
+                  <span>{{ toolCall.tool_type }} · {{ toolCall.duration_ms }}ms</span>
+                </div>
+                <span class="status-pill" :class="resolveToolStatusTone(toolCall.status)">
+                  {{ toolCall.status }}
+                </span>
+              </button>
+            </div>
+            <div v-else class="inline-empty">当前运行暂无 ToolCall 明细。</div>
+          </article>
+
+          <article v-if="selectedToolCall" class="panel detail-card">
+            <div class="card-head">
+              <h3>当前 ToolCall</h3>
+              <p>查看当前工具调用的请求与返回。</p>
+            </div>
+            <div class="payload-grid">
+              <div>
+                <h4>请求参数</h4>
+                <pre class="code-block">{{ formatJson(selectedToolCall.request_json) }}</pre>
+              </div>
+              <div>
+                <h4>返回结果</h4>
+                <pre class="code-block">{{ formatJson(selectedToolCall.response_json) }}</pre>
+              </div>
+            </div>
+          </article>
+
+          <article class="panel detail-card wide">
+            <div class="card-head">
+              <h3>路由上下文</h3>
+              <p>保留 Hermes 路由与进度原文，便于管理员核查。</p>
+            </div>
+            <pre class="code-block large">{{ formatJson(hermesRun.route_json) }}</pre>
+          </article>
+        </div>
+      </template>
+
+      <template v-else-if="isSystem && systemEntry">
+        <article class="detail-hero panel">
+          <div class="hero-copy">
+            <div class="hero-tags">
+              <span class="level-pill" :class="resolveSystemLevelTone(systemEntry.level)">
+                {{ systemEntry.level }}
+              </span>
+              <span class="status-pill" :class="resolveSystemOutcomeTone(systemEntry.outcome)">
+                {{ systemEntry.outcome }}
+              </span>
+            </div>
+            <h2>{{ systemEntry.summary || systemEntry.message }}</h2>
+            <p>{{ systemEntry.event_type }} · {{ systemEntry.logger || '未标记模块' }}</p>
+          </div>
+          <button class="refresh-btn" type="button" :disabled="loading" @click="loadDetail">
+            <i class="mdi mdi-refresh"></i>
+            <span>刷新详情</span>
+          </button>
+        </article>
+
+        <div class="detail-grid">
+          <article class="panel detail-card wide">
+            <div class="card-head">
+              <h3>解析结果</h3>
+              <p>按单条系统日志提取出的结构化字段。</p>
+            </div>
+            <div class="info-grid">
+              <div><span>发生时间</span><strong>{{ formatDateTime(systemEntry.timestamp) }}</strong></div>
+              <div><span>日志来源</span><strong>{{ systemEntry.source_file }} #{{ systemEntry.line_number }}</strong></div>
+              <div><span>模块</span><strong>{{ systemEntry.logger || '未标记' }}</strong></div>
+              <div><span>Request ID</span><strong>{{ systemEntry.request_id || '—' }}</strong></div>
+              <div><span>请求方法</span><strong>{{ systemEntry.method || '—' }}</strong></div>
+              <div><span>响应状态</span><strong>{{ systemEntry.status_code ?? '—' }}</strong></div>
+              <div><span>请求路径</span><strong>{{ systemEntry.path || '—' }}</strong></div>
+              <div><span>处理耗时</span><strong>{{ systemEntry.duration_ms == null ? '—' : `${systemEntry.duration_ms}ms` }}</strong></div>
+            </div>
+          </article>
+
+          <article class="panel detail-card">
+            <div class="card-head">
+              <h3>解析反馈</h3>
+              <p>系统对当前日志的归类与处理建议。</p>
+            </div>
+            <div class="feedback-grid">
+              <div><span>事件类型</span><strong>{{ systemEntry.event_type }}</strong></div>
+              <div><span>解析状态</span><strong>{{ resolveSystemParseLabel(systemEntry.parse_status) }}</strong></div>
+              <div><span>处理结果</span><strong>{{ systemEntry.outcome }}</strong></div>
+              <div><span>建议动作</span><strong>{{ resolveSystemRecommendation(systemEntry) }}</strong></div>
+            </div>
+          </article>
+
+          <article class="panel detail-card">
+            <div class="card-head">
+              <h3>原始日志</h3>
+              <p>保留该条记录的完整原文，便于排障核对。</p>
+            </div>
+            <pre class="code-block large">{{ systemEntry.raw }}</pre>
+          </article>
+        </div>
+      </template>
+    </div>
+
+    <footer class="detail-actions">
+      <button class="back-action" type="button" @click="backToLogs">
+        <i class="mdi mdi-arrow-left"></i>
+        <span>返回日志列表</span>
+      </button>
+    </footer>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { fetchAgentRunDetail } from '../services/agentAssets.js'
+import { fetchSystemLogEntry } from '../services/systemLogs.js'
+
+const SOURCE_LABELS = {
+  schedule: '定时任务',
+  system_event: '系统事件',
+  user_message: '用户触发'
+}
+
+const route = useRoute()
+const router = useRouter()
+const loading = ref(false)
+const error = ref('')
+const hermesRun = ref(null)
+const systemEntry = ref(null)
+const selectedToolCallId = ref('')
+
+const isHermes = computed(() => route.params.logKind === 'hermes')
+const isSystem = computed(() => route.params.logKind === 'system')
+const selectedToolCall = computed(() =>
+  (hermesRun.value?.tool_calls || []).find((item) => item.id === selectedToolCallId.value) || null
+)
+
+function formatDateTime(value) {
+  if (!value) return '未结束'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString('zh-CN', { hour12: false })
+}
+
+function formatJson(value) {
+  try {
+    return JSON.stringify(value || {}, null, 2)
+  } catch {
+    return String(value || '')
+  }
+}
+
+function resolveStatusLabel(status) {
+  if (status === 'running') return '运行中'
+  if (status === 'succeeded') return '已完成'
+  if (status === 'failed') return '失败'
+  if (status === 'blocked') return '待确认'
+  return status || '未知'
+}
+
+function resolveStatusTone(status) {
+  if (status === 'running') return 'warning'
+  if (status === 'succeeded') return 'success'
+  if (status === 'failed') return 'danger'
+  return 'muted'
+}
+
+function resolveToolStatusTone(status) {
+  return status === 'succeeded' ? 'success' : status === 'failed' ? 'danger' : 'warning'
+}
+
+function resolveRunSourceLabel(source) {
+  return SOURCE_LABELS[source] || source || '未标记'
+}
+
+function resolveRunModuleLabel(run) {
+  const routeJson = run?.route_json || {}
+  if (routeJson.job_type === 'llm_wiki_sync') return '知识归纳'
+  if (routeJson.selected_agent) return String(routeJson.selected_agent)
+  if (routeJson.folder) return String(routeJson.folder)
+  return resolveRunSourceLabel(run?.source)
+}
+
+function resolveRunTitle(run) {
+  const routeJson = run?.route_json || {}
+  if (routeJson.job_type === 'llm_wiki_sync') {
+    return `LLM Wiki 归纳 · ${routeJson.folder || '未指定目录'}`
+  }
+  return `Hermes 调用 · ${resolveRunModuleLabel(run)}`
+}
+
+function resolveRunLevel(run) {
+  const progress = run?.route_json?.progress || {}
+  if (run?.status === 'failed' || run?.error_message) return 'ERROR'
+  if (run?.status === 'blocked' || Number(progress.failed_documents || 0) > 0) return 'WARN'
+  return 'INFO'
+}
+
+function resolveLevelTone(level) {
+  if (level === 'ERROR') return 'danger'
+  if (level === 'WARN') return 'warning'
+  if (level === 'INFO') return 'info'
+  return 'muted'
+}
+
+function resolveRunProgress(run) {
+  const progress = run?.route_json?.progress || {}
+  const percent = Number(progress.percent || 0)
+  const completed = Number(progress.completed_documents || 0)
+  const total = Number(progress.total_documents || 0)
+  const failed = Number(progress.failed_documents || 0)
+  const stage = String(progress.current_stage || '').trim()
+  const stageLabelMap = {
+    document_started: '文档启动',
+    text_extracted: '文本已提取',
+    candidate_chunks_selected: '已筛正文',
+    extracting_candidates: '候选提炼中',
+    candidate_extraction_completed: '候选提炼完成',
+    document_completed: '文档完成',
+    skipped: '跳过'
+  }
+  const stageLabel = stageLabelMap[stage] || (stage || '等待中')
+  return total > 0
+    ? `${percent}% · ${completed}/${total} 文档 · ${stageLabel}${failed > 0 ? ` · 失败 ${failed}` : ''}`
+    : `${percent}% · ${stageLabel}`
+}
+
+function resolveSystemLevelTone(level) {
+  if (level === 'ERROR' || level === 'CRITICAL') return 'danger'
+  if (level === 'WARNING' || level === 'WARN') return 'warning'
+  if (level === 'INFO') return 'info'
+  return 'muted'
+}
+
+function resolveSystemOutcomeTone(outcome) {
+  if (outcome === '失败') return 'danger'
+  if (outcome === '异常' || outcome === '告警') return 'warning'
+  if (outcome === '成功') return 'success'
+  return 'muted'
+}
+
+function resolveSystemParseLabel(status) {
+  return status === 'parsed' ? '已结构化' : '待人工核查'
+}
+
+function resolveSystemRecommendation(entry) {
+  if (!entry) return '暂无'
+  if (entry.outcome === '失败') return '优先排查并关联上下游日志'
+  if (entry.outcome === '异常' || entry.outcome === '告警') return '建议继续关注同模块后续记录'
+  if (entry.parse_status !== 'parsed') return '建议人工核对原始日志'
+  return '无需额外处理'
+}
+
+function syncSelectedToolCall() {
+  const calls = hermesRun.value?.tool_calls || []
+  if (!calls.length) {
+    selectedToolCallId.value = ''
+    return
+  }
+  if (!calls.some((item) => item.id === selectedToolCallId.value)) {
+    selectedToolCallId.value = calls[0].id
+  }
+}
+
+async function loadDetail() {
+  loading.value = true
+  error.value = ''
+  try {
+    const id = String(route.params.logId || '')
+    if (isHermes.value) {
+      hermesRun.value = await fetchAgentRunDetail(id)
+      systemEntry.value = null
+      syncSelectedToolCall()
+      return
+    }
+    if (isSystem.value) {
+      systemEntry.value = await fetchSystemLogEntry(id)
+      hermesRun.value = null
+      return
+    }
+    throw new Error('不支持的日志类型。')
+  } catch (nextError) {
+    error.value = nextError?.message || '日志详情加载失败。'
+  } finally {
+    loading.value = false
+  }
+}
+
+function backToLogs() {
+  router.push({ name: 'app-logs' })
+}
+
+watch(() => [route.params.logKind, route.params.logId], loadDetail)
+onMounted(loadDetail)
+</script>
+
+<style scoped src="../assets/styles/views/log-detail-view.css"></style>

web/src/views/LogsView.vue

@@ -0,0 +1,263 @@
+<template>
+  <section class="logs-view">
+    <div v-if="!isAdmin" class="logs-empty panel">
+      <h2>日志管理仅管理员可用</h2>
+      <p>当前账号没有查看 Hermes 调用日志和系统运行日志的权限。</p>
+    </div>
+
+    <template v-else>
+      <article class="panel logs-console" :class="{ 'without-toolbar': activeTab === 'hermes' }">
+        <div class="console-tabs" role="tablist" aria-label="日志类型切换">
+          <button type="button" :class="{ active: activeTab === 'hermes' }" @click="activeTab = 'hermes'">
+            Hermes 运行日志
+          </button>
+          <button type="button" :class="{ active: activeTab === 'system' }" @click="activeTab = 'system'">
+            系统日志
+          </button>
+        </div>
+
+        <div v-if="activeTab === 'system'" class="console-toolbar">
+          <label class="filter-field search-field">
+            <span>关键词检索</span>
+            <div class="field-input">
+              <i class="pi pi-search"></i>
+              <input v-model.trim="systemSearchKeyword" type="search" placeholder="摘要 / 模块 / 请求路径 / Request ID" />
+            </div>
+          </label>
+
+          <label class="filter-field">
+            <span>日志级别</span>
+            <select v-model="systemLevelFilter">
+              <option value="">全部</option>
+              <option v-for="level in systemLevelOptions" :key="level" :value="level">
+                {{ level }}
+              </option>
+            </select>
+          </label>
+
+          <label class="filter-field">
+            <span>事件类型</span>
+            <select v-model="systemEventTypeFilter">
+              <option value="">全部</option>
+              <option v-for="eventType in systemEventTypeOptions" :key="eventType" :value="eventType">
+                {{ eventType }}
+              </option>
+            </select>
+          </label>
+
+          <button
+            type="button"
+            class="toolbar-btn primary"
+            :disabled="systemLogLoading"
+            @click="loadSystemLogs(true)"
+          >
+            {{ systemLogLoading ? '刷新中...' : '刷新日志' }}
+          </button>
+        </div>
+
+        <p class="hint">
+          <i class="mdi mdi-information-outline"></i>
+          点击任意行可查看日志详情
+        </p>
+
+        <div class="console-layout">
+          <section class="list-panel">
+            <div class="panel-heading">
+              <div>
+                <h3>{{ activeTab === 'hermes' ? '日志列表' : '系统日志列表' }}</h3>
+                <p>
+                  {{ activeTab === 'hermes'
+                    ? '每条运行记录按独立列展示，便于快速定位时间、模块、级别与状态。'
+                    : '按单条日志记录展示解析结果，点击任意一行可查看完整结构化详情。'
+                  }}
+                </p>
+              </div>
+              <button
+                v-if="activeTab === 'hermes'"
+                type="button"
+                class="toolbar-btn primary panel-refresh"
+                :disabled="hermesLoading"
+                @click="loadHermesRuns(true)"
+              >
+                {{ hermesLoading ? '刷新中...' : '刷新日志' }}
+              </button>
+            </div>
+
+            <div v-if="activeTab === 'hermes'" class="table-shell">
+              <table class="log-table">
+                <thead>
+                  <tr>
+                    <th>时间</th>
+                    <th>来源</th>
+                    <th>模块</th>
+                    <th>级别</th>
+                    <th>摘要</th>
+                    <th>Trace ID</th>
+                    <th>状态</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="run in visibleHermesRuns"
+                    :key="run.run_id"
+                    @click="selectRun(run.run_id)"
+                  >
+                    <td>{{ formatDateTime(run.started_at) }}</td>
+                    <td>Hermes</td>
+                    <td>{{ resolveRunModuleLabel(run) }}</td>
+                    <td>
+                      <span class="level-pill" :class="resolveLevelTone(resolveRunLevel(run))">
+                        {{ resolveRunLevel(run) }}
+                      </span>
+                    </td>
+                    <td class="summary-cell">
+                      <strong>{{ resolveRunTitle(run) }}</strong>
+                      <span>{{ formatSummary(run.result_summary) }}</span>
+                    </td>
+                    <td class="trace-cell">{{ run.run_id }}</td>
+                    <td>
+                      <span class="status-pill" :class="resolveStatusTone(run.status)">
+                        {{ resolveStatusLabel(run.status) }}
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+
+              <div v-if="!filteredHermesRuns.length" class="inline-empty">
+                {{ hermesLoading ? '正在加载 Hermes 运行日志...' : '当前筛选条件下没有 Hermes 记录。' }}
+              </div>
+            </div>
+
+            <div v-else class="table-shell">
+              <table class="log-table system-table">
+                <thead>
+                  <tr>
+                    <th>时间</th>
+                    <th>级别</th>
+                    <th>事件类型</th>
+                    <th>模块</th>
+                    <th>摘要</th>
+                    <th>Request ID</th>
+                    <th>结果</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="entry in visibleSystemLogEntries"
+                    :key="entry.id"
+                    @click="selectSystemLog(entry.id)"
+                  >
+                    <td>{{ formatDateTime(entry.timestamp) }}</td>
+                    <td>
+                      <span class="level-pill" :class="resolveSystemLevelTone(entry.level)">
+                        {{ entry.level }}
+                      </span>
+                    </td>
+                    <td>{{ entry.event_type }}</td>
+                    <td>{{ entry.logger || '未标记' }}</td>
+                    <td class="summary-cell">
+                      <strong>{{ entry.summary || entry.message }}</strong>
+                      <span>{{ formatSummary(entry.message) }}</span>
+                    </td>
+                    <td class="trace-cell">{{ entry.request_id || '—' }}</td>
+                    <td>
+                      <span class="status-pill" :class="resolveSystemOutcomeTone(entry.outcome)">
+                        {{ entry.outcome }}
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+
+              <div v-if="!filteredSystemLogEntries.length" class="inline-empty">
+                {{ systemLogLoading ? '正在加载系统日志...' : '当前筛选条件下没有系统日志记录。' }}
+              </div>
+            </div>
+
+            <div class="table-foot">
+              <span v-if="activeTab === 'hermes'">共 {{ totalCount }} 条 Hermes 日志，目前第 {{ currentPage }} 页</span>
+              <span v-else>共 {{ totalCount }} 条系统日志，目前第 {{ currentPage }} 页</span>
+              <div class="pager" aria-label="分页">
+                <button class="page-nav" type="button" :disabled="currentPage === 1" aria-label="上一页" @click="currentPage--">
+                  <i class="mdi mdi-chevron-left"></i>
+                </button>
+                <template v-for="page in visiblePageItems" :key="page === 'ellipsis' ? 'ellipsis' : page">
+                  <span v-if="page === 'ellipsis'" class="page-ellipsis" aria-hidden="true">...</span>
+                  <button
+                    v-else
+                    class="page-number"
+                    :class="{ active: currentPage === page }"
+                    type="button"
+                    :aria-current="currentPage === page ? 'page' : undefined"
+                    @click="currentPage = page"
+                  >
+                    {{ page }}
+                  </button>
+                </template>
+                <button class="page-nav" type="button" :disabled="currentPage === totalPages" aria-label="下一页" @click="currentPage++">
+                  <i class="mdi mdi-chevron-right"></i>
+                </button>
+              </div>
+              <div class="page-size-wrap">
+                <button class="page-size" type="button" @click="pageSizeOpen = !pageSizeOpen">
+                  {{ pageSize }} 条/页 <i class="mdi mdi-chevron-down"></i>
+                </button>
+                <div v-if="pageSizeOpen" class="page-size-dropdown" role="listbox">
+                  <button
+                    v-for="size in pageSizes"
+                    :key="size"
+                    type="button"
+                    role="option"
+                    :aria-selected="pageSize === size"
+                    :class="{ active: pageSize === size }"
+                    @click="changePageSize(size)"
+                  >
+                    {{ size }} 条/页
+                  </button>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <div v-if="activeTab === 'hermes'" class="analytics-row">
+            <section class="analytics-card trend-card">
+              <div class="analytics-head">
+                <div>
+                  <h3>日志趋势</h3>
+                  <p>近 8 个小时的 Hermes 运行量与失败量</p>
+                </div>
+              </div>
+              <LogTrendChart
+                :labels="trendSeries.labels"
+                :totals="trendSeries.totals"
+                :failures="trendSeries.failures"
+              />
+            </section>
+
+            <section class="analytics-card distribution-card">
+              <div class="analytics-head">
+                <div>
+                  <h3>级别分布</h3>
+                  <p>当前 Hermes 记录</p>
+                </div>
+              </div>
+              <DonutChart
+                :items="levelDistribution.items"
+                :center-value="`${levelDistribution.total}`"
+                center-label="日志总数"
+              />
+            </section>
+          </div>
+        </div>
+      </article>
+    </template>
+  </section>
+</template>
+
+<script>
+import viewModel from './scripts/LogsView.js'
+
+export default viewModel
+</script>
+<style scoped src="../assets/styles/views/logs-view.css"></style>

web/src/views/scripts/LogsView.js

@@ -0,0 +1,470 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import LogTrendChart from '../../components/charts/LogTrendChart.vue'
+import DonutChart from '../../components/charts/DonutChart.vue'
+import { fetchAgentRuns } from '../../services/agentAssets.js'
+import { fetchSystemLogEntries } from '../../services/systemLogs.js'
+import { useSystemState } from '../../composables/useSystemState.js'
+import { useToast } from '../../composables/useToast.js'
+import { isManagerUser } from '../../utils/accessControl.js'
+
+const POLL_INTERVAL_MS = 5000
+
+const SOURCE_LABELS = {
+  schedule: '定时任务',
+  system_event: '系统事件',
+  user_message: '用户触发'
+}
+
+function formatDateTime(value) {
+  if (!value) {
+    return '未结束'
+  }
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return String(value)
+  }
+
+  return date.toLocaleString('zh-CN', { hour12: false })
+}
+
+function resolveStatusLabel(status) {
+  if (status === 'running') {
+    return '运行中'
+  }
+  if (status === 'succeeded') {
+    return '已完成'
+  }
+  if (status === 'failed') {
+    return '失败'
+  }
+  if (status === 'blocked') {
+    return '待确认'
+  }
+  return status || '未知'
+}
+
+function resolveStatusTone(status) {
+  if (status === 'running') {
+    return 'warning'
+  }
+  if (status === 'succeeded') {
+    return 'success'
+  }
+  if (status === 'failed') {
+    return 'danger'
+  }
+  if (status === 'blocked') {
+    return 'muted'
+  }
+  return 'muted'
+}
+
+function resolveRunSourceLabel(source) {
+  return SOURCE_LABELS[source] || source || '未标记'
+}
+
+function resolveRunModuleLabel(run) {
+  const routeJson = run?.route_json || {}
+  if (routeJson.job_type === 'llm_wiki_sync') {
+    return '知识归纳'
+  }
+  if (routeJson.selected_agent) {
+    return String(routeJson.selected_agent)
+  }
+  if (routeJson.folder) {
+    return String(routeJson.folder)
+  }
+  return resolveRunSourceLabel(run?.source)
+}
+
+function resolveRunTitle(run) {
+  const routeJson = run?.route_json || {}
+  if (routeJson.job_type === 'llm_wiki_sync') {
+    return `LLM Wiki 归纳 · ${routeJson.folder || '未指定目录'}`
+  }
+  return `Hermes 调用 · ${resolveRunModuleLabel(run)}`
+}
+
+function resolveRunLevel(run) {
+  const progress = run?.route_json?.progress || {}
+  if (run?.status === 'failed' || run?.error_message) {
+    return 'ERROR'
+  }
+  if (run?.status === 'blocked' || Number(progress.failed_documents || 0) > 0) {
+    return 'WARN'
+  }
+  if (run?.status === 'running') {
+    return 'INFO'
+  }
+  return 'INFO'
+}
+
+function resolveLevelTone(level) {
+  if (level === 'ERROR') {
+    return 'danger'
+  }
+  if (level === 'WARN') {
+    return 'warning'
+  }
+  if (level === 'INFO') {
+    return 'info'
+  }
+  return 'muted'
+}
+
+function formatSummary(summary) {
+  const text = String(summary || '').trim()
+  if (!text) {
+    return '暂无摘要。'
+  }
+  if (text.length <= 64) {
+    return text
+  }
+  return `${text.slice(0, 64)}...`
+}
+
+function resolveSystemLevelTone(level) {
+  if (level === 'ERROR' || level === 'CRITICAL') {
+    return 'danger'
+  }
+  if (level === 'WARNING' || level === 'WARN') {
+    return 'warning'
+  }
+  if (level === 'INFO') {
+    return 'info'
+  }
+  return 'muted'
+}
+
+function resolveSystemOutcomeTone(outcome) {
+  if (outcome === '失败') {
+    return 'danger'
+  }
+  if (outcome === '异常' || outcome === '告警') {
+    return 'warning'
+  }
+  if (outcome === '成功') {
+    return 'success'
+  }
+  return 'muted'
+}
+
+function formatHourBucketLabel(date) {
+  return `${String(date.getHours()).padStart(2, '0')}:00`
+}
+
+function buildTrendSeries(runs) {
+  const parsedTimes = runs
+    .map((run) => new Date(run?.started_at))
+    .filter((date) => !Number.isNaN(date.getTime()))
+  const latest = parsedTimes.length ? new Date(Math.max(...parsedTimes.map((date) => date.getTime()))) : new Date()
+  latest.setMinutes(0, 0, 0)
+
+  const buckets = Array.from({ length: 8 }, (_, index) => {
+    const date = new Date(latest)
+    date.setHours(latest.getHours() - (7 - index))
+    return {
+      key: date.toISOString(),
+      label: formatHourBucketLabel(date),
+      total: 0,
+      failed: 0
+    }
+  })
+  const bucketMap = new Map(buckets.map((bucket) => [bucket.key, bucket]))
+
+  for (const run of runs) {
+    const date = new Date(run?.started_at)
+    if (Number.isNaN(date.getTime())) {
+      continue
+    }
+    date.setMinutes(0, 0, 0)
+    const bucket = bucketMap.get(date.toISOString())
+    if (!bucket) {
+      continue
+    }
+    bucket.total += 1
+    if (run.status === 'failed') {
+      bucket.failed += 1
+    }
+  }
+
+  return {
+    buckets,
+    labels: buckets.map((bucket) => bucket.label),
+    totals: buckets.map((bucket) => bucket.total),
+    failures: buckets.map((bucket) => bucket.failed)
+  }
+}
+
+export default {
+  name: 'LogsView',
+  components: {
+    LogTrendChart,
+    DonutChart
+  },
+  emits: ['summary-change'],
+  setup(_, { emit }) {
+    const router = useRouter()
+    const { currentUser } = useSystemState()
+    const { toast } = useToast()
+
+    const activeTab = ref('hermes')
+    const hermesLoading = ref(false)
+    const systemLogLoading = ref(false)
+    const hermesRuns = ref([])
+    const systemSearchKeyword = ref('')
+    const systemLevelFilter = ref('')
+    const systemEventTypeFilter = ref('')
+    const systemLogEntries = ref([])
+    const currentPage = ref(1)
+    const pageSize = ref(10)
+    const pageSizes = [10, 20, 50]
+    const pageSizeOpen = ref(false)
+    let pollTimer = 0
+
+    const isAdmin = computed(() => isManagerUser(currentUser.value))
+    const filteredHermesRuns = computed(() => hermesRuns.value)
+    const systemLevelOptions = computed(() =>
+      Array.from(new Set(systemLogEntries.value.map((entry) => entry.level).filter(Boolean)))
+    )
+    const systemEventTypeOptions = computed(() =>
+      Array.from(new Set(systemLogEntries.value.map((entry) => entry.event_type).filter(Boolean)))
+    )
+    const filteredSystemLogEntries = computed(() => {
+      const keyword = systemSearchKeyword.value.trim().toLowerCase()
+      return systemLogEntries.value.filter((entry) => {
+        if (systemLevelFilter.value && entry.level !== systemLevelFilter.value) {
+          return false
+        }
+        if (systemEventTypeFilter.value && entry.event_type !== systemEventTypeFilter.value) {
+          return false
+        }
+        if (!keyword) {
+          return true
+        }
+
+        const haystack = [
+          entry.summary,
+          entry.message,
+          entry.logger,
+          entry.request_id,
+          entry.path,
+          entry.event_type,
+          entry.outcome,
+          entry.source_file
+        ]
+          .filter(Boolean)
+          .join(' ')
+          .toLowerCase()
+        return haystack.includes(keyword)
+      })
+    })
+    const hermesRunCount = computed(() => hermesRuns.value.length)
+    const runningRunCount = computed(() => hermesRuns.value.filter((run) => run.status === 'running').length)
+    const completedRunCount = computed(() => hermesRuns.value.filter((run) => run.status === 'succeeded').length)
+    const failedRunCount = computed(() => hermesRuns.value.filter((run) => run.status === 'failed').length)
+    const trendSeries = computed(() => buildTrendSeries(filteredHermesRuns.value))
+    const levelDistribution = computed(() => {
+      const items = [
+        { level: 'INFO', count: 0, color: '#3b82f6' },
+        { level: 'WARN', count: 0, color: '#f59e0b' },
+        { level: 'ERROR', count: 0, color: '#ef4444' }
+      ]
+
+      for (const run of filteredHermesRuns.value) {
+        const item = items.find((candidate) => candidate.level === resolveRunLevel(run))
+        if (item) {
+          item.count += 1
+        }
+      }
+
+      const total = items.reduce((sum, item) => sum + item.count, 0)
+      return {
+        items: items.map((item) => ({
+          name: item.level,
+          value: item.count,
+          color: item.color,
+          display: total ? `${item.count} (${Math.round((item.count / total) * 100)}%)` : '0'
+        })),
+        total
+      }
+    })
+    const activeRows = computed(() =>
+      activeTab.value === 'hermes' ? filteredHermesRuns.value : filteredSystemLogEntries.value
+    )
+    const totalCount = computed(() => activeRows.value.length)
+    const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize.value)))
+    const visiblePageItems = computed(() => {
+      if (totalPages.value <= 6) {
+        return Array.from({ length: totalPages.value }, (_, index) => index + 1)
+      }
+      return [1, 2, 3, 4, 5, 'ellipsis', totalPages.value]
+    })
+    const visibleHermesRuns = computed(() => {
+      const start = (currentPage.value - 1) * pageSize.value
+      return filteredHermesRuns.value.slice(start, start + pageSize.value)
+    })
+    const visibleSystemLogEntries = computed(() => {
+      const start = (currentPage.value - 1) * pageSize.value
+      return filteredSystemLogEntries.value.slice(start, start + pageSize.value)
+    })
+
+    function changePageSize(size) {
+      pageSize.value = size
+      pageSizeOpen.value = false
+      currentPage.value = 1
+    }
+
+    async function loadHermesRuns() {
+      if (!isAdmin.value) {
+        return
+      }
+
+      hermesLoading.value = true
+      try {
+        const payload = await fetchAgentRuns({ agent: 'hermes', limit: 100 })
+        hermesRuns.value = Array.isArray(payload) ? payload : []
+      } catch (error) {
+        toast(error.message || 'Hermes 日志加载失败。')
+      } finally {
+        hermesLoading.value = false
+      }
+    }
+
+    function selectRun(runId) {
+      router.push({
+        name: 'app-log-detail',
+        params: { logKind: 'hermes', logId: runId }
+      })
+    }
+
+    async function loadSystemLogs() {
+      if (!isAdmin.value) {
+        return
+      }
+
+      systemLogLoading.value = true
+      try {
+        const payload = await fetchSystemLogEntries(300)
+        systemLogEntries.value = Array.isArray(payload) ? payload : []
+      } catch (error) {
+        toast(error.message || '系统日志加载失败。')
+      } finally {
+        systemLogLoading.value = false
+      }
+    }
+
+    function selectSystemLog(entryId) {
+      router.push({
+        name: 'app-log-detail',
+        params: { logKind: 'system', logId: entryId }
+      })
+    }
+
+    function startPolling() {
+      stopPolling()
+      pollTimer = window.setInterval(() => {
+        loadHermesRuns()
+        loadSystemLogs()
+      }, POLL_INTERVAL_MS)
+    }
+
+    function stopPolling() {
+      if (pollTimer) {
+        window.clearInterval(pollTimer)
+        pollTimer = 0
+      }
+    }
+
+    watch(
+      [
+        activeTab,
+        systemSearchKeyword,
+        systemLevelFilter,
+        systemEventTypeFilter
+      ],
+      () => {
+        currentPage.value = 1
+      }
+    )
+
+    watch(totalPages, (value) => {
+      if (currentPage.value > value) {
+        currentPage.value = value
+      }
+    })
+
+    watch(
+      () => [
+        hermesRunCount.value,
+        runningRunCount.value,
+        completedRunCount.value,
+        failedRunCount.value
+      ],
+      ([total, running, completed, failed]) => {
+        emit('summary-change', { total, running, completed, failed })
+      },
+      { immediate: true }
+    )
+
+    onMounted(async () => {
+      await loadHermesRuns()
+      await loadSystemLogs()
+      startPolling()
+    })
+
+    onBeforeUnmount(() => {
+      stopPolling()
+    })
+
+    return {
+      activeTab,
+      changePageSize,
+      completedRunCount,
+      failedRunCount,
+      filteredHermesRuns,
+      filteredSystemLogEntries,
+      formatDateTime,
+      formatSummary,
+      hermesLoading,
+      hermesRunCount,
+      hermesRuns,
+      isAdmin,
+      levelDistribution,
+      loadHermesRuns,
+      loadSystemLogs,
+      currentPage,
+      pageSize,
+      pageSizeOpen,
+      pageSizes,
+      resolveLevelTone,
+      resolveRunLevel,
+      resolveRunModuleLabel,
+      resolveRunSourceLabel,
+      resolveRunTitle,
+      resolveStatusLabel,
+      resolveStatusTone,
+      resolveSystemLevelTone,
+      resolveSystemOutcomeTone,
+      runningRunCount,
+      selectRun,
+      selectSystemLog,
+      systemEventTypeFilter,
+      systemEventTypeOptions,
+      systemLevelFilter,
+      systemLevelOptions,
+      systemLogEntries,
+      systemLogLoading,
+      systemSearchKeyword,
+      totalCount,
+      totalPages,
+      trendSeries,
+      visiblePageItems,
+      visibleHermesRuns,
+      visibleSystemLogEntries
+    }
+  }
+}