From 01eeb51f2e63ec6840aa7bb36c4a2a515301484d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 22 Sep 2023 15:46:20 +0800
Subject: [PATCH] Refine notification center ui

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../packages/components/src/icons/icons.ts    |  4 +-
 .../dashboard/widgets/NotificationWidget.vue  | 51 +++++++++++--------
 .../modules/system/users/Notifications.vue    |  4 +-
 .../users/components/NotificationListItem.vue |  6 +++
 4 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/console/packages/components/src/icons/icons.ts b/console/packages/components/src/icons/icons.ts
index 9f78f9596b..d7ca48dd70 100644
--- a/console/packages/components/src/icons/icons.ts
+++ b/console/packages/components/src/icons/icons.ts
@@ -66,7 +66,7 @@ import IconZoomOutLine from "~icons/ri/zoom-out-line";
 import IconArrowLeftRightLine from "~icons/ri/arrow-left-right-line";
 import IconArrowUpDownLine from "~icons/ri/arrow-up-down-line";
 import IconRiUpload2Fill from "~icons/ri/upload-2-fill";
-import IconNotification2Line from "~icons/ri/notification-2-line";
+import IconNotificationBadgeLine from "~icons/ri/notification-badge-line";
 
 export {
   IconDashboard,
@@ -137,5 +137,5 @@ export {
   IconArrowLeftRightLine,
   IconArrowUpDownLine,
   IconRiUpload2Fill,
-  IconNotification2Line,
+  IconNotificationBadgeLine,
 };
diff --git a/console/src/modules/dashboard/widgets/NotificationWidget.vue b/console/src/modules/dashboard/widgets/NotificationWidget.vue
index 17ee7443cb..342e61900b 100644
--- a/console/src/modules/dashboard/widgets/NotificationWidget.vue
+++ b/console/src/modules/dashboard/widgets/NotificationWidget.vue
@@ -45,29 +45,36 @@ const { data: notifications } = useQuery({
       class="h-full w-full"
       defer
     >
-      <VEntity
-        v-for="notification in notifications"
-        :key="notification.metadata.name"
-      >
-        <template #start>
-          <VEntityField
-            :title="notification.spec?.title"
-            :route="{
-              name: 'UserNotifications',
-              query: { name: notification.metadata.name },
-            }"
-          />
-        </template>
-        <template #end>
-          <VEntityField>
-            <template #description>
-              <span class="truncate text-xs tabular-nums text-gray-500">
-                {{ relativeTimeTo(notification.metadata.creationTimestamp) }}
-              </span>
+      <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
+        <li
+          v-for="notification in notifications"
+          :key="notification.metadata.name"
+        >
+          <VEntity>
+            <template #start>
+              <VEntityField
+                :title="notification.spec?.title"
+                :route="{
+                  name: 'UserNotifications',
+                  query: { name: notification.metadata.name },
+                }"
+                :description="notification.spec?.rawContent"
+              />
+            </template>
+            <template #end>
+              <VEntityField>
+                <template #description>
+                  <span class="truncate text-xs tabular-nums text-gray-500">
+                    {{
+                      relativeTimeTo(notification.metadata.creationTimestamp)
+                    }}
+                  </span>
+                </template>
+              </VEntityField>
             </template>
-          </VEntityField>
-        </template>
-      </VEntity>
+          </VEntity>
+        </li>
+      </ul>
     </OverlayScrollbarsComponent>
   </VCard>
 </template>
diff --git a/console/src/modules/system/users/Notifications.vue b/console/src/modules/system/users/Notifications.vue
index 9369483a4f..7abdcfc137 100644
--- a/console/src/modules/system/users/Notifications.vue
+++ b/console/src/modules/system/users/Notifications.vue
@@ -2,7 +2,7 @@
 import { useUserStore } from "@/stores/user";
 import { apiClient } from "@/utils/api-client";
 import {
-  IconNotification2Line,
+  IconNotificationBadgeLine,
   VCard,
   VLoading,
   VPageHeader,
@@ -43,7 +43,7 @@ const selectedNotification = computed(() => {
 <template>
   <VPageHeader title="消息">
     <template #icon>
-      <IconNotification2Line class="mr-2 self-center" />
+      <IconNotificationBadgeLine class="mr-2 self-center" />
     </template>
   </VPageHeader>
   <div class="m-0 md:m-4">
diff --git a/console/src/modules/system/users/components/NotificationListItem.vue b/console/src/modules/system/users/components/NotificationListItem.vue
index 334cd81cbd..dec2d79cb7 100644
--- a/console/src/modules/system/users/components/NotificationListItem.vue
+++ b/console/src/modules/system/users/components/NotificationListItem.vue
@@ -67,6 +67,12 @@ watch(
     >
       {{ notification.spec?.title }}
     </div>
+    <div
+      v-if="notification.spec?.rawContent"
+      class="truncate text-xs text-gray-600"
+    >
+      {{ notification.spec.rawContent }}
+    </div>
     <div class="flex h-7 items-end justify-between">
       <div class="text-xs text-gray-600">
         {{ relativeTimeTo(notification.metadata.creationTimestamp) }}