From c6a627c95be062c1f86b744baf31b76a53317962 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 9 Jun 2025 14:11:07 +0800
Subject: [PATCH] feat: add summaryCard comps

---
 .../src/components/summary-card/index.ts      |  2 +
 .../components/summary-card/summary-card.vue  | 52 +++++++++++++++++++
 .../src/components/summary-card/typing.ts     | 11 ++++
 3 files changed, 65 insertions(+)
 create mode 100644 apps/web-antd/src/components/summary-card/index.ts
 create mode 100644 apps/web-antd/src/components/summary-card/summary-card.vue
 create mode 100644 apps/web-antd/src/components/summary-card/typing.ts

diff --git a/apps/web-antd/src/components/summary-card/index.ts b/apps/web-antd/src/components/summary-card/index.ts
new file mode 100644
index 000000000..598d73d61
--- /dev/null
+++ b/apps/web-antd/src/components/summary-card/index.ts
@@ -0,0 +1,2 @@
+export { default as SummaryCard } from './summary-card.vue';
+export type { SummaryCardProps } from './typing';
diff --git a/apps/web-antd/src/components/summary-card/summary-card.vue b/apps/web-antd/src/components/summary-card/summary-card.vue
new file mode 100644
index 000000000..6778a9c40
--- /dev/null
+++ b/apps/web-antd/src/components/summary-card/summary-card.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { SummaryCardProps } from './typing';
+
+import { CountTo } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Tooltip } from 'ant-design-vue';
+
+/** 统计卡片 */
+defineOptions({ name: 'SummaryCard' });
+
+defineProps<SummaryCardProps>();
+</script>
+<template>
+  <div
+    class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
+  >
+    <div
+      class="rounded-1 flex h-12 w-12 flex-shrink-0 items-center justify-center"
+      :class="`${iconColor} ${iconBgColor}`"
+    >
+      <IconifyIcon v-if="icon" :icon="icon" class="!text-6" />
+    </div>
+    <div class="flex flex-col gap-1">
+      <div class="flex items-center gap-1">
+        <span class="text-3.5">{{ title }}</span>
+        <Tooltip :content="tooltip" placement="topLeft" v-if="tooltip">
+          <IconifyIcon icon="ep:warning" class="item-center !text-3 flex" />
+        </Tooltip>
+      </div>
+      <div class="flex flex-row items-baseline gap-2">
+        <div class="text-7">
+          <CountTo
+            :prefix="prefix"
+            :end-val="value ?? 0"
+            :decimals="decimals ?? 0"
+          />
+        </div>
+        <span
+          v-if="percent !== undefined"
+          :class="Number(percent) > 0 ? 'text-red-500' : 'text-green-500'"
+        >
+          <span class="text-sm">{{ Math.abs(Number(percent)) }}%</span>
+          <IconifyIcon
+            :icon="Number(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
+            class="!text-3 ml-0.5"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/summary-card/typing.ts b/apps/web-antd/src/components/summary-card/typing.ts
new file mode 100644
index 000000000..0ef1fdc6f
--- /dev/null
+++ b/apps/web-antd/src/components/summary-card/typing.ts
@@ -0,0 +1,11 @@
+export interface SummaryCardProps {
+  title: string;
+  tooltip?: string;
+  icon?: string;
+  iconColor?: string;
+  iconBgColor?: string;
+  prefix?: string;
+  value?: number;
+  decimals?: number;
+  percent?: number | string;
+}