feat：summary-card 重构到 common-ui 里！

packages/effects/common-ui/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './col-page';
 export * from './content-wrap';
 export * from './count-to';
 export * from './doc-alert';
+export * from './summary-card';
 export * from './ellipsis-text';
 export * from './icon-picker';
 export * from './iframe';

packages/effects/common-ui/src/components/summary-card/index.ts

@@ -0,0 +1,3 @@
+// add by 芋艿：总结卡片，目前 mall 模块在使用
+export { default as SummaryCard } from './summary-card.vue';
+export * from './types';

packages/effects/common-ui/src/components/summary-card/summary-card.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { SummaryCardProps } from './types';
+
+import {
+  Card,
+  CardContent,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  VbenCountToAnimator,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+/** 统计卡片 */
+defineOptions({ name: 'SummaryCard' });
+
+defineProps<SummaryCardProps>();
+</script>
+
+<template>
+  <Card class="h-full">
+    <CardContent class="flex items-center gap-3 p-6">
+      <div
+        v-if="icon"
+        class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
+        :class="`${iconColor} ${iconBgColor}`"
+      >
+        <VbenIcon :icon="icon" class="size-6" />
+      </div>
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-1">
+          <span class="text-sm text-muted-foreground">{{ title }}</span>
+          <TooltipProvider v-if="tooltip">
+            <Tooltip>
+              <TooltipTrigger>
+                <VbenIcon
+                  icon="lucide:circle-alert"
+                  class="size-3 text-muted-foreground"
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{{ tooltip }}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+        <div class="flex flex-row items-baseline gap-2">
+          <div class="text-2xl">
+            <VbenCountToAnimator
+              :prefix="prefix"
+              :end-val="value ?? 0"
+              :decimals="decimals ?? 0"
+            />
+          </div>
+          <span
+            v-if="percent !== undefined"
+            :class="
+              Number(percent) > 0
+                ? 'text-destructive'
+                : 'text-emerald-600 dark:text-emerald-400'
+            "
+            class="flex items-center"
+          >
+            <span class="text-sm">{{ Math.abs(Number(percent)) }}%</span>
+            <VbenIcon
+              :icon="
+                Number(percent) > 0
+                  ? 'lucide:chevron-up'
+                  : 'lucide:chevron-down'
+              "
+              class="ml-0.5 size-3"
+            />
+          </span>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>

packages/effects/common-ui/src/components/summary-card/types.ts

@@ -0,0 +1,22 @@
+import type { Component } from 'vue';
+
+export interface SummaryCardProps {
+  /** 标题 */
+  title: string;
+  /** 提示信息 */
+  tooltip?: string;
+  /** 图标 */
+  icon?: Component | string;
+  /** 图标颜色 */
+  iconColor?: string;
+  /** 图标背景色 */
+  iconBgColor?: string;
+  /** 前缀 */
+  prefix?: string;
+  /** 数值 */
+  value?: number;
+  /** 小数位数 */
+  decimals?: number;
+  /** 百分比 */
+  percent?: number | string;
+}