feat: 财务看板口径重构与半年模拟数据及报销状态注册表

- 重构 finance_dashboard 口径计算，新增模拟公司画像数据生成与筛选
- 引入 expense_claim_status_registry 统一报销状态流转
- 完善报销草稿流程、Item Sync 与本体解析器
- 优化总览页趋势图、分页组件与请求进度步骤
- 增强报销申请快速预览、本体工具与详情展示
- 新增半年报销模拟数据种子脚本与状态审计工具
- 补充财务看板、报销状态注册与模拟数据测试覆盖

web/src/components/charts/TrendChart.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="trend-chart">
     <div class="chart-legend">
-      <span><i :style="{ background: chartColors.primary }"></i>申请量（单）</span>
-      <span><i :style="{ background: chartColors.blue }"></i>审批完成量（单）</span>
-      <span><i :style="{ background: chartColors.purple }"></i>平均审批时长（小时）</span>
+      <span><i :style="{ background: activeColor }"></i>{{ legendLabel }}</span>
     </div>
     <div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></div>
   </div>
@@ -23,22 +21,44 @@ use([GridComponent, TooltipComponent, EChartsBarChart, EChartsLineChart, CanvasR
 
 const props = defineProps({
   labels: { type: Array, required: true },
-  applications: { type: Array, required: true },
-  approved: { type: Array, required: true },
-  avgHours: { type: Array, required: true }
+  mode: { type: String, default: 'amount' },
+  claimCount: { type: Array, default: () => [] },
+  claimAmount: { type: Array, default: () => [] },
+  applications: { type: Array, default: () => [] },
+  approved: { type: Array, default: () => [] },
+  avgHours: { type: Array, default: () => [] }
 })
 
 const chartElement = shallowRef(null)
 const themeColors = useThemeColors()
 const chartColors = computed(() => ({
   primary: themeColors.value.chartPrimary,
-  blue: themeColors.value.chartBlue,
-  purple: themeColors.value.chartPurple
+  blue: themeColors.value.chartBlue
 }))
+const isCountMode = computed(() => props.mode === 'count')
+
+const claimCountSeries = computed(() => (
+  props.claimCount.length ? props.claimCount : props.applications
+))
+const claimAmountSeries = computed(() => (
+  props.claimAmount.length ? props.claimAmount : props.approved
+))
+const activeSeries = computed(() => (
+  isCountMode.value ? claimCountSeries.value : claimAmountSeries.value
+))
+const activeColor = computed(() => (
+  isCountMode.value ? chartColors.value.primary : chartColors.value.blue
+))
+const legendLabel = computed(() => (
+  isCountMode.value ? '报销数量（单）' : '报销金额（元）'
+))
+const maxValue = computed(() => Math.max(...activeSeries.value.map((value) => Number(value || 0)), 1))
 
 const ariaLabel = computed(() =>
   props.labels.map((label, index) => (
-    `${label}申请${props.applications[index] || 0}单，审批${props.approved[index] || 0}单，平均${props.avgHours[index] || 0}小时`
+    isCountMode.value
+      ? `${label}报销${claimCountSeries.value[index] || 0}单`
+      : `${label}报销金额${formatCurrency(claimAmountSeries.value[index] || 0)}`
   )).join('；')
 )
 
@@ -51,7 +71,7 @@ const chartOptions = computed(() => ({
   animationEasingUpdate: 'linear',
   grid: {
     top: 18,
-    right: 38,
+    right: 24,
     bottom: 22,
     left: 36,
     containLabel: true
@@ -83,72 +103,46 @@ const chartOptions = computed(() => ({
       fontWeight: 700
     }
   },
-  yAxis: [
-    {
-      type: 'value',
-      min: 0,
-      max: 250,
-      splitNumber: 5,
-      axisLabel: {
-        color: '#64748b',
-        fontSize: 11,
-        fontWeight: 700
-      },
-      splitLine: { lineStyle: { color: 'rgba(226, 232, 240, 0.75)' } }
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: Math.ceil(maxValue.value * 1.2),
+    splitNumber: 5,
+    name: isCountMode.value ? '单' : '元',
+    nameTextStyle: {
+      color: '#64748b',
+      fontSize: 11,
+      fontWeight: 700
     },
-    {
-      type: 'value',
-      min: 0,
-      max: 15,
-      splitNumber: 5,
-      axisLabel: {
-        color: '#64748b',
-        fontSize: 11,
-        fontWeight: 700
-      },
-      splitLine: { show: false }
-    }
-  ],
+    axisLabel: {
+      color: '#64748b',
+      fontSize: 11,
+      fontWeight: 700,
+      formatter: (value) => (isCountMode.value ? `${Math.round(value)}` : formatAxisCurrency(value))
+    },
+    splitLine: { lineStyle: { color: 'rgba(226, 232, 240, 0.75)' } }
+  },
   series: [
     {
-      name: '申请量（单）',
-      type: 'bar',
-      data: props.applications,
-      barWidth: 12,
-      barGap: '28%',
-      itemStyle: {
-        color: chartColors.value.primary,
-        borderRadius: [4, 4, 0, 0]
-      }
-    },
-    {
-      name: '审批完成量（单）',
-      type: 'bar',
-      data: props.approved,
-      barWidth: 12,
-      itemStyle: {
-        color: chartColors.value.blue,
-        borderRadius: [4, 4, 0, 0]
-      }
-    },
-    {
-      name: '平均审批时长（小时）',
-      type: 'line',
-      yAxisIndex: 1,
-      data: props.avgHours,
-      smooth: true,
-      symbol: 'circle',
+      name: legendLabel.value,
+      type: isCountMode.value ? 'line' : 'bar',
+      data: activeSeries.value,
+      barWidth: 16,
+      smooth: isCountMode.value,
+      symbol: isCountMode.value ? 'circle' : 'none',
       symbolSize: 7,
       lineStyle: {
         width: 2.5,
-        color: chartColors.value.purple
+        color: activeColor.value
       },
       itemStyle: {
-        color: '#ffffff',
-        borderColor: chartColors.value.purple,
-        borderWidth: 2.5
+        color: isCountMode.value ? '#ffffff' : activeColor.value,
+        borderColor: activeColor.value,
+        borderWidth: isCountMode.value ? 2.5 : 0,
+        borderRadius: [4, 4, 0, 0]
       },
       areaStyle: {
+        opacity: isCountMode.value ? 1 : 0,
         color: {
           type: 'linear',
           x: 0,
@@ -156,10 +150,15 @@ const chartOptions = computed(() => ({
           x2: 0,
           y2: 1,
           colorStops: [
-            { offset: 0, color: toRgba(chartColors.value.purple, 0.14) },
-            { offset: 1, color: toRgba(chartColors.value.purple, 0.02) }
+            { offset: 0, color: toRgba(activeColor.value, 0.14) },
+            { offset: 1, color: toRgba(activeColor.value, 0.02) }
           ]
         }
+      },
+      tooltip: {
+        valueFormatter: (value) => (
+          isCountMode.value ? `${Number(value || 0)} 单` : formatCurrency(value)
+        )
       }
     }
   ]
@@ -178,6 +177,20 @@ function toRgba(color, alpha) {
   }
   return `rgba(58, 124, 165, ${alpha})`
 }
+
+function formatCurrency(value) {
+  const number = Number(value || 0)
+  if (number >= 1000000) return `¥${(number / 1000000).toFixed(1)}M`
+  if (number >= 1000) return `¥${(number / 1000).toFixed(1)}K`
+  return `¥${Math.round(number)}`
+}
+
+function formatAxisCurrency(value) {
+  const number = Number(value || 0)
+  if (number >= 1000000) return `${(number / 1000000).toFixed(1)}M`
+  if (number >= 1000) return `${(number / 1000).toFixed(0)}K`
+  return `${Math.round(number)}`
+}
 </script>
 
 <style scoped>