refactor: 重构商场首页和统计页面组件

- 新等组件
- 优化 Work增 AnalysisOverview、AnalysisOverviewIconbenchQuickDataShow 组件的使用
- 更新图标使用方式，移除自定义 SVG 图标
-提升页面视觉效果 调整布局和样式，

apps/web-ele/src/views/mall/statistics/trade/index.vue

@@ -1,54 +1,62 @@
 <script lang="ts" setup>
-import type { AnalysisOverviewItem } from '@vben/common-ui';
-
 import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
 import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
+import type { AnalysisOverviewTradeItem } from '#/views/mall/home/components/data';
 
 import { onMounted, ref } from 'vue';
 
-import { AnalysisOverview, DocAlert, Page } from '@vben/common-ui';
-import { SvgCakeIcon, SvgCardIcon } from '@vben/icons';
+import { DocAlert, Page } from '@vben/common-ui';
+import { calculateRelativeRate, fenToYuan } from '@vben/utils';
 
 import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import analysisTradeOverview from '#/views/mall/home/components/analysis-trade-overview.vue';
 
 import TradeTransactionCard from './components/trade-transaction-card.vue';
 
-const overviewItems = ref<AnalysisOverviewItem[]>();
+const overviewItems = ref<AnalysisOverviewTradeItem[]>();
 const summary =
   ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeSummary>>();
 const loadOverview = () => {
   overviewItems.value = [
     {
-      icon: SvgCakeIcon,
       title: '昨日订单数量',
       value: summary.value?.value?.yesterdayOrderCount || 0,
       tooltip: '昨日订单数量',
-      totalValue: summary?.value?.reference?.yesterdayOrderCount,
-      showGrowthRate: true,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.yesterdayOrderCount,
+        summary.value?.reference?.yesterdayOrderCount,
+      ),
     },
     {
-      icon: SvgCakeIcon,
       title: '本月订单数量',
       value: summary.value?.value?.monthOrderCount || 0,
       tooltip: '本月订单数量',
-      totalValue: summary?.value?.reference?.monthOrderCount,
-      showGrowthRate: true,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.monthOrderCount,
+        summary.value?.reference?.monthOrderCount,
+      ),
     },
     {
-      icon: SvgCardIcon,
       title: '昨日支付金额',
-      value: summary.value?.value?.yesterdayPayPrice || 0,
+      value: Number(fenToYuan(summary.value?.value?.yesterdayPayPrice || 0)),
       tooltip: '昨日支付金额',
-      totalValue: summary?.value?.reference?.yesterdayPayPrice,
-      showGrowthRate: true,
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.yesterdayPayPrice,
+        summary.value?.reference?.yesterdayPayPrice,
+      ),
     },
     {
-      icon: SvgCardIcon,
       title: '本月支付金额',
       value: summary.value?.value?.monthPayPrice || 0,
       tooltip: '本月支付金额',
-      totalValue: summary?.value?.reference?.monthPayPrice,
-      showGrowthRate: true,
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.monthPayPrice,
+        summary.value?.reference?.monthPayPrice,
+      ),
     },
   ];
 };
@@ -73,7 +81,7 @@ onMounted(async () => {
     />
     <!-- 统计值 -->
     <div class="mb-4 mt-5 w-full md:flex">
-      <AnalysisOverview
+      <analysisTradeOverview
         v-model:model-value="overviewItems"
         class="mt-5 md:mr-4 md:mt-0 md:w-full"
       />