feat: 完善预算中心图表与确认对话框交互

后端预算服务增加汇总查询和辅助计算，前端预算中心优化趋
势图组件和数据展示，增强确认对话框通用性和样式，完善预
算编辑对话框布局，补充预算端点单元测试。

web/src/components/charts/BudgetTrendChart.vue

@@ -1,77 +1,110 @@
 <template>
   <div class="budget-trend-chart">
-    <Line :data="chartData" :options="chartOptions" />
+    <Bar :data="chartData" :options="chartOptions" />
   </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
-import { Line } from 'vue-chartjs'
+import { Bar } from 'vue-chartjs'
 import {
   Chart as ChartJS,
+  BarElement,
   CategoryScale,
-  Filler,
   Legend,
   LinearScale,
-  LineElement,
-  PointElement,
   Tooltip
 } from 'chart.js'
 import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
 
-ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Filler, Tooltip, Legend)
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend)
 
 const props = defineProps({
   labels: { type: Array, required: true },
   budget: { type: Array, required: true },
-  used: { type: Array, required: true }
+  used: { type: Array, required: true },
+  occupied: { type: Array, default: () => [] },
+  available: { type: Array, default: () => [] }
 })
 
 const progress = useAnimationProgress([
   () => props.labels,
   () => props.budget,
-  () => props.used
+  () => props.used,
+  () => props.occupied,
+  () => props.available
 ], 1000)
 
+const currency = (value) =>
+  Number(value || 0).toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })
+
+const percent = (value, total) => {
+  const denominator = Number(total || 0)
+  if (!denominator) return 0
+  return Number(((Number(value || 0) / denominator) * 100).toFixed(2))
+}
+
+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(() =>
+  props.budget.map((total, index) => {
+    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)
+  })
+)
+
+const yAxisMax = computed(() => {
+  const maxUsage = Math.max(
+    100,
+    ...usedPercent.value.map((value, index) => value + Number(occupiedPercent.value[index] || 0))
+  )
+  return Math.ceil(maxUsage / 20) * 20
+})
+
 const chartData = computed(() => ({
   labels: props.labels,
   datasets: [
     {
-      label: '预算',
-      data: scaleSeries(props.budget),
-      borderColor: '#2f7fd7',
-      backgroundColor: 'rgba(47, 127, 215, 0.08)',
-      borderDash: [7, 5],
-      borderWidth: 2,
-      pointRadius: 3,
-      pointHoverRadius: 5,
-      pointBackgroundColor: '#ffffff',
-      pointBorderColor: '#2f7fd7',
-      pointBorderWidth: 2,
-      tension: 0.34,
-      fill: false
+      label: '已使用',
+      data: scaleSeries(usedPercent.value),
+      backgroundColor: '#13a66b',
+      borderRadius: 5,
+      borderSkipped: false,
+      stack: 'budgetUsage',
+      amounts: props.used
     },
     {
-      label: '已发生',
-      data: scaleSeries(props.used),
-      borderColor: '#13a66b',
-      backgroundColor: 'rgba(19, 166, 107, 0.12)',
-      borderWidth: 2,
-      pointRadius: 3,
-      pointHoverRadius: 5,
-      pointBackgroundColor: '#ffffff',
-      pointBorderColor: '#13a66b',
-      pointBorderWidth: 2,
-      tension: 0.34,
-      fill: false
+      label: '已占用',
+      data: scaleSeries(occupiedPercent.value),
+      backgroundColor: '#f59e0b',
+      borderRadius: 5,
+      borderSkipped: false,
+      stack: 'budgetUsage',
+      amounts: props.occupied
+    },
+    {
+      label: '剩余可用',
+      data: scaleSeries(availablePercent.value),
+      backgroundColor: '#e5edf3',
+      borderRadius: 5,
+      borderSkipped: false,
+      stack: 'budgetUsage',
+      amounts: props.available
     }
   ]
 }))
 
-const chartOptions = {
+const chartOptions = computed(() => ({
   responsive: true,
   maintainAspectRatio: false,
   interaction: {
@@ -97,7 +130,12 @@ const chartOptions = {
       callbacks: {
         label(context) {
           const value = Number(context.parsed.y || 0)
-          return `${context.dataset.label}: ${value.toLocaleString('zh-CN')} 元`
+          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])}`
         }
       }
     }
@@ -113,7 +151,8 @@ const chartOptions = {
     },
     y: {
       beginAtZero: true,
-      max: 12000000,
+      max: yAxisMax.value,
+      stacked: true,
       grid: {
         color: '#edf2f7',
         drawTicks: false
@@ -122,15 +161,20 @@ const chartOptions = {
       ticks: {
         color: '#64748b',
         font: { size: 12 },
-        stepSize: 3000000,
+        stepSize: 20,
         callback(value) {
-          if (value === 0) return '0'
-          return `${Number(value) / 10000}万`
+          return `${Number(value)}%`
         }
       }
     }
+  },
+  datasets: {
+    bar: {
+      categoryPercentage: 0.58,
+      barPercentage: 0.72
+    }
   }
-}
+}))
 </script>
 
 <style scoped>