From 3377b7abab1f6dc1ba4ea669fd509cc2fe4beac5 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Thu, 31 Jul 2025 17:44:42 +0800
Subject: [PATCH] chore(vben5-platform): add component `WorkbenchHeader`

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

diff --git a/apps/vben5/packages/@abp/platform/src/components/workbench/components/WorkbenchHeader.vue b/apps/vben5/packages/@abp/platform/src/components/workbench/components/WorkbenchHeader.vue
new file mode 100644
index 000000000..54cdd4270
--- /dev/null
+++ b/apps/vben5/packages/@abp/platform/src/components/workbench/components/WorkbenchHeader.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { VbenAvatar } from '@vben-core/shadcn-ui';
+
+import { NotificationReadState, useMyNotifilersApi } from '@abp/notifications';
+
+interface Props {
+  avatar?: string;
+  notifierCount?: number;
+  text?: string;
+}
+
+defineOptions({
+  name: 'WorkbenchHeader',
+});
+
+withDefaults(defineProps<Props>(), {
+  avatar: '',
+  text: '',
+  notifierCount: 0,
+});
+const unReadNotifilerCount = ref(0);
+const { getMyNotifilersApi } = useMyNotifilersApi();
+
+async function onInit() {
+  const { totalCount } = await getMyNotifilersApi({
+    maxResultCount: 1,
+    readState: NotificationReadState.UnRead,
+  });
+  unReadNotifilerCount.value = totalCount;
+}
+
+onMounted(onInit);
+</script>
+<template>
+  <div class="card-box p-4 py-6 lg:flex">
+    <VbenAvatar :alt="text" :src="avatar" class="size-20" />
+    <div
+      v-if="$slots.title || $slots.description"
+      class="flex flex-col justify-center md:ml-6 md:mt-0"
+    >
+      <h1 v-if="$slots.title" class="text-md font-semibold md:text-xl">
+        <slot name="title"></slot>
+      </h1>
+      <span v-if="$slots.description" class="text-foreground/80 mt-1">
+        <slot name="description"></slot>
+      </span>
+    </div>
+    <div class="mt-4 flex flex-1 justify-end md:mt-0">
+      <div class="flex flex-col justify-center text-right">
+        <span class="text-foreground/80">
+          {{ $t('workbench.header.notifier.title') }}
+        </span>
+        <a class="text-2xl">{{
+          $t('workbench.header.notifier.count', [notifierCount])
+        }}</a>
+      </div>
+    </div>
+  </div>
+</template>