feat(finance): 实现发票管理页面与子页面

apps/web-antd/src/views/finance/invoice/components/InvoiceStatsBar.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票记录统计卡片栏。
+ */
+import type { FinanceInvoiceStatsDto } from '#/api/finance';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { formatCurrency } from '../composables/invoice-page/helpers';
+
+interface Props {
+  stats: FinanceInvoiceStatsDto;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="fi-stats">
+    <div class="fi-stat-card">
+      <div class="fi-stat-label">
+        <IconifyIcon icon="lucide:receipt-text" class="fi-stat-icon" />
+        <span>本月开票</span>
+      </div>
+      <div class="fi-stat-val">{{ formatCurrency(props.stats.currentMonthIssuedAmount) }}</div>
+      <div class="fi-stat-sub">共 {{ props.stats.currentMonthIssuedCount }} 张</div>
+    </div>
+
+    <div class="fi-stat-card warn">
+      <div class="fi-stat-label">
+        <IconifyIcon icon="lucide:clock" class="fi-stat-icon" />
+        <span>待开票</span>
+      </div>
+      <div class="fi-stat-val">{{ props.stats.pendingCount }}</div>
+      <div class="fi-stat-sub">张待处理</div>
+    </div>
+
+    <div class="fi-stat-card danger">
+      <div class="fi-stat-label">
+        <IconifyIcon icon="lucide:ban" class="fi-stat-icon" />
+        <span>已作废</span>
+      </div>
+      <div class="fi-stat-val">{{ props.stats.voidedCount }}</div>
+      <div class="fi-stat-sub">张已作废</div>
+    </div>
+  </div>
+</template>