feat：【mall 商城】商城首页的迁移【antd】45%：member-funnel-card.vue 修复缺陷

apps/web-antd/src/api/mall/statistics/member.ts

@@ -1,3 +1,5 @@
+import type { Dayjs } from 'dayjs';
+
 import type { DataComparisonRespVO } from './common';
 
 import { formatDate, formatDateTime } from '@vben/utils';
@@ -6,8 +8,8 @@ import { requestClient } from '#/api/request';
 
 export namespace MallMemberStatisticsApi {
   /** 会员分析 Request */
-  export interface AnalyseReq {
+  export interface MemberAnalyseReqVO {
-    times: Date[]; // 时间范围
+    times: Date[] | Dayjs[]; // 时间范围
   }
 
   /** 会员分析对照数据 Response */
@@ -77,7 +79,7 @@ export function getMemberSummary() {
 }
 
 /** 查询会员分析数据 */
-export function getMemberAnalyse(params: MallMemberStatisticsApi.AnalyseReq) {
+export function getMemberAnalyse(params: MallMemberStatisticsApi.MemberAnalyseReqVO) {
   return requestClient.get<MallMemberStatisticsApi.Analyse>(
     '/statistics/member/analyse',
     {

apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue

@@ -4,66 +4,35 @@ import type { Dayjs } from 'dayjs';
 import { onMounted, ref } from 'vue';
 
 import { DatePicker, Radio, RadioGroup } from 'ant-design-vue';
-import dayjs from 'dayjs';
 
 import { getRangePickerDefaultProps } from '#/utils/rangePickerProps';
 
 /** 快捷日期范围选择组件 */
 defineOptions({ name: 'ShortcutDateRangePicker' });
 
-/** 触发事件：时间范围选中 */
 const emits = defineEmits<{
   change: [times: [Dayjs, Dayjs]];
 }>();
 
-/** 时间范围类型枚举 */
-enum TimeRangeType {
-  LAST_7_DAYS = 7,
-  LAST_30_DAYS = 30,
-  YESTERDAY = 1,
-}
-
-const timeRangeType = ref<TimeRangeType>(TimeRangeType.LAST_7_DAYS); // 默认选中最近7天
 const times = ref<[Dayjs, Dayjs]>(); // 日期范围
 
-/** 获取 RangePicker 的默认配置 */
 const rangePickerProps = getRangePickerDefaultProps();
-
-/** 时间范围配置 */
 const timeRangeOptions = [
-  { label: '昨天', value: TimeRangeType.YESTERDAY },
+  rangePickerProps.presets[3]!, // 昨天
-  { label: '最近 7 天', value: TimeRangeType.LAST_7_DAYS },
+  rangePickerProps.presets[4]!, // 最近 7 天
-  { label: '最近 30 天', value: TimeRangeType.LAST_30_DAYS },
+  rangePickerProps.presets[5]!, // 最近 30 天
 ];
+const timeRangeType = ref(timeRangeOptions[1]!.label); // 默认选中第一个选项
 
 /** 设置时间范围 */
 function setTimes() {
-  let beginTime: Dayjs;
+  // 根据选中的选项设置时间范围
-  let endTime: Dayjs;
+  const selectedOption = timeRangeOptions.find(
-
+    (option) => option.label === timeRangeType.value,
-  switch (timeRangeType.value) {
+  );
-    case TimeRangeType.LAST_7_DAYS: {
+  if (selectedOption) {
-      beginTime = dayjs().subtract(7, 'day').startOf('day');
+    times.value = selectedOption.value as [Dayjs, Dayjs];
-      endTime = dayjs().subtract(1, 'day').endOf('day');
-      break;
-    }
-    case TimeRangeType.LAST_30_DAYS: {
-      beginTime = dayjs().subtract(30, 'day').startOf('day');
-      endTime = dayjs().subtract(1, 'day').endOf('day');
-      break;
-    }
-    case TimeRangeType.YESTERDAY: {
-      beginTime = dayjs().subtract(1, 'day').startOf('day');
-      endTime = dayjs().subtract(1, 'day').endOf('day');
-      break;
-    }
-    default: {
-      beginTime = dayjs().subtract(7, 'day').startOf('day');
-      endTime = dayjs().subtract(1, 'day').endOf('day');
-    }
   }
-
-  times.value = [beginTime, endTime];
 }
 
 /** 快捷日期单选按钮选中 */
@@ -100,17 +69,18 @@ onMounted(() => {
     >
       <Radio
         v-for="option in timeRangeOptions"
-        :key="option.value"
+        :key="option.label"
-        :value="option.value"
+        :value="option.label"
       >
         {{ option.label }}
       </Radio>
     </RadioGroup>
     <DatePicker.RangePicker
       v-model:value="times"
-      :show-time="rangePickerProps.showTime"
       :format="rangePickerProps.format"
       :value-format="rangePickerProps.valueFormat"
+      :placeholder="rangePickerProps.placeholder"
+      :presets="rangePickerProps.presets"
       class="!w-[240px]"
       @change="handleDateRangeChange"
     />

apps/web-antd/src/views/mall/home/index.vue

@@ -13,10 +13,10 @@ import { Col, Row } from 'ant-design-vue';
 import { getUserCountComparison } from '#/api/mall/statistics/member';
 import { getOrderComparison } from '#/api/mall/statistics/trade';
 
+import MemberFunnelCard from '../statistics/member/modules/funnel-card.vue';
+import MemberTerminalCard from '../statistics/member/modules/terminal-card.vue';
 import ComparisonCard from './modules/comparison-card.vue';
-import MemberFunnelCard from './modules/member-funnel-card.vue';
 import MemberStatisticsCard from './modules/member-statistics-card.vue';
-import MemberTerminalCard from './modules/member-terminal-card.vue';
 import OperationDataCard from './modules/operation-data-card.vue';
 import ShortcutCard from './modules/shortcut-card.vue';
 import TradeTrendCard from './modules/trade-trend-card.vue';

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

@@ -21,12 +21,10 @@ async function loadData(times: [Dayjs, Dayjs]) {
   if (!times || times.length !== 2) {
     return;
   }
-
   loading.value = true;
   try {
-    // 查询数据
     analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
-      times: [times[0].toDate(), times[1].toDate()],
+      times,
     });
   } finally {
     loading.value = false;
@@ -40,7 +38,9 @@ const handleTimeRangeChange = (times: [Dayjs, Dayjs]) => {
 
 /** 计算环比增长率 */
 const calculateRelativeRate = (value?: number, reference?: number) => {
-  if (!reference || reference === 0) return 0;
+  if (!reference || reference === 0) {
+    return 0;
+  }
   return (((value || 0) - reference) / reference) * 100;
 };
 </script>
@@ -53,17 +53,17 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
         <ShortcutDateRangePicker @change="handleTimeRangeChange" />
       </div>
     </template>
-    <div class="min-w-[900px] py-7">
+    <div class="min-w-[900px] py-4">
-      <div class="relative flex h-24">
+      <div class="flex h-24">
-        <div class="flex h-full w-[75%] bg-blue-50">
+        <div class="flex w-[75%] bg-blue-50">
-          <div class="ml-15 flex h-full flex-col justify-center">
+          <div class="ml-[50px] flex flex-col justify-center">
             <div class="font-bold">
-              注册用户数量：{{
+              注册用户数量：
-                analyseData?.comparison?.value?.registerUserCount || 0
+              {{ analyseData?.comparison?.value?.registerUserCount || 0 }}
-              }}
             </div>
             <div class="mt-2 text-sm">
-              环比增长率：{{
+              环比增长率：
+              {{
                 calculateRelativeRate(
                   analyseData?.comparison?.value?.registerUserCount,
                   analyseData?.comparison?.reference?.registerUserCount,
@@ -73,24 +73,24 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
           </div>
         </div>
         <div
-          class="trapezoid1 -ml-[154px] mt-1.5 flex h-full w-[308px] flex-col items-center justify-center bg-blue-500 text-sm text-white"
+          class="-ml-[154px] mt-1.5 flex w-[308px] flex-col items-center justify-center bg-blue-500 text-sm text-white [transform:perspective(5em)_rotateX(-11deg)]"
         >
-          <span class="text-2xl font-bold">{{
+          <span class="text-2xl font-bold">
-            analyseData?.visitUserCount || 0
+            {{ analyseData?.visitUserCount || 0 }}
-          }}</span>
+          </span>
           <span>访客</span>
         </div>
       </div>
-      <div class="relative flex h-24">
+      <div class="flex h-24">
-        <div class="flex h-full w-[75%] bg-cyan-50">
+        <div class="flex w-[75%] bg-cyan-50">
-          <div class="ml-15 flex h-full flex-col justify-center">
+          <div class="ml-[50px] flex flex-col justify-center">
             <div class="font-bold">
-              活跃用户数量：{{
+              活跃用户数量：
-                analyseData?.comparison?.value?.visitUserCount || 0
+              {{ analyseData?.comparison?.value?.visitUserCount || 0 }}
-              }}
             </div>
             <div class="mt-2 text-sm">
-              环比增长率：{{
+              环比增长率：
+              {{
                 calculateRelativeRate(
                   analyseData?.comparison?.value?.visitUserCount,
                   analyseData?.comparison?.reference?.visitUserCount,
@@ -100,25 +100,25 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
           </div>
         </div>
         <div
-          class="trapezoid2 -ml-[112px] mt-[6.8px] flex h-[100px] w-[224px] flex-col items-center justify-center bg-cyan-500 text-sm text-white"
+          class="-ml-[112px] mt-[6.8px] flex h-[100px] w-[224px] flex-col items-center justify-center bg-cyan-500 text-sm text-white [transform:perspective(7em)_rotateX(-20deg)]"
         >
-          <span class="text-2xl font-bold">{{
+          <span class="text-2xl font-bold">
-            analyseData?.orderUserCount || 0
+            {{ analyseData?.orderUserCount || 0 }}
-          }}</span>
+          </span>
           <span>下单</span>
         </div>
       </div>
-      <div class="relative flex h-24">
+      <div class="flex h-24">
         <div class="flex w-[75%] bg-slate-50">
-          <div class="ml-15 flex h-full flex-row gap-x-16">
+          <div class="ml-[50px] flex flex-row gap-x-16">
             <div class="flex flex-col justify-center">
               <div class="font-bold">
-                充值用户数量：{{
+                充值用户数量：
-                  analyseData?.comparison?.value?.rechargeUserCount || 0
+                {{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
-                }}
               </div>
               <div class="mt-2 text-sm">
-                环比增长率：{{
+                环比增长率：
+                {{
                   calculateRelativeRate(
                     analyseData?.comparison?.value?.rechargeUserCount,
                     analyseData?.comparison?.reference?.rechargeUserCount,
@@ -134,28 +134,14 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
           </div>
         </div>
         <div
-          class="trapezoid3 -ml-[72px] mt-[13px] flex h-[92px] w-[144px] flex-col items-center justify-center bg-slate-500 text-sm text-white"
+          class="-ml-[72px] mt-[13px] flex h-[92px] w-[144px] flex-col items-center justify-center bg-slate-500 text-sm text-white [transform:perspective(3em)_rotateX(-13deg)]"
         >
-          <span class="text-2xl font-bold">{{
+          <span class="text-2xl font-bold">
-            analyseData?.payUserCount || 0
+            {{ analyseData?.payUserCount || 0 }}
-          }}</span>
+          </span>
           <span>成交用户</span>
         </div>
       </div>
     </div>
   </Card>
 </template>
-
-<style lang="less" scoped>
-.trapezoid1 {
-  transform: perspective(5em) rotateX(-11deg);
-}
-
-.trapezoid2 {
-  transform: perspective(7em) rotateX(-20deg);
-}
-
-.trapezoid3 {
-  transform: perspective(3em) rotateX(-13deg);
-}
-</style>

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

@@ -10,7 +10,7 @@ import { Card, Spin } from 'ant-design-vue';
 
 import * as MemberStatisticsApi from '#/api/mall/statistics/member';
 
-import { getTerminalChartOptions } from './member-terminal-chart-options';
+import { getTerminalChartOptions } from './terminal-chart-options';
 
 /** 会员终端卡片 */
 defineOptions({ name: 'MemberTerminalCard' });
@@ -49,7 +49,7 @@ onMounted(() => {
 <template>
   <Card :bordered="false" title="会员终端" class="h-full">
     <Spin :spinning="loading">
-      <EchartsUI ref="chartRef" class="h-[380px] w-full" />
+      <EchartsUI ref="chartRef" class="h-[300px] w-full" />
     </Spin>
   </Card>
 </template>

packages/@core/base/shared/src/utils/date.ts

@@ -1,7 +1,7 @@
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 
 export function formatDate(
-  time: Date | number | string | undefined,
+  time: Date | Dayjs | number | string | undefined,
   format = 'YYYY-MM-DD',
 ) {
   if (!time) {
@@ -19,7 +19,9 @@ export function formatDate(
   }
 }
 
-export function formatDateTime(time: Date | number | string | undefined) {
+export function formatDateTime(
+  time: Date | Dayjs | number | string | undefined,
+) {
   if (!time) {
     return time;
   }