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

2025-10-19 15:37:48 +08:00
parent af61726e0e
commit 1628ab8cb5
7 changed files with 65 additions and 105 deletions
--- a/apps/web-antd/src/api/mall/statistics/member.ts
+++ b/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 {
-    times: Date[]; // 时间范围
+  export interface MemberAnalyseReqVO {
+    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',
    {
--- a/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue
+++ b/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 },
-  { label: '最近 7 天', value: TimeRangeType.LAST_7_DAYS },
-  { label: '最近 30 天', value: TimeRangeType.LAST_30_DAYS },
+  rangePickerProps.presets[3]!, // 昨天
+  rangePickerProps.presets[4]!, // 最近 7 天
+  rangePickerProps.presets[5]!, // 最近 30 天
 ];
+const timeRangeType = ref(timeRangeOptions[1]!.label); // 默认选中第一个选项

 /** 设置时间范围 */
 function setTimes() {
-  let beginTime: Dayjs;
-  let endTime: Dayjs;
-
-  switch (timeRangeType.value) {
-    case TimeRangeType.LAST_7_DAYS: {
-      beginTime = dayjs().subtract(7, 'day').startOf('day');
-      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');
-    }
+  // 根据选中的选项设置时间范围
+  const selectedOption = timeRangeOptions.find(
+    (option) => option.label === timeRangeType.value,
+  );
+  if (selectedOption) {
+    times.value = selectedOption.value as [Dayjs, Dayjs];
  }
-
-  times.value = [beginTime, endTime];
 }

 /** 快捷日期单选按钮选中 */
@@ -100,17 +69,18 @@ onMounted(() => {
    >
      <Radio
        v-for="option in timeRangeOptions"
-        :key="option.value"
-        :value="option.value"
+        :key="option.label"
+        :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"
    />
--- a/apps/web-antd/src/views/mall/home/index.vue
+++ b/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';
--- a/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue
+++ b/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="relative flex h-24">
-        <div class="flex h-full w-[75%] bg-blue-50">
-          <div class="ml-15 flex h-full flex-col justify-center">
+    <div class="min-w-[900px] py-4">
+      <div class="flex h-24">
+        <div class="flex w-[75%] bg-blue-50">
+          <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">{{
-            analyseData?.visitUserCount || 0
-          }}</span>
+          <span class="text-2xl font-bold">
+            {{ analyseData?.visitUserCount || 0 }}
+          </span>
          <span>访客</span>
        </div>
      </div>
-      <div class="relative flex h-24">
-        <div class="flex h-full w-[75%] bg-cyan-50">
-          <div class="ml-15 flex h-full flex-col justify-center">
+      <div class="flex h-24">
+        <div class="flex w-[75%] bg-cyan-50">
+          <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">{{
-            analyseData?.orderUserCount || 0
-          }}</span>
+          <span class="text-2xl font-bold">
+            {{ analyseData?.orderUserCount || 0 }}
+          </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">{{
-            analyseData?.payUserCount || 0
-          }}</span>
+          <span class="text-2xl font-bold">
+            {{ analyseData?.payUserCount || 0 }}
+          </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>
--- a/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue
+++ b/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>
--- a/apps/web-antd/src/views/mall/statistics/member/modules/terminal-chart-options.ts
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/terminal-chart-options.ts
--- a/packages/@core/base/shared/src/utils/date.ts
+++ b/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;
  }