feat: 更新组件类型和统计数据展示

- 在组件类型中新增 'ApiCascader' 以支持更多业务需求
- 在商品统计概览中为多个统计项添加 tooltip，提供更清晰的数据解释
- 优化交易统计页面，重构数据加载逻辑，提升用户体验

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() {

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: '在选定条件下，成功退款的商品金额之和',
     },
   ];
 };

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
+    <AnalysisOverview
-      type="primary"
+      v-model:model-value="overviewItems"
-      link
+      class="mt-5 md:mr-4 md:mt-0 md:w-full"
-      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>
   </Page>
 </template>