feat：【mall 商城】会员统计【antd】20% sex-card.vue 完善

apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue

@@ -1,21 +1,17 @@
 <script lang="ts" setup>
 import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
 
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-
-import { Card } from 'ant-design-vue';
-
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-// 获取字典选项
-function getIntDictOptions(dictType: string) {
-  return getDictOptions(dictType, 'number');
-}
+import { Card, Spin } from 'ant-design-vue';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
 
 import { getSexChartOptions } from './sex-chart-options';
 
@@ -31,19 +27,18 @@ async function getMemberSexStatisticsList() {
   loading.value = true;
   try {
     const list = await MemberStatisticsApi.getMemberSexStatisticsList();
-    const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
+    const dictDataList = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number');
     dictDataList.push({ label: '未知', value: null } as any);
-    
     const chartData = dictDataList.map((dictData: any) => {
       const userCount = list.find(
-        (item: MallMemberStatisticsApi.SexStatistics) => item.sex === dictData.value,
+        (item: MallMemberStatisticsApi.SexStatistics) =>
+          item.sex === dictData.value,
       )?.userCount;
       return {
         name: dictData.label,
         value: userCount || 0,
       };
     });
-    
     await renderEcharts(getSexChartOptions(chartData));
   } finally {
     loading.value = false;
@@ -57,7 +52,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card :bordered="false" title="会员性别比例" :loading="loading">
-    <EchartsUI ref="chartRef" class="h-[300px] w-full" />
+  <Card :bordered="false" title="会员性别比例" class="h-full">
+    <Spin :spinning="loading">
+      <EchartsUI ref="chartRef" />
+    </Spin>
   </Card>
 </template>

apps/web-antd/src/views/mall/statistics/member/modules/sex-chart-options.ts

@@ -1,12 +1,5 @@
-import type { EChartsOption } from 'echarts';
-
-interface ChartData {
-  name: string;
-  value: number;
-}
-
 /** 会员性别比例图表配置 */
-export function getSexChartOptions(data: ChartData[]): EChartsOption {
+export function getSexChartOptions(data: any[]): any {
   return {
     tooltip: {
       trigger: 'item',