From 90dc091959bac8393103f0e4d9ef55349f1e583f Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Thu, 31 Jul 2025 17:45:10 +0800
Subject: [PATCH] chore(vben5-platform): add component `WorkbenchTrends`

---
 .../workbench/components/WorkbenchTrends.vue  | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 apps/vben5/packages/@abp/platform/src/components/workbench/components/WorkbenchTrends.vue

diff --git a/apps/vben5/packages/@abp/platform/src/components/workbench/components/WorkbenchTrends.vue b/apps/vben5/packages/@abp/platform/src/components/workbench/components/WorkbenchTrends.vue
new file mode 100644
index 000000000..48267cdb4
--- /dev/null
+++ b/apps/vben5/packages/@abp/platform/src/components/workbench/components/WorkbenchTrends.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { WorkbenchTrendItem } from '@vben/common-ui';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchTrendItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchTrends',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <slot v-if="items.length === 0" name="empty"></slot>
+    <CardContent v-else class="flex flex-wrap p-5 pt-0">
+      <ul class="divide-border w-full divide-y" role="list">
+        <li
+          v-for="item in items"
+          :key="item.title"
+          class="flex justify-between gap-x-6 py-5"
+        >
+          <div class="flex min-w-0 items-center gap-x-4">
+            <VbenIcon
+              :icon="item.avatar"
+              alt=""
+              class="size-10 flex-none rounded-full"
+            />
+            <div class="min-w-0 flex-auto">
+              <p class="text-foreground text-sm font-semibold leading-6">
+                {{ item.title }}
+              </p>
+              <!-- eslint-disable vue/no-v-html -->
+              <p
+                class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
+                v-html="item.content"
+              ></p>
+            </div>
+          </div>
+          <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
+            <span class="text-foreground/80 mt-6 text-xs leading-6">
+              {{ item.date }}
+            </span>
+          </div>
+        </li>
+      </ul>
+    </CardContent>
+  </Card>
+</template>