feat: 新增财务交易流水模块页面与接口

apps/web-antd/src/views/finance/transaction/components/TransactionStatsBar.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * 文件职责：交易流水统计卡片展示。
+ */
+import type { FinanceTransactionStatsDto } from '#/api/finance';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { formatCurrency } from '../composables/transaction-page/helpers';
+
+interface Props {
+  stats: FinanceTransactionStatsDto;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="ft-stats">
+    <div class="ft-stat-card">
+      <div class="ft-stat-label">
+        <IconifyIcon icon="lucide:trending-up" class="ft-stat-icon" />
+        总收入
+      </div>
+      <div class="ft-stat-value is-green">
+        {{ formatCurrency(props.stats.totalIncome) }}
+      </div>
+    </div>
+
+    <div class="ft-stat-card">
+      <div class="ft-stat-label">
+        <IconifyIcon icon="lucide:undo-2" class="ft-stat-icon" />
+        总退款
+      </div>
+      <div class="ft-stat-value is-red">
+        {{ formatCurrency(props.stats.totalRefund) }}
+      </div>
+    </div>
+
+    <div class="ft-stat-card">
+      <div class="ft-stat-label">
+        <IconifyIcon icon="lucide:receipt" class="ft-stat-icon" />
+        交易笔数
+      </div>
+      <div class="ft-stat-value">
+        {{ props.stats.totalCount }}
+      </div>
+    </div>
+  </div>
+</template>