feat：【全局】融合下 common card 目录的功能

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

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

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

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import type { StatisticCardProps } from './types';
+
+import {
+  Card,
+  CardContent,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  VbenCountToAnimator,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+/** 统计卡片 */
+defineOptions({ name: 'StatisticCard' });
+
+withDefaults(defineProps<StatisticCardProps>(), {
+  percentLabel: '环比',
+});
+</script>
+
+<template>
+  <Card class="h-full">
+    <CardContent class="flex flex-col gap-2 p-6">
+      <div class="text-muted-foreground flex items-center justify-between">
+        <span class="text-sm">{{ title }}</span>
+        <TooltipProvider v-if="tooltip">
+          <Tooltip>
+            <TooltipTrigger>
+              <VbenIcon
+                icon="lucide:circle-alert"
+                class="text-muted-foreground size-4 cursor-help"
+              />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{{ tooltip }}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div class="mb-4 text-3xl font-medium">
+        <VbenCountToAnimator
+          :prefix="prefix"
+          :end-val="value ?? 0"
+          :decimals="decimals ?? 0"
+        />
+      </div>
+      <div class="flex flex-row gap-1 text-sm">
+        <span class="text-muted-foreground">{{ percentLabel }}</span>
+        <span
+          :class="
+            Number(percent) > 0
+              ? 'text-destructive'
+              : 'text-emerald-600 dark:text-emerald-400'
+          "
+          class="flex items-center gap-0.5"
+        >
+          {{ Math.abs(Number(percent ?? 0)).toFixed(2) }}%
+          <VbenIcon
+            :icon="
+              Number(percent) > 0
+                ? 'lucide:trending-up'
+                : 'lucide:trending-down'
+            "
+            class="size-3"
+          />
+        </span>
+      </div>
+    </CardContent>
+  </Card>
+</template>

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

@@ -0,0 +1,16 @@
+export interface StatisticCardProps {
+  /** 标题 */
+  title: string;
+  /** 提示信息 */
+  tooltip?: string;
+  /** 前缀 */
+  prefix?: string;
+  /** 数值 */
+  value?: number;
+  /** 小数位数 */
+  decimals?: number;
+  /** 环比百分比 */
+  percent?: number | string;
+  /** 环比标签文本 */
+  percentLabel?: string;
+}

packages/effects/common-ui/src/components/card/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/card/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-muted-foreground text-sm">{{ title }}</span>
+          <TooltipProvider v-if="tooltip">
+            <Tooltip>
+              <TooltipTrigger>
+                <VbenIcon
+                  icon="lucide:circle-alert"
+                  class="text-muted-foreground size-3"
+                />
+              </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/card/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;
+}