feat: 新增会员统计组件和优化数据展示

- 在会员统计页面中新增会员地域分布和性别分布组件
- 更新会员统计 API，支持获取会员汇总和地区统计数据
- 优化数据加载逻辑，提升用户体验
- 引入分析概览组件以展示关键统计信息

apps/web-ele/src/views/mall/statistics/member/index.vue

@@ -1,7 +1,57 @@
 <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 { MallMemberStatisticsApi } from '#/api/mall/statistics/member'; // 会员统计数据
+
+import { onMounted, ref } from 'vue';
+
+import { AnalysisOverview, DocAlert, Page } from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member'; // 会员统计数据
+import MemberFunnelCard from '#/views/mall/home/components/member-funnel-card.vue';
+import MemberTerminalCard from '#/views/mall/home/components/member-terminal-card.vue';
+
+import MemberRegionCard from './components/member-region-card.vue';
+import MemberSexCard from './components/member-sex-card.vue';
+
+const summary = ref<MallMemberStatisticsApi.Summary>();
+
+const overviewItems = ref<AnalysisOverviewItem[]>([]);
+const loadOverview = async () => {
+  summary.value = await MemberStatisticsApi.getMemberSummary();
+  overviewItems.value = [
+    {
+      icon: SvgCardIcon,
+      title: '累计会员数',
+      value: summary.value?.userCount || 0,
+    },
+    {
+      icon: SvgCakeIcon,
+      title: '累计充值人数',
+      value: summary.value?.rechargeUserCount || 0,
+    },
+    {
+      icon: SvgDownloadIcon,
+      title: '累计充值金额',
+      value: summary.value?.rechargePrice || 0,
+    },
+    {
+      icon: SvgBellIcon,
+      title: '今日会员注册量',
+      value: summary.value?.expensePrice || 0,
+    },
+  ];
+};
+
+onMounted(async () => {
+  loadOverview();
+});
 </script>
 
 <template>
@@ -10,25 +60,19 @@ 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/member/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index
-      代码，pull request 贡献给我们！
-    </ElButton>
+    <div class="mt-5 w-full md:flex">
+      <AnalysisOverview
+        v-model:model-value="overviewItems"
+        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+      />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberFunnelCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberTerminalCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberRegionCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberSexCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
   </Page>
 </template>