feat：

apps/web-antd/src/views/mall/statistics/trade/index.vue

@@ -4,14 +4,13 @@ import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
 
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, Page, StatisticCard } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
 import { Col, Row } from 'ant-design-vue';
 
 import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
 
-import TradeStatisticCard from './modules/trade-statistic-card.vue';
 import TradeTrendCard from './modules/trade-trend-card.vue';
 
 /** 交易统计 */
@@ -22,17 +21,19 @@ const summary =
   ref<DataComparisonRespVO<MallTradeStatisticsApi.TradeSummary>>(); // 交易统计数据
 
 /** 计算环比百分比 */
-const calculateRelativeRate = (value?: number, reference?: number): string => {
+function calculateRelativeRate(value?: number, reference?: number): string {
   const refValue = Number(reference || 0);
   const curValue = Number(value || 0);
-  if (!refValue || refValue === 0) return '0.00';
+  if (!refValue || refValue === 0) {
+    return '0.00';
+  }
   return (((curValue - refValue) / refValue) * 100).toFixed(2);
-};
+}
 
 /** 查询交易统计 */
-const getTradeStatisticsSummary = async () => {
+async function getTradeStatisticsSummary() {
   summary.value = await TradeStatisticsApi.getTradeStatisticsSummary();
-};
+}
 
 /** 初始化 */
 onMounted(async () => {
@@ -51,11 +52,11 @@ onMounted(async () => {
       />
     </template>
 
+    <!-- 交易概览卡片 -->
     <div class="flex flex-col gap-4">
-      <!-- 交易概览卡片 -->
       <Row :gutter="16">
         <Col :sm="6" :xs="12">
-          <TradeStatisticCard
+          <StatisticCard
             tooltip="昨日订单数量"
             title="昨日订单数量"
             :value="summary?.value?.yesterdayOrderCount || 0"
@@ -68,7 +69,7 @@ onMounted(async () => {
           />
         </Col>
         <Col :sm="6" :xs="12">
-          <TradeStatisticCard
+          <StatisticCard
             tooltip="本月订单数量"
             title="本月订单数量"
             :value="summary?.value?.monthOrderCount || 0"
@@ -81,7 +82,7 @@ onMounted(async () => {
           />
         </Col>
         <Col :sm="6" :xs="12">
-          <TradeStatisticCard
+          <StatisticCard
             tooltip="昨日支付金额"
             title="昨日支付金额"
             prefix="￥"
@@ -96,7 +97,7 @@ onMounted(async () => {
           />
         </Col>
         <Col :sm="6" :xs="12">
-          <TradeStatisticCard
+          <StatisticCard
             tooltip="本月支付金额"
             title="本月支付金额"
             prefix="￥"

apps/web-antd/src/views/mall/statistics/trade/modules/trade-statistic-card.vue

@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-import { VbenCountToAnimator } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-
-import { Card, Tooltip } from 'ant-design-vue';
-
-/** 交易统计值组件 */
-defineOptions({ name: 'TradeStatisticCard' });
-
-const props = withDefaults(defineProps<Props>(), {
-  tooltip: '',
-  title: '',
-  prefix: '',
-  value: 0,
-  decimals: 0,
-  percent: 0,
-});
-
-interface Props {
-  tooltip?: string;
-  title?: string;
-  prefix?: string;
-  value?: number | string;
-  decimals?: number;
-  percent?: number | string;
-}
-
-/** 计算环比百分比 */
-const percentValue = computed(() => {
-  return Number(props.percent);
-});
-
-/** 格式化数值 */
-const formattedValue = computed(() => {
-  return Number(props.value);
-});
-</script>
-
-<template>
-  <Card :bordered="false" class="h-full">
-    <div class="flex flex-col gap-2 p-2">
-      <div class="flex items-center justify-between text-gray-500">
-        <span class="text-sm">{{ title }}</span>
-        <Tooltip v-if="tooltip" :title="tooltip" placement="top">
-          <IconifyIcon
-            icon="lucide:circle-alert"
-            class="size-4 cursor-help text-gray-400 hover:text-gray-600"
-          />
-        </Tooltip>
-      </div>
-      <div class="mb-4 text-3xl font-medium">
-        <VbenCountToAnimator
-          :prefix="prefix"
-          :end-val="formattedValue"
-          :decimals="decimals"
-        />
-      </div>
-      <div class="flex flex-row gap-1 text-sm">
-        <span class="text-gray-500">环比</span>
-        <span
-          :class="percentValue > 0 ? 'text-red-500' : 'text-green-500'"
-          class="flex items-center gap-0.5"
-        >
-          {{ Math.abs(percentValue).toFixed(2) }}%
-          <IconifyIcon
-            :icon="
-              percentValue > 0 ? 'lucide:trending-up' : 'lucide:trending-down'
-            "
-            class="size-3"
-          />
-        </span>
-      </div>
-    </div>
-  </Card>
-</template>

apps/web-antd/src/views/mall/statistics/trade/modules/trade-trend-card.vue

@@ -103,6 +103,7 @@ const getTradeStatisticsList = async (times?: [Dayjs, Dayjs]) => {
   await renderEcharts(getTradeTrendChartOptions(processedList));
 };
 
+// TODO @AI：导出
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
@@ -222,7 +223,6 @@ onMounted(async () => {
           "
         />
       </Col>
-
       <Col :md="6" :sm="12" :xs="24" class="mb-4">
         <SummaryCard
           title="支出金额"
@@ -241,7 +241,6 @@ onMounted(async () => {
           "
         />
       </Col>
-
       <Col :md="6" :sm="12" :xs="24" class="mb-4">
         <SummaryCard
           title="余额支付金额"
@@ -260,7 +259,6 @@ onMounted(async () => {
           "
         />
       </Col>
-
       <Col :md="6" :sm="12" :xs="24" class="mb-4">
         <SummaryCard
           title="支付佣金金额"