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

后端新增通用分页模块，为报销单、员工、预算、agent 资产等端点统一接入分页参数和游标查询，优化 repository 层分页实现，前端服务层适配分页响应结构，完善预算图表和全局样式，优化侧边栏和企业选择器组件，引入 Element Plus 插件注册。
2026-05-29 14:11:06 +08:00
parent e080105f9f
commit 678f64d772
43 changed files with 1863 additions and 378 deletions
--- a/web/src/components/business/ExpenseProfileDetailModal.vue
+++ b/web/src/components/business/ExpenseProfileDetailModal.vue
@@ -135,7 +135,9 @@

 <script setup>
 import { computed, nextTick, ref, watch } from 'vue'
-import { ElButton, ElDialog, ElTag } from 'element-plus'
+import { ElButton } from 'element-plus/es/components/button/index.mjs'
+import { ElDialog } from 'element-plus/es/components/dialog/index.mjs'
+import { ElTag } from 'element-plus/es/components/tag/index.mjs'

 import ExpenseProfileTagPager from './ExpenseProfileTagPager.vue'
 import RadarChart from '../charts/RadarChart.vue'
--- a/web/src/components/business/ExpenseProfileTagPager.vue
+++ b/web/src/components/business/ExpenseProfileTagPager.vue
@@ -69,7 +69,8 @@

 <script setup>
 import { computed, ref, watch } from 'vue'
-import { ElButton, ElTag } from 'element-plus'
+import { ElButton } from 'element-plus/es/components/button/index.mjs'
+import { ElTag } from 'element-plus/es/components/tag/index.mjs'

 const TAG_PAGE_SIZE = 5

--- a/web/src/components/charts/BudgetTrendChart.vue
+++ b/web/src/components/charts/BudgetTrendChart.vue
@@ -1,24 +1,18 @@
 <template>
-  <div class="budget-trend-chart">
-    <Bar :data="chartData" :options="chartOptions" />
-  </div>
+  <div ref="chartElement" class="budget-trend-chart" role="img" :aria-label="ariaLabel"></div>
 </template>

 <script setup>
