From a442eab9ea421c0677eb8fcf1d5682fd7d1ac688 Mon Sep 17 00:00:00 2001
From: lrl <252048765@qq.com>
Date: Thu, 17 Jul 2025 10:35:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=92=8C=E7=BB=9F=E8=AE=A1=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在组件类型中新增 'ApiCascader' 以支持更多业务需求
- 在商品统计概览中为多个统计项添加 tooltip，提供更清晰的数据解释
- 优化交易统计页面，重构数据加载逻辑，提升用户体验
---
 apps/web-ele/src/adapter/component/index.ts   |  2 +-
 .../product/components/product-summary.vue    |  4 +
 .../src/views/mall/statistics/trade/index.vue | 85 ++++++++++++++-----
 3 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/apps/web-ele/src/adapter/component/index.ts b/apps/web-ele/src/adapter/component/index.ts
index 0804f9f69..03845253a 100644
--- a/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/web-ele/src/adapter/component/index.ts
@@ -163,6 +163,7 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiCascader'
   | 'ApiSelect'
   | 'ApiTreeSelect'
   | 'Checkbox'
@@ -184,7 +185,6 @@ export type ComponentType =
   | 'TimePicker'
   | 'TreeSelect'
   | 'Upload'
-  | 'ApiCascader'
   | BaseFormComponentType;
 
 async function initComponentAdapter() {
diff --git a/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue b/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue
index bc1562551..1a7717144 100644
--- a/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue
+++ b/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue
@@ -242,6 +242,7 @@ const loadOverview = () => {
       totalTitle: '昨日数据',
       totalValue: trendSummary.value?.reference?.orderPayCount || 0,
       value: trendSummary.value?.value?.orderPayCount || 0,
+      tooltip: '在选定条件下，成功付款订单的商品件数之和',
     },
     {
       icon: SvgBellIcon,
@@ -249,6 +250,7 @@ const loadOverview = () => {
       totalTitle: '昨日数据',
       totalValue: trendSummary.value?.reference?.afterSaleCount || 0,
       value: trendSummary.value?.value?.orderPayPrice || 0,
+      tooltip: '在选定条件下，成功付款订单的商品金额之和',
     },
     {
       icon: SvgBellIcon,
@@ -256,6 +258,7 @@ const loadOverview = () => {
       totalTitle: '昨日数据',
       totalValue: trendSummary.value?.reference?.afterSaleCount || 0,
       value: trendSummary.value?.value?.afterSaleCount || 0,
+      tooltip: '在选定条件下，成功退款的商品件数之和',
     },
     {
       icon: SvgBellIcon,
@@ -263,6 +266,7 @@ const loadOverview = () => {
       totalTitle: '昨日数据',
       totalValue: trendSummary.value?.reference?.afterSaleRefundPrice || 0,
       value: trendSummary.value?.value?.afterSaleRefundPrice || 0,
+      tooltip: '在选定条件下，成功退款的商品金额之和',
     },
   ];
 };
diff --git a/apps/web-ele/src/views/mall/statistics/trade/index.vue b/apps/web-ele/src/views/mall/statistics/trade/index.vue
index dd0e7eb2b..bfd20d4bf 100644
--- a/apps/web-ele/src/views/mall/statistics/trade/index.vue
+++ b/apps/web-ele/src/views/mall/statistics/trade/index.vue
@@ -1,7 +1,63 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { AnalysisOverviewItem } from '@vben/common-ui';
 
-import { ElButton } from 'element-plus';
+import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
+
+import { onMounted, ref } from 'vue';
+
+import { AnalysisOverview, DocAlert, Page } from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgDownloadIcon,
+  SvgEyeIcon,
+} from '@vben/icons';
+
+import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+
+const overviewItems = ref<AnalysisOverviewItem[]>();
+const summary =
+  ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeSummary>>();
+const loadOverview = () => {
+  overviewItems.value = [
+    {
+      icon: SvgEyeIcon,
+      title: '昨日订单数量',
+      value: summary.value?.value?.yesterdayOrderCount || 0,
+      tooltip: '昨日订单数量',
+    },
+    {
+      icon: SvgCakeIcon,
+      title: '本月订单数量',
+      value: summary.value?.value?.monthOrderCount || 0,
+      tooltip: '本月订单数量',
+    },
+    {
+      icon: SvgDownloadIcon,
+      title: '昨日支付金额',
+      value: summary.value?.value?.yesterdayPayPrice || 0,
+      tooltip: '昨日支付金额',
+    },
+    {
+      icon: SvgBellIcon,
+      title: '本月支付金额',
+      value: summary.value?.value?.monthPayPrice || 0,
+      tooltip: '本月支付金额',
+    },
+  ];
+};
+
+/** 查询交易统计 */
+const getTradeStatisticsSummary = async () => {
+  summary.value = await TradeStatisticsApi.getTradeStatisticsSummary();
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getTradeStatisticsSummary();
+  loadOverview();
+});
 </script>
 
 <template>
@@ -10,25 +66,10 @@ import { ElButton } from 'element-plus';
       title="【统计】会员、商品、交易统计"
       url="https://doc.iocoder.cn/mall/statistics/"
     />
-    <ElButton
-      danger
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </ElButton>
-    <br />
-    <ElButton
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/trade/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/trade/index
-      代码，pull request 贡献给我们！
-    </ElButton>
+    <!-- 统计值 -->
+    <AnalysisOverview
+      v-model:model-value="overviewItems"
+      class="mt-5 md:mr-4 md:mt-0 md:w-full"
+    />
   </Page>
 </template>