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/index.html
+++ b/web/index.html
@@ -4,7 +4,6 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai/1.501/lxgw-wenkai.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" />
    <title>ReimburseOps - 企业报销智能运营台</title>
  </head>
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -12,14 +12,12 @@
        "@element-plus/icons-vue": "^2.3.2",
        "@vitejs/plugin-vue": "^5.2.4",
        "@vueuse/motion": "^3.0.3",
-        "chart.js": "^4.5.1",
        "echarts": "^6.1.0",
        "element-plus": "^2.14.0",
        "markdown-it": "^14.1.1",
        "pg": "^8.13.1",
        "vite": "^5.4.19",
        "vue": "^3.5.13",
-        "vue-chartjs": "^5.3.3",
        "vue-router": "^4.5.1"
      }
    },
@@ -803,12 +801,6 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
-    "node_modules/@kurkle/color": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
-      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-      "license": "MIT"
-    },
    "node_modules/@nuxt/kit": {
      "version": "3.21.2",
      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.21.2.tgz",
@@ -1598,18 +1590,6 @@
        }
      }
    },
-    "node_modules/chart.js": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
-      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
-      "license": "MIT",
-      "dependencies": {
-        "@kurkle/color": "^0.3.0"
-      },
-      "engines": {
-        "pnpm": ">=8"
-      }
-    },
    "node_modules/chokidar": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
@@ -3086,16 +3066,6 @@
        }
      }
    },
-    "node_modules/vue-chartjs": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.3.tgz",
-      "integrity": "sha512-jqxtL8KZ6YJ5NTv6XzrzLS7osyegOi28UGNZW0h9OkDL7Sh1396ht4Dorh04aKrl2LiSalQ84WtqiG0RIJb0tA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "chart.js": "^4.1.1",
-        "vue": "^3.0.0-0 || ^2.7.0"
-      }
-    },
    "node_modules/vue-component-type-helpers": {
      "version": "3.3.2",
      "resolved": "https://registry.npmmirror.com/vue-component-type-helpers/-/vue-component-type-helpers-3.3.2.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -14,14 +14,12 @@
    "@element-plus/icons-vue": "^2.3.2",
    "@vitejs/plugin-vue": "^5.2.4",
    "@vueuse/motion": "^3.0.3",
-    "chart.js": "^4.5.1",
    "echarts": "^6.1.0",
    "element-plus": "^2.14.0",
    "markdown-it": "^14.1.1",
    "pg": "^8.13.1",
    "vite": "^5.4.19",
    "vue": "^3.5.13",
-    "vue-chartjs": "^5.3.3",
    "vue-router": "^4.5.1"
  }
 }
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,8 +1,10 @@
 <template>
  <div class="app-desktop-shell" :style="desktopScaleStyle">
    <div class="app-desktop-stage">
-      <RouterView />
-      <ToastNotification :toast-text="toastText" />
+      <ElConfigProvider :locale="zhCn">
+        <RouterView />
+        <ToastNotification :toast-text="toastText" />
+      </ElConfigProvider>
    </div>
  </div>
 </template>
@@ -10,6 +12,8 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { RouterView } from 'vue-router'
+import { ElConfigProvider } from 'element-plus/es/components/config-provider/index.mjs'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'

 import './assets/styles/global.css'

--- a/web/src/assets/styles/global.css
+++ b/web/src/assets/styles/global.css
@@ -72,7 +72,7 @@
  --desktop-stage-height: 100dvh;
  --desktop-viewport-width: 1440;
  --desktop-viewport-height: 900;
-  font-family: "LXGW WenKai", Inter, "SF Pro Display", "PingFang SC", sans-serif;
+  font-family: Inter, "SF Pro Display", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
 }

 * { box-sizing: border-box; }
--- 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: '' },
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,12 +1,10 @@
 import { createApp } from 'vue'
 import { MotionPlugin } from '@vueuse/motion'
-import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
-import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router/index.js'
 import { installThemeSkin } from './composables/useThemeSkin.js'
 import { installSessionNavigation } from './composables/useSystemState.js'
