From 3a3000cacd7aff5df999483c89151c35c4d184c1 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Fri, 15 May 2026 09:36:17 +0000
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=9B=B4=E6=96=B0=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=92=8C=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E8=B6=8B=E5=8A=BF=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E5=89=8D=E7=AB=AF=E5=B1=95=E7=A4=BA=E8=83=BD?=
 =?UTF-8?q?=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/charts/LogTrendChart.vue | 152 ++++++++++++++++++++
 web/src/components/layout/SidebarRail.vue   |   1 +
 web/src/components/layout/TopBar.vue        |  44 +++++-
 3 files changed, 192 insertions(+), 5 deletions(-)
 create mode 100644 web/src/components/charts/LogTrendChart.vue

diff --git a/web/src/components/charts/LogTrendChart.vue b/web/src/components/charts/LogTrendChart.vue
new file mode 100644
index 0000000..db98a67
--- /dev/null
+++ b/web/src/components/charts/LogTrendChart.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="log-trend-chart">
+    <div class="chart-legend">
+      <span><i style="background:#10b981"></i>日志总量</span>
+      <span><i style="background:#ef4444"></i>失败数</span>
+    </div>
+    <div class="chart-body">
+      <Bar :data="chartData" :options="chartOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Bar } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Tooltip,
+  Legend
+} from 'chart.js'
+import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, Tooltip, Legend)
+
+const props = defineProps({
+  labels: { type: Array, required: true },
+  totals: { type: Array, required: true },
+  failures: { type: Array, required: true }
+})
+
+const progress = useAnimationProgress([
+  () => props.labels,
+  () => props.totals,
+  () => props.failures
+], 1000)
+
+const scaleSeries = (series) =>
+  series.map((value) => Math.round(Number(value || 0) * progress.value))
+
+const maxTotal = computed(() => Math.max(...props.totals.map((value) => Number(value || 0)), 1))
+
+const chartData = computed(() => ({
+  labels: props.labels,
+  datasets: [
+    {
+      label: '日志总量',
+      data: scaleSeries(props.totals),
+      backgroundColor: '#10b981',
+      borderRadius: 4,
+      barPercentage: 0.58,
+      categoryPercentage: 0.56,
+      order: 2
+    },
+    {
+      label: '失败数',
+      data: scaleSeries(props.failures),
+      borderColor: '#ef4444',
+      backgroundColor: 'transparent',
+      borderWidth: 2,
+      pointBackgroundColor: '#ffffff',
+      pointBorderColor: '#ef4444',
+      pointBorderWidth: 2,
+      pointRadius: 3,
+      pointHoverRadius: 5,
+      type: 'line',
+      order: 1
+    }
+  ]
+}))
+
+const chartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: {
+    duration: 900,
+    easing: 'easeOutQuart'
+  },
+  interaction: {
+    mode: 'index',
+    intersect: false
+  },
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      backgroundColor: 'rgba(255,255,255,0.96)',
+      titleColor: '#1e293b',
+      bodyColor: '#64748b',
+      borderColor: '#e2e8f0',
+      borderWidth: 1,
+      padding: 10,
+      boxPadding: 4,
+      cornerRadius: 6,
+      usePointStyle: true
+    }
+  },
+  scales: {
+    x: {
+      grid: { display: false },
+      ticks: {
+        color: '#64748b',
+        font: { size: 11 }
+      }
+    },
+    y: {
+      beginAtZero: true,
+      suggestedMax: Math.max(maxTotal.value, 4),
+      grid: { color: '#f1f5f9' },
+      ticks: {
+        color: '#64748b',
+        font: { size: 11 },
+        precision: 0
+      }
+    }
+  }
+}))
+</script>
+
+<style scoped>
+.log-trend-chart {
+  height: 208px;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-legend {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+  color: #475569;
+  font-size: 12px;
+}
+
+.chart-legend i {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 2px;
+  vertical-align: middle;
+}
+
+.chart-body {
+  flex: 1;
+  min-height: 0;
+}
+</style>
diff --git a/web/src/components/layout/SidebarRail.vue b/web/src/components/layout/SidebarRail.vue
index 7208d79..4aede72 100644
--- a/web/src/components/layout/SidebarRail.vue
+++ b/web/src/components/layout/SidebarRail.vue
@@ -74,6 +74,7 @@ const sidebarMeta = {
   approval: { label: '审批中心', badge: '12' },
   policies: { label: '知识管理' },
   audit: { label: '任务规则中心' },
+  logs: { label: '日志管理' },
   employees: { label: '员工管理' },
   settings: { label: '系统设置' }
 }
diff --git a/web/src/components/layout/TopBar.vue b/web/src/components/layout/TopBar.vue
index 55b680c..01ff6fc 100644
--- a/web/src/components/layout/TopBar.vue
+++ b/web/src/components/layout/TopBar.vue
@@ -100,11 +100,21 @@
       <template v-else-if="isRequests">
         <div class="kpi-chips">
           <div v-for="kpi in requestKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
-            <span class="chip-value">{{ kpi.value }}<small>单</small></span>
-            <span class="chip-label">{{ kpi.label }}</span>
-            <span class="chip-delta" :class="kpi.trend">{{ kpi.delta }} <i :class="kpi.arrow"></i></span>
-          </div>
-        </div>
+            <span class="chip-value">{{ kpi.value }}<small>单</small></span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.delta }} <i :class="kpi.arrow"></i></span>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="isLogs">
+        <div class="kpi-chips">
+          <div v-for="kpi in logsKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+            <span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
+          </div>
+        </div>
       </template>
 
       <template v-else-if="isApproval">
