feat：【mall 商城】商城首页的迁移【antd】20%：初始化

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

@@ -1,5 +1,5 @@
 /** 数据对照 Response */
-export interface MallDataComparisonResp<T> {
+export interface DataComparisonRespVO<T> {
   value: T;
   reference: T;
 }

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

@@ -1,4 +1,4 @@
-import type { MallDataComparisonResp } from './common';
+import type { DataComparisonRespVO } from './common';
 
 import { formatDate } from '@vben/utils';
 
@@ -23,7 +23,7 @@ export namespace MallMemberStatisticsApi {
     orderUserCount: number; // 下单用户数
     payUserCount: number; // 支付用户数
     atv: number; // 平均客单价
-    comparison: MallDataComparisonResp<AnalyseComparison>; // 对照数据
+    comparison: DataComparisonRespVO<AnalyseComparison>; // 对照数据
   }
 
   /** 会员地区统计 Response */
@@ -57,7 +57,7 @@ export namespace MallMemberStatisticsApi {
   }
 
   /** 会员数量统计 Response */
-  export interface Count {
+  export interface MemberCountRespVO {
     visitUserCount: string; // 用户访问量
     registerUserCount: number; // 注册用户数量
   }
@@ -112,7 +112,7 @@ export function getMemberTerminalStatisticsList() {
 /** 获得用户数量量对照 */
 export function getUserCountComparison() {
   return requestClient.get<
-    MallDataComparisonResp<MallMemberStatisticsApi.Count>
+    DataComparisonRespVO<MallMemberStatisticsApi.MemberCountRespVO>
   >('/statistics/member/user-count-comparison');
 }
 

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

@@ -1,6 +1,6 @@
 import type { PageParam, PageResult } from '@vben/request';
 
-import type { MallDataComparisonResp } from './common';
+import type { DataComparisonRespVO } from './common';
 
 import { requestClient } from '#/api/request';
 
@@ -43,7 +43,7 @@ export namespace MallProductStatisticsApi {
 /** 获得商品统计分析 */
 export function getProductStatisticsAnalyse(params: PageParam) {
   return requestClient.get<
-    MallDataComparisonResp<MallProductStatisticsApi.ProductStatistics>
+    DataComparisonRespVO<MallProductStatisticsApi.ProductStatistics>
   >('/statistics/product/analyse', { params });
 }
 

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

@@ -1,4 +1,4 @@
-import type { MallDataComparisonResp } from './common';
+import type { DataComparisonRespVO } from './common';
 
 import { formatDate } from '@vben/utils';
 
@@ -43,7 +43,7 @@ export namespace MallTradeStatisticsApi {
   }
 
   /** 交易订单统计 Response */
-  export interface TradeOrderSummary {
+  export interface TradeOrderSummaryRespVO {
     /** 支付订单商品数 */
     orderPayCount?: number;
     /** 总支付金额，单位：分 */
@@ -71,7 +71,7 @@ const formatDateParam = (params: MallTradeStatisticsApi.TradeTrendReq) => {
 /** 查询交易统计 */
 export function getTradeStatisticsSummary() {
   return requestClient.get<
-    MallDataComparisonResp<MallTradeStatisticsApi.TradeSummary>
+    DataComparisonRespVO<MallTradeStatisticsApi.TradeSummary>
   >('/statistics/trade/summary');
 }
 
@@ -80,7 +80,7 @@ export function getTradeStatisticsAnalyse(
   params: MallTradeStatisticsApi.TradeTrendReq,
 ) {
   return requestClient.get<
-    MallDataComparisonResp<MallTradeStatisticsApi.TradeTrendSummary>
+    DataComparisonRespVO<MallTradeStatisticsApi.TradeTrendSummary>
   >('/statistics/trade/analyse', { params: formatDateParam(params) });
 }
 
@@ -113,7 +113,7 @@ export function getOrderCount() {
 /** 获得交易订单数量对照 */
 export function getOrderComparison() {
   return requestClient.get<
-    MallDataComparisonResp<MallTradeStatisticsApi.TradeOrderSummary>
+    DataComparisonRespVO<MallTradeStatisticsApi.TradeOrderSummaryRespVO>
   >('/statistics/trade/order-comparison');
 }
 
@@ -124,7 +124,7 @@ export function getOrderCountTrendComparison(
   endTime: Date,
 ) {
   return requestClient.get<
-    MallDataComparisonResp<MallTradeStatisticsApi.TradeOrderTrend>[]
+    DataComparisonRespVO<MallTradeStatisticsApi.TradeOrderTrend>[]
   >('/statistics/trade/order-count-trend', {
     params: {
       type,

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

@@ -1,13 +1,17 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import type { DataComparisonRespVO } from '#/api/mall/statistics/common';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
 
-import { Col, Row } from 'ant-design-vue';
+import { onMounted, ref } from 'vue';
 
 import { DocAlert, Page } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { Col, Row } from 'ant-design-vue';
+
+import { getUserCountComparison } from '#/api/mall/statistics/member';
+import { getOrderComparison } from '#/api/mall/statistics/trade';
 
 import ComparisonCard from './modules/comparison-card.vue';
 import MemberFunnelCard from './modules/member-funnel-card.vue';
@@ -21,23 +25,25 @@ import TradeTrendCard from './modules/trade-trend-card.vue';
 defineOptions({ name: 'MallHome' });
 
 const loading = ref(true); // 加载中
-const orderComparison = ref<any>(); // 交易对照数据
-const userComparison = ref<any>(); // 用户对照数据
+const orderComparison =
+  ref<DataComparisonRespVO<MallTradeStatisticsApi.TradeOrderSummaryRespVO>>(); // 交易对照数据
+const userComparison =
+  ref<DataComparisonRespVO<MallMemberStatisticsApi.MemberCountRespVO>>(); // 用户对照数据
 
 /** 查询交易对照卡片数据 */
-const getOrderComparison = async () => {
-  orderComparison.value = await TradeStatisticsApi.getOrderComparison();
-};
+async function loadOrderComparison() {
+  orderComparison.value = await getOrderComparison();
+}
 
 /** 查询会员用户数量对照卡片数据 */
-const getUserCountComparison = async () => {
-  userComparison.value = await MemberStatisticsApi.getUserCountComparison();
-};
+async function loadUserCountComparison() {
+  userComparison.value = await getUserCountComparison();
+}
 
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
-  await Promise.all([getOrderComparison(), getUserCountComparison()]);
+  await Promise.all([loadOrderComparison(), loadUserCountComparison()]);
   loading.value = false;
 });
 </script>
@@ -61,7 +67,9 @@ onMounted(async () => {
             prefix="￥"
             :decimals="2"
             :value="fenToYuan(orderComparison?.value?.orderPayPrice || 0)"
-            :reference="fenToYuan(orderComparison?.reference?.orderPayPrice || 0)"
+            :reference="
+              fenToYuan(orderComparison?.reference?.orderPayPrice || 0)
+            "
           />
         </Col>
         <Col :md="6" :sm="12" :xs="24">
@@ -89,7 +97,6 @@ onMounted(async () => {
           />
         </Col>
       </Row>
-
       <!-- 快捷入口和运营数据 -->
       <Row :gutter="16">
         <Col :md="12" :xs="24">
@@ -99,7 +106,6 @@ onMounted(async () => {
           <OperationDataCard />
         </Col>
       </Row>
-
       <!-- 会员概览和会员终端 -->
       <Row :gutter="16">
         <Col :md="18" :sm="24" :xs="24">
@@ -109,10 +115,8 @@ onMounted(async () => {
           <MemberTerminalCard />
         </Col>
       </Row>
-
       <!-- 交易量趋势 -->
       <TradeTrendCard />
-
       <!-- 会员统计 -->
       <MemberStatisticsCard />
     </div>

apps/web-antd/src/views/mall/home/modules/comparison-card.vue

@@ -1,31 +1,32 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import { Card, Tag } from 'ant-design-vue';
-
 import { IconifyIcon } from '@vben/icons';
 
-import { erpCalculatePercentage } from '@vben/utils';
+import { Card, Tag } from 'ant-design-vue';
 
 /** 交易对照卡片 */
 defineOptions({ name: 'ComparisonCard' });
 
-interface Props {
-  title: string;
-  tag?: string;
-  prefix?: string;
-  value: number | string;
-  reference: number | string;
-  decimals?: number;
-}
-
 const props = withDefaults(defineProps<Props>(), {
+  title: '',
   tag: '',
   prefix: '',
+  value: 0,
+  reference: 0,
   decimals: 0,
 });
 
-// 计算环比
+interface Props {
+  title?: string;
+  tag?: string;
+  prefix?: string;
+  value?: number | string;
+  reference?: number | string;
+  decimals?: number;
+}
+
+/** 计算环比百分比 */
 const percent = computed(() => {
   const refValue = Number(props.reference);
   const curValue = Number(props.value);
@@ -33,12 +34,13 @@ const percent = computed(() => {
   return ((curValue - refValue) / refValue) * 100;
 });
 
-// 格式化数值
+/** 格式化今日数据 */
 const formattedValue = computed(() => {
   const numValue = Number(props.value);
   return numValue.toFixed(props.decimals);
 });
 
+/** 格式化昨日数据 */
 const formattedReference = computed(() => {
   const numValue = Number(props.reference);
   return numValue.toFixed(props.decimals);
@@ -46,17 +48,18 @@ const formattedReference = computed(() => {
 </script>
 
 <template>
-  <Card :bordered="false" class="comparison-card">
+  <Card :bordered="false" class="h-full">
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between text-gray-500">
         <span>{{ title }}</span>
         <Tag v-if="tag">{{ tag }}</Tag>
       </div>
       <div class="flex items-baseline justify-between">
-        <div class="text-3xl font-semibold">
-          {{ prefix }}{{ formattedValue }}
-        </div>
-        <span :class="percent > 0 ? 'text-red-500' : 'text-green-500'">
+        <div class="text-3xl">{{ prefix }}{{ formattedValue }}</div>
+        <span
+          :class="percent > 0 ? 'text-red-500' : 'text-green-500'"
+          class="flex items-center gap-0.5"
+        >
           {{ Math.abs(percent).toFixed(2) }}%
           <IconifyIcon
             :icon="percent > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
@@ -73,10 +76,3 @@ const formattedReference = computed(() => {
     </div>
   </Card>
 </template>
-
-<style lang="less" scoped>
-.comparison-card {
-  height: 100%;
-}
-</style>
-