feat: 更新日期格式化方法，新增多个统计卡片组件

- 将日期格式化方法从 formatDate 更新为 formatDate2，提升日期处理的灵活性
- 新增会员概览、用户统计、会员终端和交易量趋势等统计卡片组件
- 在商城首页引入新组件以展示关键会员和交易数据
- 优化数据获取逻辑，提升用户体验

apps/web-ele/src/views/mall/home/components/member-funnel-card.vue

@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { calculateRelativeRate, fenToYuan } from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+import ShortcutDateRangePicker from './shortcut-date-range-picker.vue';
+
+/** 会员概览卡片 */
+defineOptions({ name: 'MemberFunnelCard' });
+
+const loading = ref(true); // 加载中
+const analyseData = ref<MallMemberStatisticsApi.Analyse>(); // 会员分析数据
+
+/** 查询会员概览数据列表 */
+const handleTimeRangeChange = async (
+  times: [dayjs.ConfigType, dayjs.ConfigType],
+) => {
+  loading.value = true;
+  // 查询数据
+  analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
+    times: [dayjs(times[0]).toDate(), dayjs(times[1]).toDate()],
+  });
+  loading.value = false;
+};
+</script>
+<template>
+  <AnalysisChartCard title="会员概览">
+    <template #header-suffix>
+      <!-- 查询条件 -->
+      <ShortcutDateRangePicker @change="handleTimeRangeChange" />
+    </template>
+    <template #default>
+      <div class="min-w-225 py-1.75" v-loading="loading">
+        <div class="relative flex h-24">
+          <div
+            class="w-75% <lg:w-35% <xl:w-55% h-full bg-blue-50"
+            style="width: 75%"
+          >
+            <div class="ml-15 flex h-full flex-col justify-center">
+              <div class="font-bold">
+                注册用户数量：{{
+                  analyseData?.comparison?.value?.registerUserCount || 0
+                }}
+              </div>
+              <div class="text-3.5 mt-2">
+                环比增长率：{{
+                  calculateRelativeRate(
+                    analyseData?.comparison?.value?.registerUserCount,
+                    analyseData?.comparison?.reference?.registerUserCount,
+                  )
+                }}%
+              </div>
+            </div>
+          </div>
+          <div
+            class="trapezoid1 ml--38.5 w-77 text-3.5 mt-1.5 flex h-full flex-col items-center justify-center bg-blue-500 text-white"
+          >
+            <span class="text-6 font-bold">{{
+              analyseData?.visitUserCount || 0
+            }}</span>
+            <span>访客</span>
+          </div>
+        </div>
+        <div class="relative flex h-24">
+          <div
+            class="w-75% <lg:w-35% <xl:w-55% flex h-full bg-cyan-50"
+            style="width: 75%"
+          >
+            <div class="ml-15 flex h-full flex-col justify-center">
+              <div class="font-bold">
+                活跃用户数量：{{
+                  analyseData?.comparison?.value?.visitUserCount || 0
+                }}
+              </div>
+              <div class="text-3.5 mt-2">
+                环比增长率：{{
+                  calculateRelativeRate(
+                    analyseData?.comparison?.value?.visitUserCount,
+                    analyseData?.comparison?.reference?.visitUserCount,
+                  )
+                }}%
+              </div>
+            </div>
+          </div>
+          <div
+            class="trapezoid2 mt-1.7 h-25 text-3.5 ml--28 flex w-56 flex-col items-center justify-center bg-cyan-500 text-white"
+          >
+            <span class="text-6 font-bold">{{
+              analyseData?.orderUserCount || 0
+            }}</span>
+            <span>下单</span>
+          </div>
+        </div>
+        <div class="relative flex h-24">
+          <div
+            class="w-75% <lg:w-35% <xl:w-55% flex bg-slate-50"
+            style="width: 75%"
+          >
+            <div class="ml-15 flex h-full flex-row gap-x-16">
+              <div class="flex flex-col justify-center">
+                <div class="font-bold">
+                  充值用户数量：{{
+                    analyseData?.comparison?.value?.rechargeUserCount || 0
+                  }}
+                </div>
+                <div class="text-3.5 mt-2">
+                  环比增长率：{{
+                    calculateRelativeRate(
+                      analyseData?.comparison?.value?.rechargeUserCount,
+                      analyseData?.comparison?.reference?.rechargeUserCount,
+                    )
+                  }}%
+                </div>
+              </div>
+              <div class="flex flex-col justify-center">
+                <div class="font-bold">
+                  客单价：{{ fenToYuan(analyseData?.atv || 0) }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="trapezoid3 ml--18 mt-3.25 h-23 text-3.5 flex w-36 flex-col items-center justify-center bg-slate-500 text-white"
+          >
+            <span class="text-6 font-bold">{{
+              analyseData?.payUserCount || 0
+            }}</span>
+            <span>成交用户</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </AnalysisChartCard>
+</template>
+<style lang="scss" scoped>
+.trapezoid1 {
+  transform: perspective(5em) rotateX(-11deg);
+  font-size: 0.875rem;
+  width: 19.25rem;
+  margin-left: -9.625rem;
+}
+
+.trapezoid2 {
+  transform: perspective(7em) rotateX(-20deg);
+  font-size: 0.875rem;
+  width: 14rem;
+  margin-left: -7rem;
+  height: 6.25rem;
+  margin-top: 0.425rem;
+}
+
+.trapezoid3 {
+  transform: perspective(3em) rotateX(-13deg);
+  font-size: 0.875rem;
+  width: 9rem;
+  height: 5.75rem;
+  margin-top: 0.8125rem;
+  margin-left: -4.5rem;
+}
+</style>