feat(web): 更新侧边栏和顶部导航组件，新增日志趋势图表组件，增强前端展示能力

2026-05-15 09:36:17 +00:00
parent e9735f1606
commit 3a3000cacd
3 changed files with 192 additions and 5 deletions
--- a/web/src/components/charts/LogTrendChart.vue
+++ 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>