@@ -162,6 +172,10 @@ const props = defineProps({
     type: Object,
     default: () => null
   },
+  logsSummary: {
+    type: Object,
+    default: () => null
+  },
   requestSummary: {
     type: Object,
     default: () => null
@@ -170,6 +184,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  logDetailMode: {
+    type: Boolean,
+    default: false
+  },
   detailAlerts: {
     type: Array,
     default: () => []
@@ -193,6 +211,7 @@ const isChat = computed(() => props.activeView === 'chat')
 const isOverview = computed(() => props.activeView === 'overview')
 const isRequestDetail = computed(() => props.activeView === 'requests' && props.detailMode)
 const isRequests = computed(() => props.activeView === 'requests')
+const isLogs = computed(() => props.activeView === 'logs' && !props.logDetailMode)
 const isApproval = computed(() => props.activeView === 'approval')
 const isPolicies = computed(() => props.activeView === 'policies')
 const isEmployees = computed(() => props.activeView === 'employees')
@@ -211,6 +230,21 @@ const requestKpis = computed(() => {
     { label: '已完成', value: completed, delta: '已归档', trend: 'up', arrow: 'mdi mdi-arrow-up' , color: '#10b981' }
   ]
 })
+
+const logsKpis = computed(() => {
+  const summary = props.logsSummary ?? {}
+  const total = Number(summary.total ?? 0)
+  const running = Number(summary.running ?? 0)
+  const completed = Number(summary.completed ?? 0)
+  const failed = Number(summary.failed ?? 0)
+
+  return [
+    { label: 'Hermes 总任务', value: total, unit: '条', meta: '当前', trend: 'up', color: '#10b981' },
+    { label: '运行中', value: running, unit: '条', meta: running > 0 ? '实时执行' : '暂无执行', trend: running > 0 ? 'up' : 'down', color: '#3b82f6' },
+    { label: '已完成', value: completed, unit: '条', meta: total ? `占比 ${Math.round((completed / total) * 100)}%` : '等待数据', trend: 'up', color: '#10b981' },
+    { label: '失败数', value: failed, unit: '条', meta: failed > 0 ? '需要关注' : '运行正常', trend: failed > 0 ? 'down' : 'up', color: '#ef4444' }
+  ]
+})
 
 const chatKpis = [
   { label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: '#10b981' },