Refine notification center ui

Signed-off-by: Ryan Wang <[email protected]>
halo-dev · Sep 24, 2023 · f9e23f7 · f9e23f7
1 parent 01eeb51
commit f9e23f7
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 3 deletions.
diff --git a/console/src/layouts/BasicLayout.vue b/console/src/layouts/BasicLayout.vue
@@ -302,6 +302,15 @@ onMounted(() => {
               >
                 {{ $t("core.sidebar.operations.profile.button") }}
               </VDropdownItem>
+              <VDropdownItem
+                @click="
+                  $router.push({
+                    name: 'UserNotifications',
+                  })
+                "
+              >
+                我的消息
+              </VDropdownItem>
               <VDropdownItem @click="handleLogout">
                 {{ $t("core.sidebar.operations.logout.button") }}
               </VDropdownItem>

diff --git a/console/src/modules/dashboard/widgets/NotificationWidget.vue b/console/src/modules/dashboard/widgets/NotificationWidget.vue
@@ -2,13 +2,25 @@
 import { useUserStore } from "@/stores/user";
 import { apiClient } from "@/utils/api-client";
 import { relativeTimeTo } from "@/utils/date";
-import { VCard, VEntity, VEntityField } from "@halo-dev/components";
+import {
+  VButton,
+  VCard,
+  VEmpty,
+  VEntity,
+  VEntityField,
+  VLoading,
+} from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 
 const { currentUser } = useUserStore();
 
-const { data: notifications } = useQuery({
+const {
+  data: notifications,
+  isLoading,
+  refetch,
+  isFetching,
+} = useQuery({
   queryKey: ["user-notifications"],
   queryFn: async () => {
     const { data } = await apiClient.notification.listUserNotifications({
@@ -39,7 +51,14 @@ const { data: notifications } = useQuery({
         </RouterLink>
       </div>
     </template>
+    <VLoading v-if="isLoading" />
+    <VEmpty v-else-if="!notifications?.length" title="当前没有未读的消息">
+      <template #actions>
+        <VButton :loading="isFetching" @click="refetch">刷新</VButton>
+      </template>
+    </VEmpty>
     <OverlayScrollbarsComponent
+      v-else
       element="div"
       :options="{ scrollbars: { autoHide: 'scroll' } }"
       class="h-full w-full"

diff --git a/console/src/modules/system/users/Notifications.vue b/console/src/modules/system/users/Notifications.vue
@@ -3,7 +3,9 @@ import { useUserStore } from "@/stores/user";
 import { apiClient } from "@/utils/api-client";
 import {
   IconNotificationBadgeLine,
+  VButton,
   VCard,
+  VEmpty,
   VLoading,
   VPageHeader,
   VTabbar,
@@ -19,7 +21,12 @@ const { currentUser } = useUserStore();
 
 const activeTab = useRouteQuery("tab", "unread");
 
-const { data: notifications, isLoading } = useQuery({
+const {
+  data: notifications,
+  isLoading,
+  refetch,
+  isFetching,
+} = useQuery({
   queryKey: ["user-notifications", activeTab],
   queryFn: async () => {
     const { data } = await apiClient.notification.listUserNotifications({
@@ -29,6 +36,7 @@ const { data: notifications, isLoading } = useQuery({
 
     return data;
   },
+  cacheTime: 0,
 });
 
 const selectedNotificationName = useRouteQuery<string | undefined>("name");
@@ -72,6 +80,25 @@ const selectedNotification = computed(() => {
               @change="selectedNotificationName = undefined"
             ></VTabbar>
             <VLoading v-if="isLoading" />
+            <Transition
+              v-else-if="!notifications?.items.length"
+              appear
+              name="fade"
+            >
+              <VEmpty
+                :title="`${
+                  activeTab === 'unread'
+                    ? '当前没有未读的消息'
+                    : '当前没有已读的消息'
+                }`"
+              >
+                <template #actions>
+                  <VButton :loading="isFetching && !isLoading" @click="refetch">
+                    刷新
+                  </VButton>
+                </template>
+              </VEmpty>
+            </Transition>
             <Transition v-else appear name="fade">
               <ul
                 class="box-border h-full w-full divide-y divide-gray-100"