feat: 增强风险规则生成引擎与预算中心页面

后端拆分风险规则生成为解释器、语义分析、本体对齐等子模块，优化模板执行和流程图生成，完善员工种子数据和导入逻辑，增强报销单权限策略和草稿持久化，前端新增预算中心视图和趋势图组件，重构审计页面和风险规则测试对话框交互，完善文档中心和报销创建页面细节，补充单元测试覆盖。
2026-05-26 09:15:14 +08:00
parent d0e946cf47
commit 0e861d8fa6
150 changed files with 14953 additions and 4099 deletions
--- a/web/src/components/charts/BudgetTrendChart.vue
+++ b/web/src/components/charts/BudgetTrendChart.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="budget-trend-chart">
+    <Line :data="chartData" :options="chartOptions" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Line } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  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)
+
+const props = defineProps({
+  labels: { type: Array, required: true },
+  budget: { type: Array, required: true },
+  used: { type: Array, required: true }
+})
+
+const progress = useAnimationProgress([
+  () => props.labels,
+  () => props.budget,
+  () => props.used
+], 1000)
+
+const scaleSeries = (series) =>
+  series.map((value) => Number((Number(value || 0) * progress.value).toFixed(2)))
+
+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(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
+    }
+  ]
+}))
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  interaction: {
+    mode: 'index',
+    intersect: false
+  },
+  animation: {
+    duration: 760,
+    easing: 'easeOutQuart'
+  },
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      backgroundColor: '#ffffff',
+      borderColor: '#e2e8f0',
+      borderWidth: 1,
+      bodyColor: '#475569',
+      titleColor: '#0f172a',
+      padding: 12,
+      displayColors: true,
+      callbacks: {
+        label(context) {
+          const value = Number(context.parsed.y || 0)
+          return `${context.dataset.label}: ${value.toLocaleString('zh-CN')} 元`
+        }
+      }
+    }
+  },
+  scales: {
+    x: {
+      grid: { display: false },
+      ticks: {
+        color: '#64748b',
+        font: { size: 12 }
+      },
+      border: { display: false }
+    },
+    y: {
+      beginAtZero: true,
+      max: 12000000,
+      grid: {
+        color: '#edf2f7',
+        drawTicks: false
+      },
+      border: { display: false },
+      ticks: {
+        color: '#64748b',
+        font: { size: 12 },
+        stepSize: 3000000,
+        callback(value) {
+          if (value === 0) return '0'
+          return `${Number(value) / 10000}万`
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.budget-trend-chart {
+  position: relative;
+  width: 100%;
+  height: 220px;
+}
+</style>