+import './plugins/elementPlusStyles.js'
 import './assets/styles/element-plus-theme.css'
 import './assets/styles/detail-page-corners.css'
 import './assets/styles/components/enterprise-page-shell.css'
@@ -18,6 +16,5 @@ installSessionNavigation(router)

 app.use(MotionPlugin)
 app.use(router)
-app.use(ElementPlus, { locale: zhCn })

 app.mount('#app')
--- a/web/src/plugins/elementPlusStyles.js
+++ b/web/src/plugins/elementPlusStyles.js
@@ -0,0 +1,22 @@
+import 'element-plus/theme-chalk/base.css'
+import 'element-plus/theme-chalk/el-button.css'
+import 'element-plus/theme-chalk/el-button-group.css'
+import 'element-plus/theme-chalk/el-checkbox.css'
+import 'element-plus/theme-chalk/el-checkbox-group.css'
+import 'element-plus/theme-chalk/el-dialog.css'
+import 'element-plus/theme-chalk/el-dropdown.css'
+import 'element-plus/theme-chalk/el-dropdown-item.css'
+import 'element-plus/theme-chalk/el-dropdown-menu.css'
+import 'element-plus/theme-chalk/el-input.css'
+import 'element-plus/theme-chalk/el-option.css'
+import 'element-plus/theme-chalk/el-option-group.css'
+import 'element-plus/theme-chalk/el-overlay.css'
+import 'element-plus/theme-chalk/el-pagination.css'
+import 'element-plus/theme-chalk/el-popper.css'
+import 'element-plus/theme-chalk/el-scrollbar.css'
+import 'element-plus/theme-chalk/el-select.css'
+import 'element-plus/theme-chalk/el-select-dropdown.css'
+import 'element-plus/theme-chalk/el-table.css'
+import 'element-plus/theme-chalk/el-table-column.css'
+import 'element-plus/theme-chalk/el-tag.css'
+import 'element-plus/theme-chalk/el-tooltip.css'
--- a/web/src/services/agentAssets.js
+++ b/web/src/services/agentAssets.js
@@ -60,6 +60,17 @@ function buildQuery(params = {}) {
    search.set('limit', String(params.limit))
  }

+  const page = params.page
+  const pageSize = params.pageSize || params.page_size
+
+  if (page) {
+    search.set('page', String(page))
+  }
+
+  if (pageSize) {
+    search.set('page_size', String(pageSize))
+  }
+
  if (params.version) {
    search.set('version', String(params.version))
  }
--- a/web/src/services/budgets.js
+++ b/web/src/services/budgets.js
@@ -4,7 +4,7 @@ function buildQuery(params = {}) {
  const search = new URLSearchParams()
  Object.entries(params || {}).forEach(([key, value]) => {
    if (typeof value === 'undefined' || value === null || value === '') return
-    search.set(key, String(value))
+    search.set(key === 'pageSize' ? 'page_size' : key, String(value))
  })
  const query = search.toString()
  return query ? `?${query}` : ''
@@ -25,6 +25,7 @@ export function createBudgetAllocation(payload = {}) {
  })
 }

-export function fetchBudgetTransactions(allocationId) {
-  return apiRequest(`/budgets/allocations/${encodeURIComponent(String(allocationId || '').trim())}/transactions`)
+export function fetchBudgetTransactions(allocationId, params = {}) {
+  const encodedId = encodeURIComponent(String(allocationId || '').trim())
+  return apiRequest(`/budgets/allocations/${encodedId}/transactions${buildQuery(params)}`)
 }
--- a/web/src/services/employees.js
+++ b/web/src/services/employees.js
@@ -11,6 +11,17 @@ function buildEmployeesQuery(params = {}) {
    search.set('keyword', params.keyword)
  }

+  const page = params.page
+  const pageSize = params.pageSize || params.page_size
+
+  if (page) {
+    search.set('page', String(page))
+  }
+
+  if (pageSize) {
+    search.set('page_size', String(pageSize))
+  }
+
  return search
 }

