feat(@vben/web-antd): add finance cost management pages

apps/web-antd/src/views/finance/cost/components/CostAnalysisDetailTable.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * 文件职责：成本分析明细表。
+ */
+import type { TableProps } from 'ant-design-vue';
+
+import type { FinanceCostMonthlyDetailRowDto } from '#/api/finance/cost';
+
+import { h } from 'vue';
+
+import { Table } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  formatPercent,
+} from '../composables/cost-page/helpers';
+
+interface Props {
+  loading: boolean;
+  rows: FinanceCostMonthlyDetailRowDto[];
+}
+
+const props = defineProps<Props>();
+
+const columns: TableProps['columns'] = [
+  {
+    title: '月份',
+    dataIndex: 'month',
+    width: 110,
+  },
+  {
+    title: '食材',
+    dataIndex: 'foodAmount',
+    align: 'right',
+    customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
+  },
+  {
+    title: '人工',
+    dataIndex: 'laborAmount',
+    align: 'right',
+    customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
+  },
+  {
+    title: '固定',
+    dataIndex: 'fixedAmount',
+    align: 'right',
+    customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
+  },
+  {
+    title: '包装',
+    dataIndex: 'packagingAmount',
+    align: 'right',
+    customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
+  },
+  {
+    title: '总计',
+    dataIndex: 'totalCost',
+    align: 'right',
+    customRender: ({ text }) =>
+      h(
+        'span',
+        { class: 'fc-total-amount' },
+        formatCurrency(Number(text ?? 0)),
+      ),
+  },
+  {
+    title: '成本率',
+    dataIndex: 'costRate',
+    align: 'right',
+    customRender: ({ text }) => formatPercent(Number(text ?? 0)),
+  },
+];
+</script>
+
+<template>
+  <div class="fc-table-card">
+    <div class="fc-section-title">成本明细</div>
+    <Table
+      row-key="month"
+      size="middle"
+      :columns="columns"
+      :data-source="props.rows"
+      :loading="props.loading"
+      :pagination="false"
+    />
+  </div>
+</template>