-import { computed } from 'vue'
-import { Bar } from 'vue-chartjs'
-import {
-  Chart as ChartJS,
-  BarElement,
-  CategoryScale,
-  Legend,
-  LinearScale,
-  Tooltip
-} from 'chart.js'
-import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
+import { computed, shallowRef } from 'vue'
+import { BarChart as EChartsBarChart } 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, Tooltip, Legend)
+use([GridComponent, TooltipComponent, EChartsBarChart, CanvasRenderer])

 const props = defineProps({
  labels: { type: Array, required: true },
@@ -28,13 +22,7 @@ const props = defineProps({
  available: { type: Array, default: () => [] }
 })

-const progress = useAnimationProgress([
-  () => props.labels,
-  () => props.budget,
-  () => props.used,
-  () => props.occupied,
-  () => props.available
-], 1000)
+const chartElement = shallowRef(null)
 const themeColors = useThemeColors()
 const prefersReducedMotion = () =>
  typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
@@ -54,18 +42,23 @@ const percent = (value, total) => {
 const percentSeries = (series) =>
  props.budget.map((total, index) => percent(series[index], total))

-const scaleSeries = (series) =>
-  series.map((value) => Number((Number(value || 0) * progress.value).toFixed(2)))
-
 const usedPercent = computed(() => percentSeries(props.used))
 const occupiedPercent = computed(() => percentSeries(props.occupied))
-const availablePercent = computed(() =>
+const availableAmountSeries = computed(() =>
  props.budget.map((total, index) => {
+    const explicitValue = Number(props.available[index])
+    if (Number.isFinite(explicitValue) && explicitValue > 0) {
+      return explicitValue
+    }
+
    const usedValue = Number(props.used[index] || 0)
    const occupiedValue = Number(props.occupied[index] || 0)
-    return percent(Math.max(Number(total || 0) - usedValue - occupiedValue, 0), total)
+    return Math.max(Number(total || 0) - usedValue - occupiedValue, 0)
  })
 )
+const availablePercent = computed(() =>
+  props.budget.map((total, index) => percent(availableAmountSeries.value[index], total))
+)

 const yAxisMax = computed(() => {
  const maxUsage = Math.max(
@@ -75,111 +68,122 @@ const yAxisMax = computed(() => {
  return Math.ceil(maxUsage / 20) * 20
 })

-const chartData = computed(() => ({
-  labels: props.labels,
-  datasets: [
-    {
-      label: '已使用',
-      data: scaleSeries(usedPercent.value),
-      backgroundColor: themeColors.value.chartPrimary,
-      borderRadius: 4,
-      borderSkipped: false,
-      stack: 'budgetUsage',
-      amounts: props.used
-    },
-    {
-      label: '已占用',
-      data: scaleSeries(occupiedPercent.value),
-      backgroundColor: themeColors.value.warning,
-      borderRadius: 4,
-      borderSkipped: false,
-      stack: 'budgetUsage',
-      amounts: props.occupied
-    },
-    {
-      label: '剩余可用',
-      data: scaleSeries(availablePercent.value),
-      backgroundColor: '#e5edf3',
-      borderRadius: 4,
-      borderSkipped: false,
-      stack: 'budgetUsage',
-      amounts: props.available
-    }
-  ]
-}))
+const ariaLabel = computed(() =>
+  props.labels.map((label, index) => (
+    `${label}预算${currency(props.budget[index])}，已使用${usedPercent.value[index] || 0}%，已占用${occupiedPercent.value[index] || 0}%`
+  )).join('；')
+)
+
+function buildSeriesData(percentValues, amountValues) {
+  return percentValues.map((value, index) => ({
+    value,
+    amount: Number(amountValues[index] || 0)
+  }))
+}

 const chartOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  interaction: {
-    mode: 'index',
-    intersect: false
-  },
+  backgroundColor: 'transparent',
  animation: {
    duration: prefersReducedMotion() ? 0 : 760,
    easing: 'easeOutQuart'
  },
-  plugins: {
-    legend: {
-      display: false
+  grid: {
+    top: 12,
+    right: 16,
+    bottom: 24,
+    left: 34,
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    confine: true,
+    appendToBody: true,
+    axisPointer: { type: 'shadow' },
+    backgroundColor: '#ffffff',
+    borderColor: '#e2e8f0',
+    borderWidth: 1,
+    padding: [10, 12],
+    textStyle: {
+      color: '#475569',
+      fontSize: 12,
+      fontWeight: 700
    },
-    tooltip: {
-      backgroundColor: '#ffffff',
-      borderColor: '#e2e8f0',
-      borderWidth: 1,
-      bodyColor: '#475569',
-      titleColor: '#0f172a',
-      cornerRadius: 4,
-      padding: 12,
-      displayColors: true,
-      callbacks: {
-        label(context) {
-          const value = Number(context.parsed.y || 0)
-          const amount = Number(context.dataset.amounts?.[context.dataIndex] || 0)
-          return `${context.dataset.label}: ${value.toFixed(2)}%（¥${currency(amount)}）`
-        },
-        afterBody(items) {
-          const index = items[0]?.dataIndex ?? 0
-          return `预算总额: ¥${currency(props.budget[index])}`
-        }
-      }
+    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
+    formatter(params = []) {
+      const items = Array.isArray(params) ? params : [params]
+      const index = Number(items[0]?.dataIndex || 0)
+      const lines = items.map((item) => {
+        const percentValue = Number(item?.value || 0).toFixed(2)
+        const amount = currency(item?.data?.amount || 0)
+        return `${item.marker}${item.seriesName}: ${percentValue}%（¥${amount}）`
+      })
+      return [`${items[0]?.axisValue || ''}`, ...lines, `预算总额: ¥${currency(props.budget[index])}`].join('<br/>')
    }
  },
-  scales: {
-    x: {
-      grid: { display: false },
-      ticks: {
-        color: '#64748b',
-        font: { size: 12 }
-      },
-      border: { display: false }
-    },
-    y: {
-      beginAtZero: true,
-      max: yAxisMax.value,
-      stacked: true,
-      grid: {
-        color: '#edf2f7',
-        drawTicks: false
-      },
-      border: { display: false },
-      ticks: {
-        color: '#64748b',
-        font: { size: 12 },
-        stepSize: 20,
-        callback(value) {
-          return `${Number(value)}%`
-        }
-      }
+  xAxis: {
+    type: 'category',
+    data: props.labels,
+    axisTick: { show: false },
+    axisLine: { show: false },
+    axisLabel: {
+      color: '#64748b',
+      fontSize: 12,
+      fontWeight: 700
    }
  },
-  datasets: {
-    bar: {
-      categoryPercentage: 0.58,
-      barPercentage: 0.72
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: yAxisMax.value,
+    splitNumber: Math.max(1, Math.ceil(yAxisMax.value / 20)),
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: {
+      color: '#64748b',
+      fontSize: 12,
+      fontWeight: 700,
+      formatter: (value) => `${Number(value)}%`
+    },
+    splitLine: { lineStyle: { color: '#edf2f7' } }
+  },
+  series: [
+    {
+      name: '已使用',
+      type: 'bar',
+      stack: 'budgetUsage',
+      data: buildSeriesData(usedPercent.value, props.used),
+      barWidth: 16,
+      itemStyle: {
+        color: themeColors.value.chartPrimary,
+        borderRadius: [4, 4, 0, 0]
+      }
+    },
+    {
+      name: '已占用',
+      type: 'bar',
+      stack: 'budgetUsage',
+      data: buildSeriesData(occupiedPercent.value, props.occupied),
+      barWidth: 16,
+      itemStyle: {
+        color: themeColors.value.warning,
+        borderRadius: [4, 4, 0, 0]
+      }
+    },
+    {
+      name: '剩余可用',
+      type: 'bar',
+      stack: 'budgetUsage',
+      data: buildSeriesData(availablePercent.value, availableAmountSeries.value),
+      barWidth: 16,
+      itemStyle: {
+        color: '#e5edf3',
+        borderRadius: [4, 4, 0, 0]
+      }
    }
-  }
+  ]
 }))
+
+useEcharts(chartElement, chartOptions)
 </script>

 <style scoped>
--- a/web/src/components/charts/LogTrendChart.vue
+++ b/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>
--- a/web/src/components/layout/SidebarRail.vue
+++ b/web/src/components/layout/SidebarRail.vue
@@ -112,7 +112,7 @@
 </template>

 <script setup>
-import { ElTooltip } from 'element-plus'
+import { ElTooltip } from 'element-plus/es/components/tooltip/index.mjs'
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'

 import { useDocumentCenterInbox } from '../../composables/useDocumentCenterInbox.js'
--- a/web/src/components/shared/EnterpriseSelect.vue
+++ b/web/src/components/shared/EnterpriseSelect.vue
@@ -23,6 +23,7 @@

 <script setup>
 import { computed } from 'vue'
+import { ElSelect, ElOption } from 'element-plus/es/components/select/index.mjs'

 const props = defineProps({
  modelValue: { type: [String, Number, Boolean], default: '' },