--- a/web/src/services/reimbursements.js
+++ b/web/src/services/reimbursements.js
@@ -1,15 +1,32 @@
 import { apiRequest } from './api.js'

-export function fetchExpenseClaims() {
-  return apiRequest('/reimbursements/claims')
+function buildListQuery(params = {}) {
+  const search = new URLSearchParams()
+  const page = params.page
+  const pageSize = params.pageSize || params.page_size
+
+  if (page) {
+    search.set('page', String(page))
+  }
+
+  if (pageSize) {
+    search.set('page_size', String(pageSize))
+  }
+
+  const query = search.toString()
+  return query ? `?${query}` : ''
 }

-export function fetchApprovalExpenseClaims() {
-  return apiRequest('/reimbursements/claims/approvals')
+export function fetchExpenseClaims(params = {}) {
+  return apiRequest(`/reimbursements/claims${buildListQuery(params)}`)
 }

-export function fetchArchivedExpenseClaims() {
-  return apiRequest('/reimbursements/claims/archives')
+export function fetchApprovalExpenseClaims(params = {}) {
+  return apiRequest(`/reimbursements/claims/approvals${buildListQuery(params)}`)
+}
+
+export function fetchArchivedExpenseClaims(params = {}) {
+  return apiRequest(`/reimbursements/claims/archives${buildListQuery(params)}`)
 }

 export function fetchExpenseClaimDetail(claimId) {
--- a/web/src/views/scripts/ArchiveCenterView.js
+++ b/web/src/views/scripts/ArchiveCenterView.js
@@ -1,4 +1,5 @@
 import { computed, ref } from 'vue'
+import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus/es/components/dropdown/index.mjs'

 import EnterpriseListPage from '../../components/shared/EnterpriseListPage.vue'
 import { mapExpenseClaimToRequest } from '../../composables/useRequests.js'
@@ -91,6 +92,9 @@ function resolveFilterLabel(options, activeValue, fallbackLabel) {
 export default {
  name: 'ArchiveCenterView',
  components: {
+    ElDropdown,
+    ElDropdownItem,
+    ElDropdownMenu,
    EnterpriseListPage,
    TravelRequestDetailView
  },
--- a/web/src/views/scripts/BudgetCenterView.js
+++ b/web/src/views/scripts/BudgetCenterView.js
@@ -1,5 +1,8 @@
 import { computed, onMounted, ref, watch } from 'vue'
-import { ElButton, ElInput, ElPagination, ElTable, ElTableColumn } from 'element-plus'
+import { ElButton } from 'element-plus/es/components/button/index.mjs'
+import { ElInput } from 'element-plus/es/components/input/index.mjs'
+import { ElPagination } from 'element-plus/es/components/pagination/index.mjs'
+import { ElTable, ElTableColumn } from 'element-plus/es/components/table/index.mjs'

 import BudgetTrendChart from '../../components/charts/BudgetTrendChart.vue'
 import EnterpriseSelect from '../../components/shared/EnterpriseSelect.vue'
--- a/web/src/views/scripts/TravelReimbursementCreateView.js
+++ b/web/src/views/scripts/TravelReimbursementCreateView.js
@@ -1,5 +1,6 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { ElDialog } from 'element-plus/es/components/dialog/index.mjs'

 import ConfirmDialog from '../../components/shared/ConfirmDialog.vue'
 import TravelReimbursementInsightPanel from '../../components/travel/TravelReimbursementInsightPanel.vue'
@@ -507,6 +508,7 @@ function buildReviewMainMessageText(message) {
 export default {
  name: 'TravelReimbursementCreateView',
  components: {
+    ElDialog,
    ConfirmDialog,
    TravelReimbursementInsightPanel,
    TravelReimbursementMessageItem
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -1070,9 +1070,6 @@ export default defineConfig({
          if (normalizedId.includes('@antv/g6')) {
            return 'vendor-g6'
          }
-          if (normalizedId.includes('chart.js') || normalizedId.includes('vue-chartjs')) {
-            return 'vendor-chartjs'
-          }
          if (normalizedId.includes('markdown-it')) {
            return 'vendor-markdown'
          }