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="支付佣金金额"

packages/effects/common-ui/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './json-viewer';
 export * from './loading';
 export * from './page';
 export * from './resize';
+export * from './statistic-card';
 export * from './summary-card';
 export * from './tippy';
 export * from './tree';

packages/effects/common-ui/src/components/statistic-card/index.ts

@@ -0,0 +1,4 @@
+// add by 芋艿：统计卡片，目前 mall 模块在使用
+export { default as StatisticCard } from './statistic-card.vue';
+export * from './types';
+

packages/effects/common-ui/src/components/statistic-card/statistic-card.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import type { StatisticCardProps } from './types';
+
+import {
+  Card,
+  CardContent,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  VbenCountToAnimator,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+/** 统计卡片 */
+defineOptions({ name: 'StatisticCard' });
+
+withDefaults(defineProps<StatisticCardProps>(), {
+  percentLabel: '环比',
+});
+</script>
+
+<template>
+  <Card class="h-full">
+    <CardContent class="flex flex-col gap-2 p-6">
+      <div class="text-muted-foreground flex items-center justify-between">
+        <span class="text-sm">{{ title }}</span>
+        <TooltipProvider v-if="tooltip">
+          <Tooltip>
+            <TooltipTrigger>
+              <VbenIcon
+                icon="lucide:circle-alert"
+                class="text-muted-foreground size-4 cursor-help"
+              />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{{ tooltip }}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div class="mb-4 text-3xl font-medium">
+        <VbenCountToAnimator
+          :prefix="prefix"
+          :end-val="value ?? 0"
+          :decimals="decimals ?? 0"
+        />
+      </div>
+      <div class="flex flex-row gap-1 text-sm">
+        <span class="text-muted-foreground">{{ percentLabel }}</span>
+        <span
+          :class="
+            Number(percent) > 0
+              ? 'text-destructive'
+              : 'text-emerald-600 dark:text-emerald-400'
+          "
+          class="flex items-center gap-0.5"
+        >
+          {{ Math.abs(Number(percent ?? 0)).toFixed(2) }}%
+          <VbenIcon
+            :icon="
+              Number(percent) > 0 ? 'lucide:trending-up' : 'lucide:trending-down'
+            "
+            class="size-3"
+          />
+        </span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
+

packages/effects/common-ui/src/components/statistic-card/types.ts

@@ -0,0 +1,17 @@
+export interface StatisticCardProps {
+  /** 标题 */
+  title: string;
+  /** 提示信息 */
+  tooltip?: string;
+  /** 前缀 */
+  prefix?: string;
+  /** 数值 */
+  value?: number;
+  /** 小数位数 */
+  decimals?: number;
+  /** 环比百分比 */
+  percent?: number | string;
+  /** 环比标签文本 */
+  percentLabel?: string;
+}
+