refactor: 添加首页图

packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview-card.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { AnalysisOverviewItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenCountToAnimator,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  item?: AnalysisOverviewItem;
+}
+
+defineOptions({
+  name: 'AnalysisOverview',
+});
+
+withDefaults(defineProps<Props>(), {
+  item: () => ({
+    title: '',
+    value: 0,
+    icon: '',
+    totalTitle: '',
+    totalValue: 0,
+    // Add other properties required by AnalysisOverviewItem here
+  }),
+});
+</script>
+
+<template>
+  <Card :title="item.title">
+    <CardHeader>
+      <CardTitle class="text-xl">{{ item.title }}</CardTitle>
+    </CardHeader>
+
+    <CardContent class="flex items-center justify-between">
+      <VbenCountToAnimator
+        :end-val="item.value"
+        :start-val="1"
+        :unit="item.title === '签单率' ? '%' : ''"
+        class="mt-5 size-12 text-3xl"
+        prefix=""
+      />
+      <!-- <VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" /> -->
+      <span :class="item.icon" class="mt-5"></span>
+    </CardContent>
+    <!-- <CardFooter class="justify-between">
+          <span>{{ item.totalTitle }}</span>
+          <VbenCountToAnimator
+            :end-val="item.totalValue"
+            :start-val="1"
+            prefix=""
+          />
+        </CardFooter> -->
+  </Card>
+</template>

packages/effects/common-ui/src/ui/dashboard/analysis/index.ts

@@ -1,3 +1,4 @@
 export { default as AnalysisChartCard } from './analysis-chart-card.vue';
 export { default as AnalysisChartsTabs } from './analysis-charts-tabs.vue';
+export { default as AnalysisOverviewCard } from './analysis-overview-card.vue';
 export { default as AnalysisOverview } from './analysis-overview.vue';