feat: 统一后端分页查询与前端服务层适配

后端新增通用分页模块，为报销单、员工、预算、agent 资产等
端点统一接入分页参数和游标查询，优化 repository 层分页实
现，前端服务层适配分页响应结构，完善预算图表和全局样式，
优化侧边栏和企业选择器组件，引入 Element Plus 插件注册。

web/src/components/charts/LogTrendChart.vue

@@ -4,29 +4,21 @@
       <span><i :style="{ background: chartColors.primary }"></i>日志总量</span>
       <span><i :style="{ background: chartColors.danger }"></i>失败数</span>
     </div>
-    <div class="chart-body">
-      <Bar :data="chartData" :options="chartOptions" />
-    </div>
+    <div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></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'
+import { computed, shallowRef } from 'vue'
+import { BarChart as EChartsBarChart, LineChart as EChartsLineChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+
+import { useEcharts } from '../../composables/useEcharts.js'
 import { useThemeColors } from '../../composables/useThemeColors.js'
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, Tooltip, Legend)
+use([GridComponent, TooltipComponent, EChartsBarChart, EChartsLineChart, CanvasRenderer])
 
 const props = defineProps({
   labels: { type: Array, required: true },
@@ -34,96 +26,104 @@ const props = defineProps({
   failures: { type: Array, required: true }
 })
 
-const progress = useAnimationProgress([
-  () => props.labels,
-  () => props.totals,
-  () => props.failures
-], 1000)
+const chartElement = shallowRef(null)
 const themeColors = useThemeColors()
 const chartColors = computed(() => ({
   primary: themeColors.value.chartPrimary,
   danger: themeColors.value.chartDanger
 }))
 
-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: chartColors.value.primary,
-      borderRadius: 4,
-      barPercentage: 0.58,
-      categoryPercentage: 0.56,
-      order: 2
-    },
-    {
-      label: '失败数',
-      data: scaleSeries(props.failures),
-      borderColor: chartColors.value.danger,
-      backgroundColor: 'transparent',
-      borderWidth: 2,
-      pointBackgroundColor: '#ffffff',
-      pointBorderColor: chartColors.value.danger,
-      pointBorderWidth: 2,
-      pointRadius: 3,
-      pointHoverRadius: 5,
-      type: 'line',
-      order: 1
-    }
-  ]
-}))
+const ariaLabel = computed(() =>
+  props.labels.map((label, index) => (
+    `${label}日志总量${props.totals[index] || 0}，失败数${props.failures[index] || 0}`
+  )).join('；')
+)
 
 const chartOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
+  backgroundColor: 'transparent',
   animation: {
     duration: 900,
     easing: 'easeOutQuart'
   },
-  interaction: {
-    mode: 'index',
-    intersect: false
+  grid: {
+    top: 12,
+    right: 18,
+    bottom: 20,
+    left: 34,
+    containLabel: true
   },
-  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
+  tooltip: {
+    trigger: 'axis',
+    confine: true,
+    appendToBody: true,
+    backgroundColor: 'rgba(255,255,255,0.96)',
+    borderColor: '#e2e8f0',
+    borderWidth: 1,
+    padding: [9, 10],
+    textStyle: {
+      color: '#64748b',
+      fontSize: 12,
+      fontWeight: 700
+    },
+    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);'
+  },
+  xAxis: {
+    type: 'category',
+    data: props.labels,
+    axisTick: { show: false },
+    axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.28)' } },
+    axisLabel: {
+      color: '#64748b',
+      fontSize: 11,
+      fontWeight: 700
     }
   },
-  scales: {
-    x: {
-      grid: { display: false },
-      ticks: {
-        color: '#64748b',
-        font: { size: 11 }
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: Math.max(maxTotal.value, 4),
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: {
+      color: '#64748b',
+      fontSize: 11,
+      fontWeight: 700
+    },
+    splitLine: { lineStyle: { color: '#f1f5f9' } }
+  },
+  series: [
+    {
+      name: '日志总量',
+      type: 'bar',
+      data: props.totals,
+      barWidth: 16,
+      itemStyle: {
+        color: chartColors.value.primary,
+        borderRadius: [4, 4, 0, 0]
       }
     },
-    y: {
-      beginAtZero: true,
-      suggestedMax: Math.max(maxTotal.value, 4),
-      grid: { color: '#f1f5f9' },
-      ticks: {
-        color: '#64748b',
-        font: { size: 11 },
-        precision: 0
+    {
+      name: '失败数',
+      type: 'line',
+      data: props.failures,
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 7,
+      lineStyle: {
+        width: 2,
+        color: chartColors.value.danger
+      },
+      itemStyle: {
+        color: '#ffffff',
+        borderColor: chartColors.value.danger,
+        borderWidth: 2
       }
     }
-  }
+  ]
 }))
+
+useEcharts(chartElement, chartOptions)
 </script>
 
 <style scoped>